Flappy Bird Game: HTML5 Canvas Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird Game: HTML5 Canvas Tutorial</title>
<style>
canvas {
border: 1px solid black;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<canvas id='canvas' width='400' height='400'></canvas>
<script>
// Variables
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let frames = 0;
const gravity = 0.3;
const bird = {
x: 10,
y: 10,
velY: 0,
radius: 10,
color: '#ff0000',
draw: function(){
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
context.fillStyle = this.color;
context.fill();
context.stroke();
},
update: function(){
this.velY += gravity;
this.y += this.velY;
if (this.y + this.radius > canvas.height) {
this.y = canvas.height - this.radius;
this.velY = 0;
}
if (this.y - this.radius < 0) {
this.y = this.radius;
this.velY = 0;
}
}
}
const pipes = [];
pipes[0] = {
x: canvas.width,
y: 0,
width: 20,
height: Math.floor(Math.random() * canvas.height),
color: '#000000'
}
// Functions
function drawPipes() {
for (let i = 0; i < pipes.length; i++) {
context.fillStyle = pipes[i].color;
context.fillRect(pipes[i].x, pipes[i].y, pipes[i].width, pipes[i].height);
}
}
function updatePipes(){
for (let i = 0; i < pipes.length; i++) {
pipes[i].x -= 3;
if (pipes[i].x + pipes[i].width < 0) {
pipes.shift();
pipes.push({
x: canvas.width,
y: 0,
width: 20,
height: Math.floor(Math.random() * canvas.height),
color: '#000000'
});
}
}
}
function gameOver(){
context.font = '50px sans-serif';
context.fillStyle = '#000000';
context.fillText('Game Over', canvas.width/2 - 90, canvas.height/2);
}
function checkCollision(){
for (let i = 0; i < pipes.length; i++) {
if (bird.x + bird.radius > pipes[i].x &&
bird.x - bird.radius < pipes[i].x + pipes[i].width &&
(bird.y - bird.radius < pipes[i].height ||
bird.y + bird.radius > pipes[i].y + pipes[i].height)) {
return gameOver();
}
}
}
function loop(){
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, canvas.width, canvas.height);
bird.draw();
bird.update();
drawPipes();
updatePipes();
checkCollision();
frames++;
requestAnimationFrame(loop);
}
document.onkeydown = function(e){
if (e.keyCode == 32) {
bird.velY -= 5;
}
}
// Call loop
loop();
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmtM 著作权归作者所有。请勿转载和采集!