本篇文章给大家谈谈js小游戏代码大全复制网站，以及js 编写的简单游戏代码，希望对各位有所帮助，不要忘了收藏本站喔。
系列文章目录
JS：经典小游戏：像素鸟
JS：经典小游戏：贪吃蛇
JS：经典小游戏：扫雷
目录
系列文章目录
像素鸟
1.游戏介绍
2.代码分析
3.代码实现
3.1 随机生成水管
3.2 当水管超过游戏显示区域时，删除这一对水管
3.3 让小鸟不断下降
3.4 通过鼠标点击事件来让小鸟上升
3.5 检测小鸟是否撞上了水管
总结
附录：素材文件
附录：完整代码
像素鸟
1.游戏介绍
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。
操作方式：鼠标点击
胜利条件：无
失败条件：小鸟碰到了屏幕上下的水管就算失败
2.代码分析
需求：
在屏幕上下两侧随机生成高度不一的水管水管会不断的从右向左移动 来营造出小鸟向右飞行的感觉小鸟会不断下降，玩家点击鼠标来让小鸟上升当小鸟碰到任一水管时，游戏结束
实现效果图：
3.代码实现
我们分析之后就会发现，整个游戏其实很简单，我们只需要通过CSS3的过渡和动画属性就能够实现小鸟和水管的运动，而判断和小鸟不断下降都可以通过定时器来完成GPT改写。
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-gameshttps://gitee.com/wen-muchun/js-games
附录：完整代码
由于缺少背景图片，所以直接复制肯定会报错的，要么下载一下素材图片，要么替换背景图片为背景颜色，就可以运行了。
000
<>
// 游戏操作:使用鼠标左键点击屏幕，来让小鸟飞得更高
// 当页面加载完毕后 执行下面操作
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();
}
}
};
参考文章
您阅读本篇文章共花了：
发表评论