HTML+CSS+JavaScript实现小游戏“不死鸟”
Posted 刚入门的程序猿小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JavaScript实现小游戏“不死鸟”相关的知识，希望对你有一定的参考价值。
运行效果图
全部代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不死鸟</title>
</head>
<style>
div#game{
position:relative;
width:800px;
height:600px;
border:1px solid black;
background-image: url(img/sky.png);
}
div#bird{
width: 52px;
height: 45px;
/*border: 1px solid red;*/
background-image: url(img/birds.png);
position: relative;
top:300px;
background-position-x: 0px;
}
div#mask{
display: none;
width: 800px;
height: 600px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top:0px;
left:0px;
}
div#info{
width: 200px;
height: 150px;
background-color: bisque;
font-size: 25px;
text-align: center;
padding-top: 50px;
color: darkorange;
border-radius: 10px;
position: absolute;
top:50%;
left:50%;
margin-left: -100px;
margin-top: -100px;
}
div#restart{
width: 161px;
height: 45px;
background-image: url(img/Hint.png);
position: absolute;
bottom: 10px;
left:50%;
margin-left: -80px;
cursor: pointer;
}
</style>
<body>
<div id="game" onclick="birdUp()">
<div id="bird"></div>
<div id="upZhu1"></div>
<div id="upZhu2"></div>
<div id="upZhu3"></div>
<div id="upZhu4"></div>
<div id="downZhu1"></div>
<div id="downZhu2"></div>
<div id="downZhu3"></div>
<div id="downZhu4"></div>
<div id="mask">
<div id="info">
失败！<br>
<div id="restart" onclick="location.reload();"></div>
</div>
</div>
</div>
</body>
<script>
var game = document.getElementById("game");
var bird = document.getElementById("bird");
var mask = document.getElementById("mask");
//音频元素，可以播放音频。
var audio = document.createElement("audio");
//获取柱子，并且放进数组中。
var upArray = new Array(4);
upArray[0] = document.getElementById("upZhu1");
upArray[1] = document.getElementById("upZhu2");
upArray[2] = document.getElementById("upZhu3");
upArray[3] = document.getElementById("upZhu4");
var downArray = new Array(4);
downArray[0] = document.getElementById("downZhu1");
downArray[1] = document.getElementById("downZhu2");
downArray[2] = document.getElementById("downZhu3");
downArray[3] = document.getElementById("downZhu4");
//初始化柱子
function initZhu(){
for(var i=0;i<=3;i++){
//随机生成 200-350 的值。
var height = Math.floor(Math.random()*150)+200;
upArray[i].style.width="52px";
upArray[i].style.height=height+"px";
/*upArray[i].style.border="1px solid red";*/
upArray[i].style.position="absolute";
upArray[i].style.left=200*(i+1)+"px";
upArray[i].style.top="0px";
upArray[i].style.backgroundImage="url(img/pipe2.png)";
upArray[i].style.backgroundPositionY="bottom";
var downHeight = 600 - height - 150;
downArray[i].style.height=downHeight+"px";
downArray[i].style.width="52px";
/*downArray[i].style.border="1px solid red";*/
downArray[i].style.position="absolute";
downArray[i].style.left=200*(i+1)+"px";
downArray[i].style.top=(height+150)+"px";
downArray[i].style.backgroundImage="url(img/pipe1.png)";
}
}
initZhu();
//设置定时器，让天空往后移动。
var time1 = setInterval(skyMove,10);
var skyX=0;
function skyMove(){
game.style.backgroundPositionX=skyX+"px";
skyX--;
//同时控制柱子往后移动
for(var i=0;i<=3;i++){
upArray[i].style.left=(upArray[i].offsetLeft-1)+"px";
downArray[i].style.left=(downArray[i].offsetLeft-1)+"px";
//控制柱子。如果柱子完全超出左边，那么要放到最后面去。
//同时更改一下柱子的高度，增添游戏趣味性。
if(upArray[i].offsetLeft-1<-52){
upArray[i].style.left = (upArray[i].offsetLeft+800)+"px";
downArray[i].style.left = (downArray[i].offsetLeft+800)+"px";
var height = Math.floor(Math.random()*150)+200;
upArray[i].style.height=height+"px";
downArray[i].style.height = (600-height-150) + "px";
downArray[i].style.top = (height+150) +"px";
}
}
}
//让小鸟的3张小图不停切换，实现翅膀煽动效果。
var time2 = setInterval(chiBang,1000);
var birdIndex = 1;
function chiBang(){
//x方向偏移量在 0 -52 -104之间切换。
var x = (-1)*(birdIndex-1)%3*52;
bird.style.backgroundPositionX=x+"px";
birdIndex++;
}
//让小鸟往前，向下移动。
var time3 = setInterval(birdMove,10);
var birdLeft = 0;
var birdTop = 300;
function birdMove(){
bird.style.left=birdLeft+"px";
bird.style.top=birdTop+"px";
birdLeft++;
birdTop++;
//判断小鸟移动过程中，是否超出边界。
//offsetTop 顶部偏移量
//offsetLeft 左边偏移量
//offsetTop 是数字， style.top 是字符串 “10px”
//alert(bird.offsetLeft+" "+bird.offsetTop);
if(bird.offsetTop<=0 || bird.offsetLeft+52>=800 || bird.offsetTop+45>=600){
stop();
}
//判断小鸟和柱子是否相撞。
for(var i=0;i<=3;i++){
if( bird.offsetLeft+52>upArray[i].offsetLeft && bird.offsetLeft+52<upArray[i].offsetLeft+52 ){
if(bird.offsetTop<upArray[i].offsetHeight){
stop();
}
if(bird.offsetTop+bird.offsetHeight > upArray[i].offsetHeight+150){
stop();
}
}
upArray[i]
downArray[i]
}
}
//点击屏幕，小鸟向上移动。
function birdUp(){
//点击屏幕，向上走30个像素。
birdTop = birdTop - 30;
bird.style.top=birdTop+"px";
//播放点击音效。
// audio元素可以播放音频。
audio.setAttribute("src","res/Point.wav");
audio.play();
}
//结束游戏。
function stop(){
mask.style.display="block";
clearInterval(time1);
clearInterval(time2);
clearInterval(time3);
game.onclick="";
}
</script>
</html>
虚心接受各位的意见，欢迎在评论区提出宝贵的意见
以上是关于HTML+CSS+JavaScript实现小游戏“不死鸟”的主要内容，如果未能解决你的问题，请参考以下文章