<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { margin: 0; padding: 0; } #game { width: 800px; height: 600px; border: 1px solid #000; background: url(images/sky.png); overflow: hidden; position: relative; } #game .pipeD { background: url(images/pipe1.png) top center; position: absolute; } #game .pipeU { background: url(images/pipe2.png) bottom center; position: absolute; } #bird { width: 34px; height: 25px; /* border-radius: 10px; background-color: red;*/ position: absolute; top: 100px; left: 100px; background: url(images/birds.png) -8px -10px no-repeat; } </style> </head> <body> <div id="game"> <div id="bird"></div> </div> </body>
<script type="text/javascript">
var birdElement = document.getElementById("bird");
var game = document.getElementById("game");
var gameover = false;
var g = 1;
// var i = 0;
var timer=null;
var bird = {
x: birdElement.offsetLeft,
y: birdElement.offsetTop,
speedX: 5,
speedY: 0,
start: birdElement
};
var sky = {
x: 0
};
game.onclick = function () {
the setInterval ( function () {
// the game is not over when the run code
IF ! ( GameOver) {
// entire game background x axis to move
sky.x = sky. X - bird.speedX;
game.style.backgroundPositionX = sky.x + "PX" ;
// coordinate y axis when the bird fall
bird.speedY = bird.speedY + G;
// set the variable to receive a bird when falling y axis, to set the speed of the bird fall
var STEP = bird.speedY;
bird.y = bird.y + STEP;
// used to set a variable minimum height falling birds, used to determine whether to end the game
var Overy = game.offsetHeight - birdElement.offsetHeight;
// bird height greater than the minimum y-axis coordinates, so the game is stopped
IF (Bird .y> Overy) {
bird.y = Overy;
STOP (sky.x);
}
// Y-axis coordinate of the bird is less than 0, indicating that the top border met, the game ends
IF (bird.y <0 ) {
Bird .y = 0 ;
STOP (sky.x);
}
// position when the birds began to appear in the game provided
bird.start.style.top = bird.y + "PX" ;
// the console.log (bird.x)
}
} 30);
// add a keyboard event, the keyboard arrow keys to achieve the control birds
document.onkeyup = function (E) {
IF (e.keyCode 38 is === ) {
bird.speedY = -10 ;
}
}
function Pipe (positonX ) {
// tube coordinates
the this .x = positonX;
the this .upPipeY = 0 ;
the this .width = 52 is ;
the this .upPipeH = Random (100,275 );
the this .downPipeY = the this .upPipeH + 200 is ;
the this.downPipeH = game.offsetHeight - this.downPipeY;
// 动态添加管子
var divUp = document.createElement("div");
divUp.className = "pipeU";
divUp.style.width = this.width + "px";
divUp.style.height = this.upPipeH + "px";
divUp.style.left = this.x + "px";
divUp.style.top = this.upPipeY + "px";
game.appendChild(divUp);
var divDown = document.createElement("div");
DivDown.className = "PIPED" ;
divDown.style.width = the this .width + "PX" ;
divDown.style.height = the this .downPipeH + "PX" ;
divDown.style.left = the this .x + "PX " ;
divDown.style.top = this .downPipeY +" PX " ;
game.appendChild (divDown);
// because the timer pointing to the chaos of this problem, so in advance to save this point, the method here this point calls examples
var that = the this ;
// set the timer so that the tube is moved backward
the this .timer the setInterval = (function () {
// Here a control speed of movement of the tube is larger the higher the difficulty digital
that.x that.x = -. 5 ;
// simple implementation of seamless tubes rolling, poor vision
IF (that.x <-52 ) {
that.x = 800 ;
}
IF ! ( GameOver) {
divUp.style.left = that.x + "PX" ;
divDown.style.left = that.x + "PX" ;
}
// set the variables, collision detection game, and the game is stopped
var downBoom = (+ 34 is bird.x> that.x) && (bird.x <52 is that.x +) && (bird.y + 25> that.downPipeY);
var= upBoom (+ 34 is bird.x> that.x) && (bird.x <52 is that.x +) && (bird.y < that.upPipeH);
IF (downBoom || upBoom) {
// GameOver = to true;
STOP (sky.x);
}
}, 30 );
}
// perform the above function method
var ARR = [];
for ( var I = 0; I <. 4; I ++ ) {
ARR [I] = new new Pipe (I * 200 + 400 );
}
// package for a method of stopping the game,
function sTOP (Sky) {
var a;
GameOver=true;
clearInterval(timer);
for(var i=0;i<arr.length;i++){
clearInterval(arr[i].timer);
}
if(Math.abs(Sky)<=352){
a=0;
alert("成绩："+a)
}else{
a=Math.floor((Math.abs(Sky)-300)/200+1);
// a=Math.ceil(((Math.abs(Sky)-300))/200);
alert("成绩："+a)
}
// console.log(Sky)
}
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b)
}
</script>
Results are as follows
