用html制作像素鸟游戏要用到的图片,game.html

像素鸟

s

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

a {

text-decoration: none;

}

#game {

position: relative;

width: 800px;

height: 600px;

overflow: hidden;

margin: 150px auto;

background: url(images/sky.png);

}

#bird {

position: absolute;

top: 300px;

left: 50px;

width: 34px;

height: 25px;

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

}

#start {

/* display: none; */

position: absolute;

font-size: 60px;

height: 70px;

line-height: 70px;

border-radius: 5px;

z-index: 999;

background-color: rgb(248, 244, 196);

border: none;

outline: none;

top: 264px;

left: 292px;

}

#select {

position: absolute;

top: 357px;

left: 383px;

}

#select select {

height: 30px;

padding-left: 5px;

font-size: 18px;

background-color: rgb(248, 244, 196);

}

#end {

display: none;

position: absolute;

font-size: 60px;

height: 70px;

line-height: 70px;

border-radius: 5px;

z-index: 999;

background-color: rgb(248, 244, 196);

border: none;

outline: none;

color: red;

top: 264px;

left: 292px;

}

#score {

position: fixed;

top: 100px;

font-size: 40px;

color: rgb(2, 0, 0);

}

开始游戏

再来一次

分数：0

简单

普通

困难

// 让小鸟飞起来

// 水平方向是移动的背景 竖直方向上改变的是top值

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

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

// 初始化背景图的值

var sky = {

x: 0

}

// 初始化小鸟的值

var bird = {

// 速度(步长)

speedX: 5,

speedY: 0,

// 坐标

x: birdEle.offsetLeft,

y: birdEle.offsetTop

}

// 游戏的状态

var running = false;

var speed = 0; // 初始速度为0毫秒

// running = true;

// 点击开始游戏按钮开始游戏

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

start.addEventListener('click', function () {

// 开始背景音乐

var bgMusic = document.querySelector('#bgMusic');

bgMusic.play();

start.style.display = 'none';

// 开始游戏后获取下拉表单的难度

// 0简单 pipe.x+= 1

// 1普通 pipe.x+= 4

// 2困难 pipe.x+= 6

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

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

select.style.display = 'none';

var index = sel.value;

console.log(index);

if (index == 0) {

speed = 2;

} else if (index == 1) {

speed = 4;

} else {

speed = 6;

}

running = true;

})

// 游戏结束时显示游戏结束

function end() {

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

end.onclick = function () {

// 重新刷新页面

location.reload();

}

end.style.display = 'block';

}

// 小鸟运动

setInterval(function () {

if (running) {

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

sky.x -= 2; //加上小鸟的速度

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

// 分数就是背景移动的距离

// 因为难度是根据管道刷新速度 所有根据难度要乘以倍数 1* 2* 3*

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

if (speed == 2) {

score.innerHTML = '分数：' + (-sky.x);

} else if (speed == 4) {

score.innerHTML = '分数：' + (-sky.x * 2);

} else {

score.innerHTML = '分数：' + (-sky.x * 3);

}

// 实现小鸟的上下运动

bird.speedY += 1; //类似加速度

bird.y += bird.speedY;

// 判断小鸟是否触碰上下边界

if (bird.y < 0) {

end();

running = false;

bird.y = 0;

}

if (bird.y + birdEle.offsetHeight > 600) {

end();

running = false;

bird.y = 600 - birdEle.offsetHeight;

}

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

}

}, 30)

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

document.onclick = function () {

// 每点击一次播放音效

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

sbMusic.play();

bird.speedY = -10;

}

// 创建管道

function createPope(position) {

var pipe = {};

pipe.x = position;

// 规定上管道的高度为200-300之间

pipe.uHeight = 200 + parseInt(Math.random() * 100);

pipe.dHeight = 600 - pipe.uHeight - 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 = 0;

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(function () {

// 判断游戏状态

if (running) {

// pipe.x -= 2;

// 动态修改速度修改的是每次递增的x

pipe.x -= speed;

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

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

// 当第一个管道到达左边界时 重新开始循环创建管道

// 但必须从距离800开始

if (pipe.x < -52) {

pipe.x = 800;

}

// 判断小鸟是否触碰管道

var uFeel = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 &&

bird.y < pipe.uHeight;

var dFeel = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 &&

bird.y > pipe.uHeight + 200 - 30;

if (uFeel || dFeel) {

end();

running = false;

}

}

}, 10)

}

// 每组管道间隔200

createPope(400);

createPope(600);

createPope(800);

createPope(1000);

一键复制

编辑

Web IDE

原始数据

按行查看

历史