Flappy Bird Game: HTML, CSS & JavaScript Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird Game</title>
<style type="text/css">
body {
margin: 0;
background-color: #70c5ce;
}
<pre><code> #bird {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background-color: #ff7f50;
border-radius: 20px;
}
#pipe {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 400px;
background-color: #55efc4;
}
</style>
</code></pre>
</head>
<body>
<div id="bird"></div>
<div id="pipe"></div>
<script type="text/javascript">
let bird = document.querySelector('#bird');
let pipe = document.querySelector('#pipe');
<pre><code> let birdX = 0;
let birdY = 0;
let gravity = 0.25;
let pipeX = 0;
let pipeY = 0;
let pipeSpeed = 5;
document.body.addEventListener('keydown', function(event) {
if (event.keyCode == 32) {
birdY -= 25;
}
});
function update() {
birdY += gravity;
bird.style.top = birdY + 'px';
pipeX -= pipeSpeed;
pipe.style.right = pipeX + 'px';
if (pipeX <= -80) {
pipeX = window.innerWidth;
}
if (collision(birdX, birdY, pipeX, pipeY)) {
alert('Game over!');
window.location.reload();
}
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
function collision(x1, y1, x2, y2) {
if (x1 + 40 >= x2 && x1 <= x2 + 80 && y1 + 40 >= y2 && y1 <= y2 + 400) {
return true;
}
return false;
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmtK 著作权归作者所有。请勿转载和采集!