作者：大二计算机学生
主页：点击关注
关键字：游戏，
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样式
了
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>熊猫快跑1.0</title><linkrel="stylesheet"href="./index.css"></head><body><divid="game"><imgsrc="../role.gif"class="role"><imgsrc="../tree.png"class="tree"></div><scriptsrc="./index.js"></script></body></html>
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.0 版本 JavaScript ⌈核心知识⌋
JavaScript 所有代码全部写好注释
// 获取主角熊猫let role = document.querySelector('.role');// 获取配角大树let tree = document.querySelector('.tree');// 全局添加键盘按下事件，触发jump函数
document.body.addEventListener('keydown', jump);// jump函数，见名知意，一看就是处理熊猫跳的，参数eventfunctionjump(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.0 版本源代码蓝奏云
2.0 版本源代码蓝奏云
写在最后
希望大家能够喜欢，我会继续努力创作，如果觉得文章写的不错，还请点赞支持博主呀
本文转载自: https://blog.csdn.net/m0_53321320/article/details/125157839
版权归原作者 王 子 所有， 如有侵权，请联系我们删除。
版权归原作者 王 子 所有， 如有侵权，请联系我们删除。