原生JS实现的跳一跳小游戏完整实例

本文实例讲述了原生JS实现的跳一跳小游戏。分享给大家供大家参考，具体如下：
小游戏–跳一跳，类似于微信的跳一跳，大体实现功能有：
1.先随机生成地图；
2.按住按钮释放后完成动作并进行判断；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>跳一跳</title><style>*{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);}}</style>
</head>
<body><div class="game"><div class="content"><!-- 圆柱体 --><div class="cylinder"><!-- 顶部 --><div class="top"></div><!-- 前面 --><div class="front"></div><!-- 底部 --><div class="bottom"></div></div></div><!-- 跳棋 --><div id="chess"><div style="width:20px;height:20px;border-radius:50%;background:red;position:absolute;margin-left:13px;z-index: 100;"></div><div style="width:40px;height:40px;background:blue;overflow: hidden;margin-top: 32px;transform:rotate(67deg) skewX(40deg);"></div></div><button id="play">按住它</button></div>
</body>
<script>var time = 0,score = 0,prev = 1;var cylinders = document.getElementsByClassName('cylinder');var chess = document.getElementById('chess');var arrLeft = [10,20,30,50];var arrTop = [210,290];// 初始函数，入口函数function init(){draw();BindEvent();};// 生成地图function draw(){var str = '';for(var n = 0; n < 7; n++){str +="<div class='cylinder'><div class='top'></div><div class='front'></div><div class='bottom'></div></div >"}document.getElementsByClassName('content')[0].innerHTML = str;for(var m = 0; m < 7; m++){var Left = arrLeft[Math.floor(Math.random() *arrLeft.length)];var Top = arrTop[Math.floor(Math.random() * arrTop.length)];cylinders[m].style.marginLeft = Left + 'px';cylinders[m].style.marginTop = Top + 'px';}// 画棋子chess.style.marginTop = cylinders[0].offsetTop - 25 + 'px';chess.style.marginLeft = cylinders[0].offsetLeft + 13 + 'px';}// 绑定事件函数function BindEvent(){document.getElementById('play').onmousedown = function () {var timer = setInterval(function () {time++;}, 100);document.getElementById('play').onmouseup = function () {clearInterval(timer);chess.classList.add('move');chess.style.animationDuration = time * 0.1 + 's';chess.style.transitionDuration = time * 0.1 + 's';if (cylinders[prev - 1].offsetTop > cylinders[prev].offsetTop) {var dx = setTran(prev - 1,prev);chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';chess.style.marginTop = chess.offsetTop + time * 15 * dx + 'px';} else if (cylinders[prev - 1].offsetTop < cylinders[prev].offsetTop) {var dy = setTran(prev - 1, prev);chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';chess.style.marginTop = chess.offsetTop + time * 15 * dy + 'px';}else if(cylinders[prev - 1].offsetTop == cylinders[prev].offsetTop){chess.style.marginTop = chess.offsetTop + 'px';chess.style.marginLeft = chess.offsetLeft + time * 15 + 'px';}chess.addEventListener(getTransition(), function () {chess.classList.remove('move');time = 0;judeg();chess.removeEventListener(getTransition(), arguments.callee, false);}, false);};};};// top和left移动的比例function setTran(prev,next) {var d_Top = cylinders[prev].offsetTop - cylinders[next].offsetTop;var d_Left = cylinders[prev].offsetLeft - cylinders[next].offsetLeft;return d_Top/d_Left;}// 判断动画是否结束function getTransition() {var t;var transitions = {'transition': 'transitionend','OTransition': 'oTransitionEnd','MozTransition': 'transitionend','WebkitTransition': 'webkitTransitionEnd'};for (t in transitions) {if (chess.style[t] !== undefined) {return transitions[t];}}};// 判断是否跳出边界function judeg() {for(; prev < cylinders.length;){// 判断条件var e_Left = chess.offsetLeft > cylinders[prev].offsetLeft -20 && chess.offsetLeft < cylinders[prev].offsetLeft + 90;var e_Top = chess.offsetTop + 48 > cylinders[prev].offsetTop && chess.offsetTop + 48 < cylinders[prev].offsetTop + 35;if( e_Left && e_Top ){score++;if(prev >= cylinders.length){prev = 1;}else{prev++;}break;}else{alert('you lost');break;}}}init();
</script>
</html>

原生JS实现的跳一跳小游戏完整实例相关推荐

php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
php跳一跳小游戏,php实现微信跳一跳小游戏
最近微信跳一跳小游戏很火,本文主要为大家详细介绍了微信跳一跳辅助php代码实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 本文实例为大家分享了php微信跳一跳的具体代码,供 ...
python微信跳一跳小游戏刷分
iOS #python 微信跳一跳小游戏刷分首先我们安装Facebook的WebDriverAgent,这是一款新的iOS移动测试框架在GitHub上找到https://github.com/fa ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
python入门小游戏之跳一跳_从零基础开始，用python手把手教你玩跳一跳小游戏，直接打出高分...
这对于很多人来说,可能是已经过时的游戏,但是对于python入门来说,却是一个非常值得学习的项目. TONOW收集了很多有关python入门的项目案例,包含了相应的教程和源码,哪怕你从未接触编程,也通 ...
python 玩公众号游戏_从零基础开始，用python手把手教你玩跳一跳小游戏，直接打出高分...
这对于很多人来说,可能是已经过时的游戏,但是对于python入门来说,却是一个非常值得学习的项目. 我们收集了很多有关python入门的项目案例,包含了相应的教程和源码,哪怕你从未接触编程,也通过这些 ...
用cocos creator实现像素风格的微信跳一跳小游戏。
用cocos creator实现像素风格的微信跳一跳小游戏. 微信扫描下方小程序码免费获取另外需要其他游戏源码的加博主微信,博主给你找,加了微信拉你进专业游戏开发交流群
H5版仿制微信跳一跳小游戏，网页版仿微信跳一跳小游戏源码，实现了跳一跳的基本核心功能
H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码,实现了跳一跳的基本核心功能完整代码下载地址:H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码运行截图 Project setup ...
python开发微信小游戏大全_【python】用python玩微信跳一跳小游戏
Python微信跳一跳实验报告 Step 1 准备工具:一台安卓手机,Windows10,python3,adb驱动,依赖的各种python库 Step 2 PiP安装:下面列出需要安装的库: bac ...

原生JS实现的跳一跳小游戏完整实例

原生JS实现的跳一跳小游戏完整实例相关推荐

最新文章

热门文章