像素鸟 代码 html,2021-04-05像素鸟代码

html>

Document

* {

margin: 0;

padding: 0;

}

#game {

width: 800px;

height: 600px;

background: url('./images/sky.png');

position: relative;

overflow: hidden;

}

#bird {

width: 34px;

height: 25px;

background: url('./images/birds.png') -8px -10px no-repeat;

position: absolute;

top: 100px;

left: 100px;

}

// 让小鸟飞起来

// 移动的背景

// top

// 定时器

// 动画原理 leader = leader + step

// 获取相应的元素

var game = document.getElementById('game');

var birdEle = document.getElementById('bird');

// 初始化背景图的值

var sky = {

x: 0

}

// 初始bird 的值

var bird = {

speedX: 5,

speedY: 0,

x: birdEle.offsetLeft,

y: birdEle.offsetTop,

sum : 0

}

// 游戏的状态

var running = true;

setInterval(function () {

if (running) {

bird.sum += bird.x ;

// 移动背景让小鸟实现水平运动

sky.x -= 5;

game.style.backgroundPositionX = sky.x + 'px';

// 实现小鸟的上下运动

bird.speedY += 1;  // 下落

bird.y += bird.speedY;

if (bird.y 

running = false;

bird.y = 0;

}

if (bird.y + birdEle.offsetHeight > 600) {   // 不能飞出下边界

running = false;

bird.y = 600 - birdEle.offsetHeight;

console.log(bird.y)

}

birdEle.style.top = bird.y + 'px';

}

}, 30)

// 点击文档的时候实现小鸟向上运动

document.onclick = function () {

bird.speedY = -10;

}

document.onkeypress = function() {

bird.speedY = -8;

}

// 创建管道

function createPipe(position) {

var pipe = {};

pipe.x = position;

pipe.uHeight = 200 + parseInt(Math.random() * 100);   // 200 - 300  px

pipe.dHeight = 600 - pipe.uHeight - 200;       //  100 - 200

pipe.dTop = pipe.uHeight + 200;

var uPipe = document.createElement('div');

uPipe.style.width = '52px';

uPipe.style.height = pipe.uHeight + 'px';

uPipe.style.background = 'url("./images/pipe2.png") no-repeat center bottom';

uPipe.style.position = 'absolute';

uPipe.style.top = '0px';

uPipe.style.left = pipe.x + 'px';

game.appendChild(uPipe);

var dPipe = document.createElement('div');

dPipe.style.width = '52px';

dPipe.style.height = pipe.dHeight + 'px';

dPipe.style.background = 'url("./images/pipe1.png") no-repeat center  top';

dPipe.style.position = 'absolute';

dPipe.style.top = pipe.dTop + 'px';

dPipe.style.left = pipe.x + 'px';

game.appendChild(dPipe);

// 让管道运动起来

setInterval( pipMove, 30)

function pipMove() {

if (running) {

pipe.x -= 2;

uPipe.style.left = pipe.x + 'px';

dPipe.style.left = pipe.x + 'px';

if (pipe.x 

pipe.x = 800;

}

var uCheck = bird.x + 34 > pipe.x && bird.x 

var dCheck = bird.x + 34 > pipe.x && bird.x  pipe.uHeight + 200;

if (uCheck || dCheck) {

running = false;

console.log("得分" , bird.sum );

}

}

}

}

// 初始界面的4个管道

createPipe(400);

createPipe(600);

createPipe(800);

createPipe(1000);