你知道chrome小恐龙游戏吗？3分钟使用JavaScript实现 |
您所在的位置：网站首页 › 谷歌恐龙小彩蛋怎么下载 › 你知道chrome小恐龙游戏吗？3分钟使用JavaScript实现 |
你知道chrome小恐龙游戏吗？3分钟使用JavaScript实现
|
作者：大二计算机学生 主页：点击关注 关键字：游戏，JS，可莉，chrome 内容：使用JavaScript防chrome的小游戏，并在完成简能之外，扩展了可爱的可莉音频播放，以及游戏体验优化 文章目录 1.0 简洁版效果演示2.0 高级版效果演示1.0 版本 HTML1.0 版本 CSS1.0 版本 JavaScript ⌈核心知识⌋源代码下载写在最后 1.0 简洁版效果演示
2.0 就是增强了，添加了一些用户友好的界面处理和样式美化，最棒的是添加了音效，而且还是原神中 可莉 的配音，嘿嘿，看看视频听听就知道了 3分钟使用JavaScript写一个谷歌的小恐龙游戏
这里使用 game 表示最外层容器，其中包裹着两张图片，就是我们的小熊猫和树了，最后分别引入JavaScript脚本和css样式了 DOCTYPE html> 熊猫快跑1.0 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 |
本文将带大家实现 1.0 版本的小游戏，2.0 就是花里胡哨，1版本是核心，也很简单，是模仿chrome浏览器的小游戏写的，如果你还不知道chrome浏览器的小游戏，那么你可以在chrome浏览器地址栏输入chrome://dino回车即可进入
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |