你知道chrome小恐龙游戏吗？3分钟使用JavaScript实现
作者：大二计算机学生
主页：点击关注
关键字：游戏，JS，可莉，chrome
内容：使用JavaScript防chrome的小游戏，并在完成简能之外，扩展了可爱的可莉音频播放，以及游戏体验优化
1.0 简洁版效果演示
本文将带大家实现 1.0 版本的小游戏，2.0 就是花里胡哨，1版本是核心，也很简单，是模仿chrome浏览器的小游戏写的，如果你还不知道chrome浏览器的小游戏，那么你可以在chrome浏览器地址栏输入chrome://dino回车即可进入
2.0 高级版效果演示
2.0 就是增强了，添加了一些用户友好的界面处理和样式美化，最棒的是添加了音效，而且还是原神中 可莉 的配音，嘿嘿，看看视频听听就知道了
3分钟使用JavaScript写一个谷歌的小恐龙游戏
1.0 版本 HTML
这里使用 game 表示最外层容器，其中包裹着两张图片，就是我们的小熊猫和树了，最后分别引入JavaScript脚本和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>熊猫快跑1.0</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="game">
<img src="../role.gif" class="role">
<img src="../tree.png" class="tree">
</div>
<script src="./index.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
1.0 版本 CSS
首先清除默认边距
使用 flex布局 在body中使得game内容水平垂直居中
game整个游戏区域长度为600px，使用 overflow: hidden; ，进行溢出隐藏的操作
然后就是对熊猫和树的定位了，让他们出现在合适的位置，等待添加动画
最关键的是两个动画了，为了使得熊猫在空中停留时间久一点，使用了 30% {bottom: 75px;} 70% {bottom: 75px;}，小细节，最后就是把关键的熊猫跳的动画分离出一个类名，因为我们需要通过js控制类名的添加，就等于是控制了动画的添加，进而控制了熊猫的跳
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
#game {
width: 600px;
height: 200px;
border: 1px solid;
position: relative;
overflow: hidden;
}
.role {
width: 70px;
position: absolute;
bottom: 0;
}
.tree {
height: 25px;
width: 25px;
position: absolute;
right: 0;
bottom: 0;
animation: stop 1s infinite;
}
.animate {
animation: jump 500ms infinite;
}
@keyframes stop {
0% {right: 0;}
100% {right: 630px;}
}
@keyframes jump {
0% {bottom: 0;}
30% {bottom: 75px;}
70% {bottom: 75px;}
100% {bottom: 0;}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
1.0 版本 JavaScript ⌈核心知识⌋
JavaScript 所有代码全部写好注释
// 获取主角熊猫
let role = document.querySelector('.role');
// 获取配角大树
let tree = document.querySelector('.tree');
// 全局添加键盘按下事件，触发jump函数
document.body.addEventListener('keydown', jump);
// jump函数，见名知意，一看就是处理熊猫跳的，参数event
function jump(event) {
// 32 代表键盘空格键
if (event.keyCode == 32) {
// 添加类名animate，即添加跳的动画
if (role.classList != "animate") {
role.classList.add("animate");
}
// 添加类之后，下次就跳不起来了，因为已经添加了
// 所以正确的做法是，使用定时器，设置和动画一样的时间，并在回调中移除类名
setTimeout(function () {
role.classList.remove("animate");
}, 500);
}
}
// 每个十毫秒检查一次，是不是撞到了
var check = setInterval(function () {
// 动态获取熊猫距离下方距离
let blockButtom = parseInt(window.getComputedStyle(role)
.getPropertyValue("bottom"));
// 动态获取树离开右方的距离
let stopRight = parseInt(window.getComputedStyle(tree)
.getPropertyValue("right"));
// 因为总长600 熊猫70 自身20 所以树的坐标范围如果大于510小于600就是在熊猫脚下
// 此时还要判断熊猫的脚丫是不是踩到了树，即距离底部小于25，如果都成立就是碰撞了，over
if (stopRight > 510 && stopRight < 600 && blockButtom < 25) {
// 清空动画
tree.style.animation = "none";
role.style.animation = "none";
// 清除定时器
clearInterval(check);
}
}, 10)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
源代码下载
写在最后
希望大家能够喜欢，我会继续努力创作，如果觉得文章写的不错，还请点赞支持博主呀
文章来源: blog.csdn.net，作者：王 子，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/m0_53321320/article/details/125157839
- 点赞
- 收藏
- 关注作者
评论（0）