456主机测评
系列文章目录
JS：经典小游戏：像素鸟
JS：经典小游戏：贪吃蛇
JS：经典小游戏：扫雷
目录
像素鸟
1.游戏介绍
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。
操作方式：鼠标点击
胜利条件：无
失败条件：小鸟碰到了屏幕上下的水管就算失败
2.代码分析
需求：
- 在屏幕上下两侧随机生成高度不一的水管
- 水管会不断的从右向左移动 来营造出小鸟向右飞行的感觉
- 小鸟会不断下降，玩家点击鼠标来让小鸟上升
- 当小鸟碰到任一水管时，游戏结束
实现效果图：
3.代码实现
我们分析之后就会发现，整个游戏其实很简单，我们只需要通过CSS3的过渡和动画属性就能够实现小鸟和水管的运动，而判断和小鸟不断下降都可以通过定时器来完成。
3.1 随机生成水管
需求：
1. 每过1秒出现一对 上下 高度随机的管子
2. 管子自右向左移动 （通过动画实现）
const time_wait = 1000; // 1s生成一对水管 let pipe = []; // 记录所有水管的dom对象 let i = 0; // 分辨水管的下标是偶数还是奇数 // 生成水管的函数 水管的高度是随机的 function render_pipe() { pipe[i] = document.createElement("div"); // 高度120 - 205 最高205 两根水管都205px的话 还能留出来90px让小鸟上升 let random_height = Math.floor(Math.random() * 86 + 120); pipe[i].classList.add("pipe"); pipe[i].style.height = random_height + "px"; // 偶数的水管在上面 奇数的在下面 if (i % 2 == 0) { pipe[i].style.top = 0; } else { pipe[i].style.bottom = 0; // 颠倒底部的水管 pipe[i].style.transform = 'rotate(180deg)' } // i 的值会在执行完这行代码后 ＋1 container.appendChild(pipe[i++]); } // 每过1s渲染2根水管 一上一下 let add_pipe = setInterval(function () { render_pipe(); render_pipe(); }, time_wait);通过CSS3动画来让水管向左移动
.pipe { position: absolute; right: 0; width: 60px; background: url(./assets/pipetop.png) no-repeat; background-size: 100% 100%; /* 水管的移动是通过动画来完成的,动画执行完毕后停留到终点位置 */ animation: move 5s linear forwards; } @keyframes move { /* 0%{ right: 0; } */ to { right: 100%; } }3.2 当水管超过游戏显示区域时，删除这一对水管
// 当水管到屏幕外面时，删除节点 并增加分数 let scope_point = 0; let delete_pipe = setTimeout(() => { setInterval(() => { // 删除第一个节点和它的兄弟 let pipe_first = document.querySelector(".pipe"); container.removeChild(pipe_first.nextSibling); container.removeChild(pipe_first); // 分数+1 有补零 let scope_point_string = "000"; if (scope_point <= 100) { scope_point_string = "00" + ++scope_point; } scope.innerText = scope_point_string; }, time_wait); }, 5000);3.3 让小鸟不断下降
通过定时器操作小鸟的dom对象，可以很简单就能让小鸟实现不断下降的功能
// 原版的像素鸟小鸟下降速度会越来越快 小鸟在多次点击后上升的速度也会越来越快 let speed = 10 // 所以提供一个共用变量给下降和上升，它用来控制小鸟上下跳动的距离 // 小鸟移动的函数 function bird_fly() { speed += 2 // 当speed是正数的时候 小鸟就会下降 当speed是负数时 小鸟就会上升 bird.setAttribute("style", `top:${bird.offsetTop + speed}px`); } // 小鸟不停的飞行...... let time_down = setInterval(bird_fly, 100); 现在小鸟的移动还有点僵硬，我们可以通过过渡属性来让小鸟的移动更加顺滑，代码非常简单，只需要给小鸟增加如下样式即可：
transition: all 0.1s;3.4 通过鼠标点击事件来让小鸟上升
鼠标点击游戏任一区域，即可实现小鸟的上升，但是上升是通过speed变量间接控制小鸟的飞行的
// 点击一下 小鸟上升 container.addEventListener("click", function () { // 通过控制speed来间接的让小鸟上升 这样不仅代码更少 而且游戏手感更接近原版 speed -= 7; });3.5 检测小鸟是否撞上了水管
在完成水管的渲染、移动 和小鸟的下降和上升之后，现在要做的就是判断小鸟是否撞上了水管。
思路是：
1.计算出水管在游戏开始多长时间后会到达小鸟的面前
2.在水管即将到达小鸟面前的时候 获得要被检测的水管，pipe1与pipe2
3.每过50ms检查一下 小鸟是否撞上了pipe1 或者pipe2
4.水管是每过1s渲染出来一对，所以我们也每过1s切换一下被检测水管的下标
这种实现方式可以不用遍历所有的水管，只需要每隔一段时间切换下标，这个时间间隔和生成水管的节奏保持一致即可。
// 逻辑： // 1.游戏开始1s后生成第一对水管 // 2.计算得出第一对水管3.25s后到达小鸟的右侧 // 3.游戏开始4.25s后开始检测小鸟和水管的位置 // 4.游戏开始4.25s后每过1s，更换需要检测的水管 // 1.游戏开始1s后开始确定水管移动的速度 setTimeout(() => { let pipe_speed = container.offsetWidth / 5; // 水管动画持续时间5s // 移动距离为1000px 即速度为 200px/s // 拿路程/速度 即可获得水管移动到小鸟面前的时间 let test_time = (container.offsetWidth - bird.offsetLeft - bird.offsetWidth - pipe[0].offsetWidth) / pipe_speed; //console.log(test_time); //3.25s //2.也就是说 水管出现并移动3.25s后 第一对水管到达小鸟的右侧 // 3.再过3.25s后，开始检测距离 setTimeout(() => { get_testPipe() distance = setInterval(() => { test_distance() }, 50) }, test_time * 1000) }, time_wait); // 4.在水管生成后获取小鸟和水管的一些固定属性 setTimeout(() => { // 获取水管的宽度 pipe_width = pipe[0].offsetWidth // 获取小鸟的宽高 bird_width = bird.offsetWidth bird_height = bird.offsetHeight }, time_wait) // 5.检测小鸟是否撞到了被检测的水管 function test_distance() { // 获取被检测的水管与上边界的高度 let height_up = pipe[test_pipe1].offsetHeight let height_down = pipe[test_pipe2].offsetTop; // 获取水管现在的水平位置 let pipe_level = pipe[test_pipe1].offsetLeft // 获取小鸟现在的水平位置和垂直位置 let bird_level = bird.offsetLeft let b_top = bird.offsetTop; // 顶部与上水管相比较 或 底部与下水管相比较 且水平距离上水管与小鸟也在同一位置 if ((b_top < height_up || (b_top + bird_height > height_down)) && (bird_level + bird_width >= pipe_level) && bird_level <= pipe_level + pipe_width) { clearInterval(distance); clearInterval(time_down); clearInterval(add_pipe); clearInterval(delete_pipe); alert(`碰！ ${scope_point}分`); // 游戏结束，刷新页面 location.reload(); } } };总结
几个注意点：
- 看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。
- 对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。
- 对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
- 对于小鸟的移动，我们通过一个公有变量来控制小鸟下降与上升的距离，这样既可以实现上升与下降越来越快的功能，也最符合原版像素鸟的手感，同时代码量也是最少的。
- 关于判断小鸟和水管的位置，我们需要有一个清晰的思路：水管到达小鸟面前时开始检测位置；水管经过小鸟之后更换被检测的水管；检测距离时既要检测上下，也要检测左右距离。
OK，以上就是经典小游戏 像素鸟的JavaScript实现思路了，希望能帮助到大家，有不懂的欢迎在评论区留言。
最后，附上JS代码量，我可不是标题党。
附录：素材文件
关于素材：因为这里无法直接上传文件，所以素材图片还请移步我的gitee仓库中获取。
素材与代码仓库：
JS小游戏素材仓库
https://gitee.com/wen-muchun/js-games
附录：完整代码
由于缺少背景图片，所以直接复制肯定会报错的，要么下载一下素材图片，要么替换背景图片为背景颜色，就可以运行了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .container { position: relative; width: 1000px; height: 500px; margin: 100px auto; background: url(./assets/bgi.jpg) no-repeat center; background-size: cover; overflow: hidden; } .container *, .hd * { /* 用这行代码禁止用户选中文字 */ user-select: none; } .hd { position: absolute; width: 100%; padding-top: 20px; text-align: right; color: #333; font-size: 16px; z-index: 1; } .bird { width: 40px; height: 40px; background: url(./assets/PixelBird.png) center no-repeat; background-size: 100%; position: absolute; left: 200px; top: 40%; font-size: 14px; transition: all 0.1s; } .pipe { position: absolute; right: 0; width: 60px; background: url(./assets/pipetop.png) no-repeat; background-size: 100% 100%; /* 水管的移动是通过动画来完成的,动画执行完毕后停留到终点位置 */ animation: move 5s linear forwards; } @keyframes move { /* 0%{ right: 0; } */ to { right: 100%; } } .scope { padding-right: 20px; font-size: 18px; } </style> </head> <body> <div class="container"> <div class="hd"> <span class="scope">000</span> </div> <div class="bird"></div> </div> <script> // 游戏操作:使用鼠标左键点击屏幕，来让小鸟飞得更高 // 当页面加载完毕后 执行下面操作 window.onload = function () { // 获取dom元素 const container = document.querySelector(".container"); const bird = document.querySelector(".bird"); const scope = document.querySelector(".scope"); // 原版的像素鸟小鸟下降速度会越来越快 小鸟在多次点击后上升的速度也会越来越快 let speed = 10 // 所以提供一个共用变量给下降和上升，它用来控制小鸟上下跳动的距离 // 小鸟移动的函数 function bird_fly() { speed += 2 // 当speed是正数的时候 小鸟就会下降 当speed是负数时 小鸟就会上升 bird.setAttribute("style", `top:${bird.offsetTop + speed}px`); } // 小鸟不停的飞行...... let time_down = setInterval(bird_fly, 100); // 点击一下 小鸟上升 container.addEventListener("click", function () { // 通过控制speed来间接的让小鸟上升 这样不仅代码更少 而且游戏手感更接近原版 （原版的小鸟就非常难以操控） speed -= 7; }); // 随机出现的水管 // 1. 每过1秒出现一对 上下 高度随机的水管 // 2. 水管自右向左移动 通过动画实现 // 3. 判断水管和小鸟的距离 每100ms判断一次 根据双方高度的值来判断 const time_wait = 1000; // 1s生成一对水管 let pipe = []; // 记录所有水管的dom对象 let i = 0; // 分辨水管的下标是偶数还是奇数 // 生成水管的函数 水管的高度是随机的 function render_pipe() { pipe[i] = document.createElement("div"); // 高度120 - 205 最高205 两根水管都205px的话 还能留出来90px让小鸟上升 let random_height = Math.floor(Math.random() * 86 + 120); pipe[i].classList.add("pipe"); pipe[i].style.height = random_height + "px"; // 偶数的水管在上面 奇数的在下面 if (i % 2 == 0) { pipe[i].style.top = 0; } else { pipe[i].style.bottom = 0; // 颠倒底部的水管 pipe[i].style.transform = 'rotate(180deg)' } // i 的值会在执行完这行代码后 ＋1 container.appendChild(pipe[i++]); } // 每过1s渲染2根水管 一上一下 let add_pipe = setInterval(function () { render_pipe(); render_pipe(); }, time_wait); // 当水管到屏幕外面时，删除节点 并增加分数 let scope_point = 0; let delete_pipe = setTimeout(() => { setInterval(() => { // 删除第一个节点和它的兄弟 let pipe_first = document.querySelector(".pipe"); container.removeChild(pipe_first.nextSibling); container.removeChild(pipe_first); // 分数+1 有补零 let scope_point_string = "000"; if (scope_point <= 100) { scope_point_string = "00" + ++scope_point; } scope.innerText = scope_point_string; }, time_wait); }, 5000); // 获得是哪一对水管需要被判断 它们与小鸟的距离 let test_pipe1, test_pipe2; // 记录当前被检测位置的水管的下标 function get_testPipe() { // 开始是0和1 test_pipe1 = 0; test_pipe2 = 1; // 然后每过1s更换一对要检测的水管 setInterval(() => { test_pipe1 += 2; test_pipe2 += 2; }, time_wait); } // 逻辑： // 1.游戏开始1s后生成第一对水管 // 2.计算得出第一对水管3.25s后到达小鸟的右侧 // 3.游戏开始4.25s后开始检测小鸟和水管的位置 // 4.游戏开始4.25s后每过1s，更换需要检测的水管 // 1.游戏开始1s后开始确定水管移动的速度 setTimeout(() => { let pipe_speed = container.offsetWidth / 5; // 水管动画持续时间5s 移动距离为1000px 即速度为 200px/s let test_time = (container.offsetWidth - bird.offsetLeft - bird.offsetWidth - pipe[0].offsetWidth) / pipe_speed; //console.log(test_time); //3.25s 2.也就是说 水管出现并移动3.25s后 第一对水管到达小鸟的右侧 // 3.再过3.25s后，开始检测距离 setTimeout(() => { get_testPipe() distance = setInterval(() => { test_distance() }, 50) }, test_time * 1000) }, time_wait); // 4.在水管生成后获取小鸟和水管的一些固定属性 setTimeout(() => { // 获取水管的宽度 pipe_width = pipe[0].offsetWidth // 获取小鸟的宽高 bird_width = bird.offsetWidth bird_height = bird.offsetHeight }, time_wait) // 5.检测小鸟是否撞到了被检测的水管 function test_distance() { // 获取被检测的水管与上边界的高度 let height_up = pipe[test_pipe1].offsetHeight let height_down = pipe[test_pipe2].offsetTop; // 获取水管现在的水平位置 let pipe_level = pipe[test_pipe1].offsetLeft // 获取小鸟现在的水平位置和垂直位置 let bird_level = bird.offsetLeft let b_top = bird.offsetTop; // 顶部与上水管相比较 或 底部与下水管相比较 且水平距离上水管与小鸟也在同一位置 if ((b_top < height_up || (b_top + bird_height > height_down)) && (bird_level + bird_width >= pipe_level) && bird_level <= pipe_level + pipe_width) { clearInterval(distance); clearInterval(time_down); clearInterval(add_pipe); clearInterval(delete_pipe); alert(`碰！ ${scope_point}分`); // 游戏结束，刷新页面 location.reload(); } } }; </script> </body> </html>- 海报
