Flappy Bird Game HTML: Create Your Own Retro Classic
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird Game HTML: Create Your Own Retro Classic</title>
<style>
#game-container{
width: 500px;
height: 600px;
position: relative;
background-color: #ccc;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
}
#game-bird{
position: absolute;
width: 50px;
height: 50px;
background-color: #f00;
left: 0;
top: 0;
animation: bird-anim 10s infinite;
-webkit-animation: bird-anim 10s infinite;
}
@keyframes bird-anim{
0%{
transform: translateY(0);
}
25%{
transform: translateY(-50px);
}
50%{
transform: translateY(0);
}
75%{
transform: translateY(-50px);
}
100%{
transform: translateY(0);
}
}
@-webkit-keyframes bird-anim{
0%{
-webkit-transform: translateY(0);
}
25%{
-webkit-transform: translateY(-50px);
}
50%{
-webkit-transform: translateY(0);
}
75%{
-webkit-transform: translateY(-50px);
}
100%{
-webkit-transform: translateY(0);
}
}
#game-pipes{
position: absolute;
width: 100px;
height: 600px;
background-color: #0f0;
left: 500px;
top: 0;
animation: pipe-anim 10s infinite;
-webkit-animation: pipe-anim 10s infinite;
}
@keyframes pipe-anim{
0%{
left: 500px;
}
100%{
left: -100px;
}
}
@-webkit-keyframes pipe-anim{
0%{
left: 500px;
}
100%{
left: -100px;
}
}
</style>
</head>
<body>
<div id='game-container'>
<div id='game-bird'></div>
<div id='game-pipes'></div>
</div>
<script>
document.onkeydown = function(e) {
switch (e.keyCode) {
case 32:
document.getElementById('game-bird').style.top = '-50px';
}
};
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmtZ 著作权归作者所有。请勿转载和采集!