目录
一、案例效果
二、实现思路
- 系统定制开发创建游戏背景板和小鸟,系统定制开发并分别设置相对定位与绝对定位;
- 系统定制开发初始化背景图的位置;
- 系统定制开发初始化小鸟的位置;
- 系统定制开发设置游戏状态,系统定制开发游戏开始时背景和管道全部向左运动,游戏结束全部停止运动;
- 使小鸟飞行,其实就是背景图在 X 轴方向的位置不断减小,实现小鸟向右飞行效果;
- 设置点击事件,每点击一次小鸟在Y轴的位置减小,实现向上飞的效果;
- 创建管道,X 方向上管道和下管道位置相同,Y 方向上上管道和下管道高度随机,但中间要空出200px;
- 实现管道向左运动,与背景图向左操作类似,也是在 X 轴方向的位置不断减小;
- 管道向左运动移出游戏面板最左侧时再回到原位重新执行,实现循环效果;
- 定义上下管道的临界值,也就是上下管道自身区域;
- 小鸟位置与上下管道位置重合(相碰撞)时游戏结束;
- 多次调用管道创建函数,产生多组管道。
三、完整代码+详细注释
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="UTF-8">
- <title>小游戏:像素鸟</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
-
- #game {
- width: 800px;
- height: 600px;
- background: url('./img/sky.png');
- position: relative;
- margin: auto;
- overflow: hidden;
- }
-
- #bird {
- width: 34px;
- height: 25px;
- background: url(./img/birds.png) -10px -8px no-repeat;
- position: absolute;
- top: 100px;
- left: 100px;
- }
- </style>
- </head>
-
- <body>
- <!-- 游戏背景 -->
- <div id="game">
- <!-- 小鸟 -->
- <div id="bird"></div>
- </div>
- </body>
-
- <script>
- //获取游戏背景和小鸟
- var game = document.getElementById('game');
- var birdEle = document.getElementById('bird');
-
- //初始化背景图
- var sky = {
- x: 0 //背景图初始位置为0
- }
-
- //初始化小鸟
- var bird = {
- speedX: 5, //小鸟在X轴的速度
- SpeedY: 0, //小鸟在Y轴的速度
- //小鸟坐标
- x: birdEle.offsetLeft, //小鸟初始位置在绝对定位的位置
- y: birdEle.offsetTop,
- }
-
- var runing = true; //游戏状态
-
- setInterval(function () {
- if (runing) {
- //小鸟飞行(其实是背景在动)
- sky.x -= 5; //背景每次-5px,以实现向左运动的效果
- game.style.backgroundPositionX = sky.x + 'px';
- //小鸟上下运动
- bird.SpeedY += 1; //每一次点击小鸟向上10px后开始自增也就是再自动向下
- bird.y += bird.SpeedY; //小鸟自动不断向下运动
- //判断游戏状态
- if (bird.y < 0) { //超出游戏背景顶部时游戏结束
- runing = false;
- bird.y = 0;
- }
- if (bird.y + birdEle.offsetHeight > 600) { //超出游戏背景底部时游戏结束
- runing = false;
- bird.y = 600 - birdEle.offsetHeight;
- }
- birdEle.style.top = bird.y + 'px';
- }
- }, 30);
-
- //点击时小鸟向上运动
- document.onclick = function () {
- bird.SpeedY = -10; //点击一次向上运动10px
- }
-
- //创建管道
- function creatPipe(position) {
- var pipe = {};
- pipe.x = position;
- pipe.upHeight = 200 + parseInt(Math.random() * 100); //上管道高度为200 - 300px
- pipe.doHeight = 600 - pipe.upHeight - 200; //下管道高度
- pipe.doTop = pipe.upHeight + 200; //上下两管道之间200px
-
- //创建上管道
- var upPipe = document.createElement('div'); //新建div
- upPipe.style.width = '52px';
- upPipe.style.height = pipe.upHeight + 'px';
- upPipe.style.background = 'url(./img/pipe2.png) no-repeat center bottom';
- upPipe.style.position = 'absolute';
- upPipe.style.top = '0px';
- upPipe.style.left = pipe.x + 'px';
- game.appendChild(upPipe); //将上管道追加到游戏页面中
-
- //创建下管道
- var doPipe = document.createElement('div'); //新建div
- doPipe.style.width = '52px';
- doPipe.style.height = pipe.doHeight + 'px';
- doPipe.style.background = 'url(./img/pipe1.png) no-repeat center top';
- doPipe.style.position = 'absolute';
- doPipe.style.top = pipe.doTop + 'px';
- doPipe.style.left = pipe.x + 'px';
- game.appendChild(doPipe); //将下管道追加到游戏页面中
-
- //管道进行运动
- setInterval(function () {
- if (runing) { //游戏处于运行状态时管道再运动
- pipe.x -= 2; //x方向不断-2px,以实现管道向左运动的效果
- upPipe.style.left = pipe.x + 'px';
- doPipe.style.left = pipe.x + 'px';
- if (pipe.x < -52) { //管道移出最左侧时回到原位,实现不间断效果
- pipe.x = 800;
- }
- //上下管道临界值
- var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.upHeight;
- var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.upHeight + 200;
- if (uCheck || dCheck) { //碰到上管道或下管道临界值则游戏终止
- runing = false;
- }
- }
- }, 30)
- }
- creatPipe(400); //产生四组管道
- creatPipe(600);
- creatPipe(800);
- creatPipe(1000);
- </script>
-
- </html>
四、案例素材
sky.png
birds.png
pipe1.png
pipe2.png