js实现跳一跳小游戏,js开发的游戏实现机制

本文实例为大家分享了js实现跳一跳小游戏的具体代码,供大家参考,具体内容如下

效果

js实现跳一跳小游戏,js开发的游戏实现机制 第1张

js开发游戏流程分析

1、鼠标按下开始蓄力
2、鼠标松开,根据鼠标按下的时间让小球运动相应的距离
3、判断小球落点是否在平台内
4、如果在平台范围内,产生下一个平台,分数加10.如果不在游戏结束,判断分数是否大于历史最高分,更新历史最高分。

js开发游戏动画效果

5、鼠标按下小球所在平台要有蓄力效果,鼠标松开后慢慢恢复,
6、小球在空中的运动曲线要平滑
7、小球和平台要有3D效果

js开发游戏注意事项

8、运动涉及到计算器和延时器,要注意清除定时器以免扰乱动画效果
9、鼠标按下和松开为一个完整的流程,在小球运动完之前不能重复触发
10、确保小球运动的时间与鼠标按下的时间相关联

布局

  1. <div class="wrap">  

  2.   <h3 class="tit">鼠标按下蓄力,松开鼠标小球开始运动</h3>  

  3.   <h1>分数:</h1>  

  4.   <h2>历史最高:</h2>  

  5.   <div class="con"></div>  

  6.   <div class="blc1"></div>  

  7. </div>  

样式

  1. * {  

  2.    margin0;  

  3.    padding0;  

  4.   }  

  5.   

  6.   .wrap {  

  7.    height500px;  

  8.    positionrelative;  

  9.    overflowhidden;  

  10.   }  

  11.   

  12.   .con {  

  13.    background-color: hotpink;  

  14.    /*左边的没有背景色,右边的加了背景色*/  

  15.    background-image: radial-gradient(10px at 4px 4px,  

  16.      rgba(0000),  

  17.      rgba(2221));  

  18.    width20px;  

  19.    height20px;  

  20.    border-radius: 50%;  

  21.    positionabsolute;  

  22.    left: 30px;  

  23.    bottom: 30px;  

  24.    z-index2;  

  25.   }  

  26.   

  27.   .blc1 {  

  28.    box-shadow: 10px 10px 7px #000;  

  29.    border-radius: 30%;  

  30.    width40px;  

  31.    height40px;  

  32.    background-color: midnightblue;  

  33.    positionabsolute;  

  34.    left: 20px;  

  35.    bottom: 20px;  

  36.   }  

  37.   

  38.   .tit {  

  39.    text-aligncenter;  

  40.   }  

