系列文章目录
JS：经典小游戏：像素鸟
JS：经典小游戏：贪吃蛇
JS：经典小游戏：扫雷
JS小游戏: JS经典小游戏全系列 包括 贪吃蛇、像素鸟、扫雷 (gitee.com)
目录
像素鸟
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
附录：完整代码
由于缺少背景图片，所以直接复制的话是没办法看到柱子和背景图的。
需要去我上面的仓库里面下载一下素材图片，或者在css里面把背景图片替换为背景颜色，就可以运行了。
<!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>想要快速体验效果的可以复制上面的代码在一个 txt 文件中，然后修改css样式，并将txt后缀改为html即可运行。
background: url(./assets/bgi.jpg) no-repeat center;
// 修改为下面这种就可以了
background: #409eff no-repeat center;小鸟、城市背景、水管 这3处都要修改哦，而且注意不要 3者都是一个颜色，否则什么都看不到了。
7842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
