创作|你知道chrome小恐龙游戏吗（3分钟使用JavaScript实现） javascript|游戏|chrome

文章图片

作者：大二计算机学生
主页：点击关注
关键字：游戏，JS，可莉，chrome
内容：使用JavaScript防chrome的小游戏，并在完成简能之外，扩展了可爱的可莉音频播放，以及游戏体验优化

文章目录

1.0 简洁版效果演示
2.0 高级版效果演示
1.0 版本 HTML
1.0 版本 CSS
1.0 版本 JavaScript ?核心知识?
源代码下载
写在最后

1.0 简洁版效果演示

文章图片

本文将带大家实现 1.0 版本的小游戏，2.0 就是花里胡哨，1版本是核心，也很简单，是模仿chrome浏览器的小游戏写的，如果你还不知道chrome浏览器的小游戏，那么你可以在chrome浏览器地址栏输入chrome://dino回车即可进入
2.0 高级版效果演示 2.0 就是增强了，添加了一些用户友好的界面处理和样式美化，最棒的是添加了音效，而且还是原神中 可莉 的配音，嘿嘿，看看视频听听就知道了

3分钟使用JavaScript写一个谷歌的小恐龙游戏

文章图片

1.0 版本 HTML 这里使用 game 表示最外层容器，其中包裹着两张图片，就是我们的小熊猫和树了，最后分别引入JavaScript脚本和css样式了

熊猫快跑1.0 - 锐客网文章图片文章图片 src="https://www.it610.com/article/index.js">

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函数，见名知意，一看就是处理熊猫跳的，参数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.0 版本源代码蓝奏云
2.0 版本源代码蓝奏云
写在最后希望大家能够喜欢，我会继续努力创作，如果觉得文章写的不错，还请点赞支持博主呀
【创作|你知道chrome小恐龙游戏吗（3分钟使用JavaScript实现）】