forked from danba340/tiny-flappy-bird
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
35 lines (34 loc) · 1.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style="height: 100vh; background-color: skyBlue; text-align: center;touch-action: manipulation;">
<canvas id="c" width="400" height="400" style="background: url('./starbase.png');background-repeat: no-repeat;background-position: bottom;"></canvas>
<script>
context = c.getContext("2d");
const bird = new Image();
bird.src = "bird.png";
birdX = birdDY = score = bestScore = 0;
interval = birdSize = pipeWidth = topPipeBottomY = 24;
birdY = pipeGap = 200;
canvasSize = pipeX = 400;
c.onclick = () => (birdDY = 9) ;
setInterval(() => {
context.clearRect(0,0,canvasSize,canvasSize);
context.fillStyle = "transparent";
context.fillRect(0,0,canvasSize,canvasSize); // Draw sky
birdY -= birdDY -= 0.5; // Gravity
context.drawImage(bird, birdX, birdY, birdSize * (524/100), birdSize); // Draw bird
context.fillStyle = "green";
pipeX -= 8; // Move pipe
pipeX < -pipeWidth && // Pipe off screen?
((pipeX = canvasSize), (topPipeBottomY = pipeGap * Math.random())); // Reset pipe and randomize gap.
context.fillRect(pipeX, 0, pipeWidth, topPipeBottomY); // Draw top pipe
context.fillRect(pipeX, topPipeBottomY + pipeGap, pipeWidth, canvasSize); // Draw bottom pipe
context.fillStyle = "black";
context.fillText(score++, 9, 25); // Increase and draw score
bestScore = bestScore < score ? score : bestScore; // New best score?
context.fillText(`Best: ${bestScore}`, 9, 50); // Draw best score
(((birdY < topPipeBottomY || birdY > topPipeBottomY + pipeGap) && pipeX < birdSize * (524/100))// Bird hit pipe?
|| birdY > canvasSize) && // Bird falls off screen
((birdDY = 0), (birdY = 200), (pipeX = canvasSize), (score = 0)); // Bird died
}, interval)
</script>
</body>