版权声明：本文为博主 我吃酸萝卜/李帅醒 原创， 未经博主允许不得转载。新浪微博@我吃酸萝卜 https://blog.csdn.net/wcslb/article/details/53240662
相信大家都玩过《像素鸟》（又名《下落的小鸟》），今天就教大家用原生JaveScript 实现像素鸟的游戏。
还在为得不到高分而苦恼吗？今天学会了，游戏难易自己控制！！！
首先明白：1.需要运动的小鸟（速度）；
2.背景（水管）；水管：运动速度 创建速度 水管随机高度
3.编写碰撞判断；
4.计分板;
需要的图片代码素材：http://download.csdn.net/detail/wcslb/9687998
HTML页面代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="bg">
<div id="BG"></div>
<div id="start">
<ul id="log">
<li class="logo"></li>
<li class="bird"></li>
</ul>
<button class="btnstart"></button>
</div>
<div id="gameover" style="display:none">
<div class="over">
</div>
<div class="gameover">
<span class="number">0</span>
<span class="HistoryNumber">0</span>
</div>
<div class="ok"></div>
</div>
<div id="bigScore" style="display:none">
<img src="img/0.jpg">
</div>
<ul id="banner">
<li></li>
<li></li>
</ul>
</div>
</body>
</html>@charset "utf-8";
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
a{
text-decoration: none;
}
li,ul{
list-style: none;
}
#bg{
margin: 0px auto;
width: 343px;
height: 480px;
position: relative;
background: url(../img/bg.jpg);
overflow: hidden;
}
#BG{
position: absolute;
width: 343px;
height: 480px;
}
#start{
width: 343px;
padding-top: 100px;
}
#log{
width: 343px;
height: 77px;
position: absolute;
}
.logo{
width: 236px;
height: 77px;
background: url(../img/head.png);
}
.bird{
width: 40px;
height: 30px;
background: url(../img/bird0.png) no-repeat;
}
#log li{
float:left;
}
.btnstart{
width: 85px;
height: 29px;
border:none;
background: url(../img/start.jpg) no-repeat;
position: absolute;
top: 330px;
left: 130px;
}
#banner li{
width: 343px;
height: 14px;
float: left;
background: yellow;
background: url(../img/banner.jpg) no-repeat;
}
#banner{
width: 686px;
position: absolute;
top: 423px;
}
.Brid{
width: 40px;
height: 30px;
background: url(../img/bird0.png) no-repeat;
position: absolute;
top:160px;
left:70px;
}
.conduit{
position: absolute;
width: 62px;
right: -62px;
}
.conduit div{
width: 62px;
}
#gameover{
position: absolute;
margin: 70px 30px;
z-index: 3;
}
.gameover{
width: 269px;
height: 135px;
background:url(../img/message.jpg) no-repeat;
margin-top: 20px;
}
.HistoryNumber{
position: absolute;
width: 53px;
height: 37px;
bottom: 63px;
right: 0px;
margin-right: 28px;
line-height: 37px;
text-align: center;
font-size: 40px;
}
.gameover span{
float: right;
width: 53px;
height: 37px;
margin-top: 33px;
margin-right: 28px;
line-height: 37px;
text-align: center;
font-size: 40px;
}
.over{
width: 221px;
height: 40px;
background:url(../img/game_over.png) no-repeat;
}
.ok{
background:url(../img/ok.jpg) no-repeat;
width: 96px;
margin:10px auto;
height: 33px;
}
#bigScore{
position: absolute;
z-index: 3;
width: 343px;
text-align: center;
margin:0px auto;
height:39px;
}window.onload=function(){
// 工具
//查找元素
function $(a,b){
if(arguments.length==2){
return document.querySelector(a).querySelectorAll(b);
}
if(arguments.length==1){
return document.querySelector(a);
}
}
//创建元素
function cj(name){
return document.createElement(name);
}
//开始界面
var number=0; //计算分数
var time3=0;
var Arr=["img/bird0.png","img/bird1.png","img/down_bird0.png","img/down_bird1.png","img/up_bird0.png","img/up_bird1.png"];
var index=0;
time1=setInterval(move,30);
var i=1;
function move(){
//背景滚动
$("#banner").style.left=$("#banner").offsetLeft-1+"px";
if($("#banner").offsetLeft<=-343){
$("#banner").style.left="0px";
}
//小鸟
$(".bird").style.background=" url("+Arr[index++]+")"+" no-repeat";
if(index==Arr.length){
index=0;
}
//LOGO
$("#log").style.top=$("#log").offsetTop+i+"px";
if($("#log").offsetTop<=80|| $("#log").offsetTop>=120){
i*=-1;
}
}
//创建小鸟
function Abrid(){
Brid=cj("div");
Brid.setAttribute("class","Brid");
$("#BG").appendChild(Brid);
return Brid;
}
//小鸟运动
var speedY=0.1;
var imgindex=0;
function Abridmove(Brid){
time2=setInterval(fly,30);
function fly(){
speedY=speedY+0.5;
Brid.style.top=Brid.offsetTop+speedY+"px";
//煽动翅膀
Brid.style.background=" url("+Arr[imgindex++]+")"+" no-repeat";
if(imgindex==2){
imgindex=0;
};
//判断碰撞
if (Brid.offsetTop+Brid.offsetHeight>=422||Brid.offsetTop<0){
Gameover();
};
}
//点击鼠标向上飞
document.onclick=function(){
speedY=-8;
}
//点击空格向上飞
document.onkeydown = function(ev) {
var eventObj = ev || event;
if(eventObj.keyCode==32){
speedY=-8;
}
}
};
// 创建水管
function WaterPipe(conduit,Height1,Height2,top,bottom,img1,img2){
conduit.setAttribute("class","conduit");
conduit.style.top=top;
conduit.style.bottom=bottom;
var top=cj("div");
top.style.height=Height1;
top.style.backgroundImage="url("+img1+")";
var down=cj("div");
down.style.height=Height2;
down.style.background="url("+img2+")";
conduit.appendChild(top);
conduit.appendChild(down);
$("#BG").appendChild(conduit);
//水管运动
this.MoveWater=function(){
time3=setInterval(function(){
//水管滚动
conduit.style.left=conduit.offsetLeft-1+"px";
if(conduit.offsetLeft+conduit.offsetWidth<=0){
//水管移动出去清除
conduit.remove();
};
//判断碰撞
if($(".Brid").offsetTop+$(".Brid").offsetHeight>=conduit.offsetTop && $(".Brid").offsetTop<=conduit.offsetTop+conduit.offsetHeight && $(".Brid").offsetLeft+$(".Brid").offsetWidth>=conduit.offsetLeft && $(".Brid").offsetLeft<=conduit.offsetLeft+conduit.offsetWidth){
Gameover();//调用停止函数
}
//判断分数
if(conduit.offsetLeft+conduit.offsetWidth==70){
number++; //每次有两个水管满足条件，所以计算积分的时候需要除2;
}
jiFen();
},15);
};
}
//游戏初始化水管移动
function StartGame(){
time4=setInterval(CreateWater,2400)
function CreateWater(){
var a=parseInt(Math.random()*180);
//创建上水管
var Top=cj("div");
//创建下水管
var Down=cj("div");
var Watertop= new WaterPipe(Top,a+"px","60px","0px","none","img/up_mod.png","img/up_pipe.png");
var Waterdown= new WaterPipe(Down,"60px",(180-a)+"px","none","57px","img/down_pipe.png","img/down_mod.png");
//调用水管移动方法
Watertop.MoveWater();
Waterdown.MoveWater();
}
};
//计算积分
function jiFen() {
$("#bigScore").innerHTML = "";
var scoreStr =Math.floor((number/2)).toString();
for (var i = 0; i < scoreStr.length; i++) {
$("#bigScore").innerHTML += "<img src='img/" + scoreStr[i] + ".jpg'/>";
};
}
//点击开始
$(".btnstart").onclick=function(){
$("#bigScore").style.display="block";
$("#start").style.display="none";
clearInterval(time1);
Abridmove(Abrid());
StartGame();
}
//重新开始
$(".ok").onclick=function(){
number=0;
$("#gameover").style.display="none";
$("#start").style.display="none";
$("#BG").innerHTML="";
clearInterval(time1);
Abridmove(Abrid());
StartGame();
}
//点击暂停$()
function Gameover(){
$(".number").innerHTML=Math.floor(number/2);
//利用H5新属性，可以在内存储存一个数据，来作为历史成绩记录
if(window.localStorage.getItem("history")>Math.floor(number/2)){
$(".HistoryNumber").innerHTML=window.localStorage.getItem("history");
}else{
window.localStorage.setItem("history",Math.floor(number/2));
$(".HistoryNumber").innerHTML=Math.floor(number/2);
}
$("#gameover").style.display="block";
//清除所有定时器
for(var i=0;i<1000;i++){
clearInterval(i);
}
}
}