js

  1. function randomInt(min, max) { //产生[min,max]范围内的整数  

  2.    return Math.round(Math.random() * (max - min)) + min;  

  3.   }  

  4.   

  5.   function randomColor() { //产生随机的颜色  

  6.    var map = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a''b''c''d''e''f'];  

  7.    var str = '#';  

  8.    for (var i = 0; i < 6; i++) {  

  9.     var index = randomInt(0, 15);  

  10.     str += map[index];  

  11.    }  

  12.    return str;  

  13.   }  

  14.   var wrap = document.querySelector('.wrap');  

  15.   var con = document.querySelector('.con');  

  16.   var oldtime = 0; //记录鼠标按下的时间  

  17.   var timer2 = null; //小球平抛运动定时器  

  18.   var timer3 = null; //鼠标按下变形定时器  

  19.   var num = 0; //游戏成绩  

  20.   var mouseD = false; //记录鼠标是否按下  

  21.   var mouseUp = true; //记录鼠标是否松开  

  22.   var h1 = document.querySelector('h1');  

  23.   var h2 = document.querySelector('h2');  

  24.   var max = localStorage.getItem('max');  

  25.   var div = document.createElement('div'); //创建下一个平台  

  26.   h2.innerText = '历史最高:' + localStorage.getItem('max'); //从浏览器数据库获取最高分  

  27.   div.style.left = 35 + randomInt(30, 60) + 'px'//初始化平台距离左边的值  

  28.   var div_sex = randomInt(30, 70); //初始化平台大小,范围  

  29.   div.style.bottom = 40 - div_sex / 2 + 'px'//平台距离底部为小球底部减去平台  

  30.   div.style.height = div_sex + 'px';  

  31.   div.style.width = div_sex + 'px';  

  32.   div.className = 'blc1'//添加初始化样式  

  33.   div.style.backgroundColor = randomColor(); //随机颜色  

  34.   wrap.appendChild(div); //存入平台  

  35.   document.onmousedown = function () { //监听页面点击事件  

  36.    if (!mouseD) { //如果鼠标按下没有抬起  

  37.     var blc = document.querySelectorAll('.blc1'); //获取所有平台  

  38.     oldtime = Date.now(); //记录鼠标按下的时间  

  39.     var target = blc[blc.length - 2]; //小球所在的平台  

  40.     var down_c = 10; //平台最大下沉距离  

  41.     var left = target.offsetLeft; //记录鼠标按下后下沉效果之前平台的left值  

  42.     var bottom = 40 - target.offsetHeight / 2; //记录鼠标按下后下沉效果之前平台的bottom值  

  43.     var con_l = con.offsetLeft; //记录鼠标按下后下沉效果之前小球的left值  

  44.     var con_b = 30; //记录鼠标按下后下沉效果之前小球的bottom值  

  45.     timer3 = setInterval(() => { //下沉效果定时器  

  46.      down_c -= 0.03; //每一次变化0.03px  

  47.      if (down_c <= 0) { //最小值为0  

  48.       down_c = 0.03;  

  49.      }  

  50.      target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c +  

  51.      'px #000'//边框阴影向里缩,实现3D效果  

  52.      target.style.left = left + 10 - down_c + 'px';  

  53.      target.style.bottom = bottom + -10 + down_c + 'px';  

  54.      con.style.left = con_l + 10 - down_c + 'px';  

  55.      con.style.bottom = con_b - 10 + down_c + 'px'//小球和平台一起向右下角移动,配合阴影达到3D效果  

  56.     }, 1);  

  57.     mouseD = true; //鼠标已经按下  

  58.     mouseUp = false; //鼠标即将松开  

  59.    }  

  60.   }  

  61.   document.onmouseup = function () {  

  62.    if (!mouseUp) { //如果没有触发mousedown事件不会执行以下代码  

  63.     mouseUp = true; //锁定事件,小球运动结束前不能执行以下代码  

  64.     clearInterval(timer3); //清除下沉动画  

  65.     var timer4 = null; //上升动画  

  66.     var blc = document.querySelectorAll('.blc1'); //获取所有平台  

  67.     var target = blc[blc.length - 2]; //同下沉动画  

  68.     var left = target.offsetLeft;  

  69.     var down_time = 0;  

  70.     var down_c = 0;  

  71.     var click_time = Date.now() - oldtime; //鼠标按下的时间  

  72.     var bottom = 40 - target.offsetHeight / 2 - (click_time * 0.03 > 10 ? 10 : click_time *  

  73.     0.03); //原来的bottom-下沉的距离,最大为10  

  74.     timer4 = setInterval(() => { //恢复原来的状态  

  75.      down_time++;  

  76.      if (down_time > click_time) {  

  77.       clearInterval(timer4);  

  78.      }  

  79.      down_c += 0.03;  

  80.      if (down_c >= 10) {  

  81.       down_c = 10;  

  82.      }  

  83.      target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000';  

  84.      target.style.left = left - down_c + 'px';  

  85.      target.style.bottom = bottom + down_c + 'px';  

  86.     }, 1);  

  87.     var clicktime = (Date.now() - oldtime) * 1.5; //小球运动时间为鼠标按下的1.5倍,减少蓄力时间  

  88.     var time2 = 0; //小球跳一跳计时器  

  89.     var y = 30; //小球初始bottom值  

  90.     var x = con.offsetLeft; //小球初始left值  

  91.     clearTimeout(tout); //清除延时器  

  92.     timer2 = setInterval(() => { //小球弹跳计时器  

  93.      time2 += 20;  

  94.      y = 30 + clicktime / 50 * Math.sin(time2 * Math.PI /  

  95.      clicktime); //将总的时间分成180份通过sin(0,180)从0到0的特性完成一个圆滑的抛物线  

  96.      con.style.left = x + time2 / 20 + 'px';  

  97.      con.style.bottom = y + 'px';  

  98.     }, 20);  

  99.     var tout = setTimeout(function () { //控制小球运动的时间与鼠标按下的时间*1.5相等,控制小球运动的时间  

  100.      clearInterval(timer2); //结束小球运动  

  101.      x = con.offsetLeft; //获取运动结束后小球的left值  

  102.      var blc = document.querySelectorAll('.blc1'); //获取所有的平台  

  103.      if (con.offsetLeft >= wrap.lastElementChild.offsetLeft && con.offsetLeft <= wrap  

  104.       .lastElementChild.offsetLeft + wrap.lastElementChild.offsetHeight - 10  

  105.       ) { //判断小球是否位于平台里面  

  106.       num += 10; //每跳一次加10分  

  107.       h1.innerText = '分数:' + num; //动态展示分数  

  108.       //生成下一个平台  

  109.       var div_sex2 = randomInt(40, 60);  

  110.       var newdiv = document.createElement('div');  

  111.       newdiv.style.bottom = 40 - div_sex2 / 2 + 'px';  

  112.       newdiv.style.height = div_sex2 + 'px';  

  113.       newdiv.style.width = div_sex2 + 'px';  

  114.       newdiv.style.left = x + randomInt(80, 120) + 'px';  

  115.       newdiv.style.backgroundColor = randomColor();  

  116.       newdiv.className = 'blc1';  

  117.       wrap.appendChild(newdiv);  

  118.      } else {  

  119.       alert('游戏结束,分数:' + num);  

  120.       max = max > num ? max : num;  

  121.       localStorage.setItem('max', max) //更新最高分  

  122.       location.reload(); //刷新当前页面  

  123.      }  

  124.      wrap.scrollLeft = wrap.scrollWidth; //控制滚动条位于最右边  

  125.      mouseD = false; //完成一次事件,重新开启  

  126.      mouseUp = true; //  

  127.     }, clicktime)  

  128.    }  

  129.   }  


F13sY9y星狼资源网www.vipyuanma.cn原创
星狼资源网
星狼资源网 » js实现跳一跳小游戏,js开发的游戏实现机制

发表评论

欢迎 访客 发表评论

星狼资源分享网免费下载破解程序源码,最新商业网站源码,公司企业网站模板,原版微擎模块微信小程序下载请认准星狼源码网论坛之家。

开通会员 联系客服
 
QQ在线咨询
售前咨询电话
2371437589
技术支持电话
2371437589