这篇文章主要介绍了原生JS实现的跳一跳小游戏,结合完整实例形式分析了javascript实现跳一跳游戏的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
本文实例讲述了原生JS实现的跳一跳小游戏。分享给大家供大家参考，具体如下：
以下说的是闲暇编写的一个小游戏--跳一跳，类似于微信的跳一跳，大体实现功能有：
1.先随机生成地图；
2.按住按钮释放后完成动作并进行判断；
首先po一下代码；
代码如下：
跳一跳 *{padding: 0;margin: 0;} .game{ position: relative; width: 800px; height: 400px; border: 1px solid black; margin: 0 auto; } .game .content{ position: absolute; width: 700px; height: 400px; left: 0; top: 0; } .game #chess{ position: absolute; width: 40px; height: 48px; overflow: hidden; z-index:99; transition-property: all; } .cylinder{ position: relative; width: 70px; height: 101px; float: left; } .cylinder .top{ position: absolute; width: 70px; height: 35px; border-radius: 50%; background: yellow; z-index: 4; } .cylinder .front{ position: absolute; width: 70px; height: 70px; background: black; margin-top: 17px; z-index: 3; } .cylinder .bottom{ position: absolute; width: 70px; height: 35px; border-radius: 50%; background: black; margin-top: 65px; z-index: 4; } button{ position: absolute; width: 80px; height: 30px; font-size: 16px; text-align: center; line-height: 30px; border-radius: 20%; bottom: 10px; right: 10px; } .move{ animation-name: jump; } /* 跳棋运动动画 */ @keyframes jump{ 0%{transform: rotate(0deg);} 10%{transform: rotate(36deg);} 20%{transform: rotate(72deg);} 30%{transform: rotate(108deg);} 40%{transform: rotate(144deg);} 50%{transform: rotate(180deg);} 60%{transform: rotate(216deg);} 70%{transform: rotate(252deg);} 80%{transform: rotate(288deg);} 90%{transform: rotate(324deg);} 100%{transform: rotate(360deg);} } @-webkit-keyframes jump{ 0%{transform: rotate(0deg);} 10%{transform: rotate(36deg);} 20%{transform: rotate(72deg);} 30%{transform: rotate(108deg);} 40%{transform: rotate(144deg);} 50%{transform: rotate(180deg);} 60%{transform: rotate(216deg);} 70%{transform: rotate(252deg);} 80%{transform: rotate(288deg);} 90%{transform: rotate(324deg);} 100%{transform: rotate(360deg);} } @-o-keyframes jump{ 0%{transform: rotate(0deg);} 10%{transform: rotate(36deg);} 20%{transform: rotate(72deg);} 30%{transform: rotate(108deg);} 40%{transform: rotate(144deg);} 50%{transform: rotate(180deg);} 60%{transform: rotate(216deg);} 70%{transform: rotate(252deg);} 80%{transform: rotate(288deg);} 90%{transform: rotate(324deg);} 100%{transform: rotate(360deg);} } @-moz-keyframes jump{ 0%{transform: rotate(0deg);} 10%{transform: rotate(36deg);} 20%{transform: rotate(72deg);} 30%{transform: rotate(108deg);} 40%{transform: rotate(144deg);} 50%{transform: rotate(180deg);} 60%{transform: rotate(216deg);} 70%{transform: rotate(252deg);} 80%{transform: rotate(288deg);} 90%{transform: rotate(324deg);} 100%{transform: rotate(360deg);} }
代码主要分为用来绘制圆柱体分布的draw()函数，用来绑定按钮事件的BindEvent()函数，用来监听CSS3动画是否结束的getTransition()函数，用来判断棋子是否出界的函数judeg()函数。而控制棋子运动的距离，主要是通过当你按下按钮时(onmousedown)触发一个定时器函数中的(time的加加)，弹起按钮时(onmouseup)棋子的left和top运动距离=设定像素值*time。
为了让棋子运动不那么生硬我添加了一些css3动画（rotate属性）以及transition属性。
实现效果如下：
虽然还有些许不足，但不影响整体功能。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.html.cn/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
以上就是原生JS实现的跳一跳小游戏完整实例的详细内容，更多请关注本站其它相关文章！
