html碰撞的小鸟游戏代码,180行原生js代码实现简易版飞行的小鸟游戏

/**原理简单，(简单碰撞判断，定时器运用)复制代码直接运行即可，如果没有声音文件，则去除几处调用游戏声效的代码即可**/

*{

margin: 0;

padding: 0;

list-style: none;

}

body{

overflow: hidden;

}

#bird{

width: 30px;

height: 30px;

font-size: 11px;

background-color: tomato;

position: absolute;

left: 500px;

top :50px;

}

Enter开始

window.onload = function(){

var bird = document.getElementById("bird");

var sc = document.getElementById("baMusic");

var over = document.getElementById("overMusic");

var ready = document.getElementById("readyMusic");

var startBtn = document.getElementById("startBtn");

var speed = 0;

var visiWidth = document.documentElement.clientWidth;

var visiHeight = document.documentElement.clientHeight;

var die = false; // 默认未死亡

var score = 0;

var birdTimer;  //鸟自由落体定时器

var gaming = false; //默认游戏未开始

/*键盘监听按enter开始游戏*/

document.onkeydown = function(event){

event = event||window.event;

if(gaming){

speed = speed - 20;

if(!die){

dump();

}

}else{

if(event.keyCode==13){

bird.innerHTML="正在游戏";

gaming = true;

gameStart();

fly();

var rnadzTimer = setInterval(function(){

getRandomZz();

},1500);  // 隔指定时间生成柱子.

}

}

};

function fly(){

clearInterval(birdTimer);

birdTimer = setInterval(function(){

var curTop = parseInt(bird.offsetTop);

if(curTop >= visiHeight-50 || curTop <= 0){

clearInterval(birdTimer);

die = true;

gameOver();

document.onkeydown = null;

return;

}

speed +=1;

bird.style.top = (curTop + speed) + "px";

},50);

}

function getRandomZz(){

var zzTimer ;

var kx = getRandom(250,600); //留多少空隙

var zzTop = document.createElement("div");

var zzBtm = document.createElement("div");

var randHeight = getRandom(50,300);

var randWidthTop = getRandom(50,150);

zzTop.moveData = visiWidth;

zzTop.style.height = randHeight+"px";

zzTop.style.width = randWidthTop+"px";

zzTop.style.backgroundColor = "green";

zzTop.style.position = "absolute";

zzTop.style.left = "100%";

// 设置底部柱子

zzBtm.moveData = visiWidth;

zzBtm.style.height = (visiHeight -  randHeight -kx)+"px";

zzBtm.style.width = randWidthTop+"px";

zzBtm.style.backgroundColor = "green";

zzBtm.style.position = "absolute";

zzBtm.style.left = "100%";

zzBtm.style.top = (randHeight+kx)+"px";

document.body.appendChild(zzTop);

document.body.appendChild(zzBtm);

zzTimer = setInterval(function(){

if(die){

clearInterval(zzTimer);

return;

}

zzTop.moveData--;

zzTop.style.left = zzTop.moveData + "px";

zzBtm.style.left = zzTop.moveData + "px";

if(zzTop.moveData<=-150){

score++;

getScore();

clearInterval(zzTimer);

}

// 检测碰撞

if(isKnock(bird,zzTop)||isKnock(bird,zzBtm)){

die = true;

clearInterval(zzTimer);

clearInterval(birdTimer);

gameOver();

alert("得分:" + score * 5);

}

},3);

}

function gameStart(){

ready.src="video/ready.mp3";

ready.play();

}

function getScore(){

sc.src="video/score.mp3";

sc.play();

}

function gameOver(){

over.src="video/gameover.mp3";

over.play();

}

function dump(){

over.src="video/jump.mp3";

over.play();

}

}

/**

*随机返回一个n-m的整数

*/

function getRandom(n,m){

return parseInt(Math.random()*(m-n)) +n;

}

/*

* 碰撞检测方法,如果碰撞则返回true

* obj1 第一个dom 对象

* obj2 第二个dom 对象

* */

function isKnock(obj1,obj2){

if(obj1.offsetLeft + obj1.offsetWidth > obj2.offsetLeft &&

obj2.offsetLeft + obj2.offsetWidth > obj1.offsetLeft &&

obj1.offsetTop + obj1.offsetHeight > obj2.offsetTop &&

obj2.offsetTop + obj2.offsetHeight > obj1.offsetTop){

return true;

}

return false;

}