js实现跳一跳小游戏


Posted in Javascript onJuly 31, 2020

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

效果

js实现跳一跳小游戏

流程分析

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

动画效果

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

注意事项

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

布局

<div class="wrap">
  <h3 class="tit">鼠标按下蓄力,松开鼠标小球开始运动</h3>
  <h1>分数:</h1>
  <h2>历史最高:</h2>
  <div class="con"></div>
  <div class="blc1"></div>
</div>

样式

* {
   margin: 0;
   padding: 0;
  }

  .wrap {
   height: 500px;
   position: relative;
   overflow: hidden;
  }

  .con {
   background-color: hotpink;
   /*左边的没有背景色,右边的加了背景色*/
   background-image: radial-gradient(10px at 4px 4px,
     rgba(0, 0, 0, 0),
     rgba(2, 2, 2, 1));
   width: 20px;
   height: 20px;
   border-radius: 50%;
   position: absolute;
   left: 30px;
   bottom: 30px;
   z-index: 2;
  }

  .blc1 {
   box-shadow: 10px 10px 7px #000;
   border-radius: 30%;
   width: 40px;
   height: 40px;
   background-color: midnightblue;
   position: absolute;
   left: 20px;
   bottom: 20px;
  }

  .tit {
   text-align: center;
  }

js

function randomInt(min, max) { //产生[min,max]范围内的整数
   return Math.round(Math.random() * (max - min)) + min;
  }

  function randomColor() { //产生随机的颜色
   var map = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
   var str = '#';
   for (var i = 0; i < 6; i++) {
    var index = randomInt(0, 15);
    str += map[index];
   }
   return str;
  }
  var wrap = document.querySelector('.wrap');
  var con = document.querySelector('.con');
  var oldtime = 0; //记录鼠标按下的时间
  var timer2 = null; //小球平抛运动定时器
  var timer3 = null; //鼠标按下变形定时器
  var num = 0; //游戏成绩
  var mouseD = false; //记录鼠标是否按下
  var mouseUp = true; //记录鼠标是否松开
  var h1 = document.querySelector('h1');
  var h2 = document.querySelector('h2');
  var max = localStorage.getItem('max');
  var div = document.createElement('div'); //创建下一个平台
  h2.innerText = '历史最高:' + localStorage.getItem('max'); //从浏览器数据库获取最高分
  div.style.left = 35 + randomInt(30, 60) + 'px'; //初始化平台距离左边的值
  var div_sex = randomInt(30, 70); //初始化平台大小,范围
  div.style.bottom = 40 - div_sex / 2 + 'px'; //平台距离底部为小球底部减去平台
  div.style.height = div_sex + 'px';
  div.style.width = div_sex + 'px';
  div.className = 'blc1'; //添加初始化样式
  div.style.backgroundColor = randomColor(); //随机颜色
  wrap.appendChild(div); //存入平台
  document.onmousedown = function () { //监听页面点击事件
   if (!mouseD) { //如果鼠标按下没有抬起
    var blc = document.querySelectorAll('.blc1'); //获取所有平台
    oldtime = Date.now(); //记录鼠标按下的时间
    var target = blc[blc.length - 2]; //小球所在的平台
    var down_c = 10; //平台最大下沉距离
    var left = target.offsetLeft; //记录鼠标按下后下沉效果之前平台的left值
    var bottom = 40 - target.offsetHeight / 2; //记录鼠标按下后下沉效果之前平台的bottom值
    var con_l = con.offsetLeft; //记录鼠标按下后下沉效果之前小球的left值
    var con_b = 30; //记录鼠标按下后下沉效果之前小球的bottom值
    timer3 = setInterval(() => { //下沉效果定时器
     down_c -= 0.03; //每一次变化0.03px
     if (down_c <= 0) { //最小值为0
      down_c = 0.03;
     }
     target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c +
     'px #000'; //边框阴影向里缩,实现3D效果
     target.style.left = left + 10 - down_c + 'px';
     target.style.bottom = bottom + -10 + down_c + 'px';
     con.style.left = con_l + 10 - down_c + 'px';
     con.style.bottom = con_b - 10 + down_c + 'px'; //小球和平台一起向右下角移动,配合阴影达到3D效果
    }, 1);
    mouseD = true; //鼠标已经按下
    mouseUp = false; //鼠标即将松开
   }
  }
  document.onmouseup = function () {
   if (!mouseUp) { //如果没有触发mousedown事件不会执行以下代码
    mouseUp = true; //锁定事件,小球运动结束前不能执行以下代码
    clearInterval(timer3); //清除下沉动画
    var timer4 = null; //上升动画
    var blc = document.querySelectorAll('.blc1'); //获取所有平台
    var target = blc[blc.length - 2]; //同下沉动画
    var left = target.offsetLeft;
    var down_time = 0;
    var down_c = 0;
    var click_time = Date.now() - oldtime; //鼠标按下的时间
    var bottom = 40 - target.offsetHeight / 2 - (click_time * 0.03 > 10 ? 10 : click_time *
    0.03); //原来的bottom-下沉的距离,最大为10
    timer4 = setInterval(() => { //恢复原来的状态
     down_time++;
     if (down_time > click_time) {
      clearInterval(timer4);
     }
     down_c += 0.03;
     if (down_c >= 10) {
      down_c = 10;
     }
     target.style.boxShadow = down_c + 'px ' + down_c + 'px ' + down_c + 'px #000';
     target.style.left = left - down_c + 'px';
     target.style.bottom = bottom + down_c + 'px';
    }, 1);
    var clicktime = (Date.now() - oldtime) * 1.5; //小球运动时间为鼠标按下的1.5倍,减少蓄力时间
    var time2 = 0; //小球跳一跳计时器
    var y = 30; //小球初始bottom值
    var x = con.offsetLeft; //小球初始left值
    clearTimeout(tout); //清除延时器
    timer2 = setInterval(() => { //小球弹跳计时器
     time2 += 20;
     y = 30 + clicktime / 50 * Math.sin(time2 * Math.PI /
     clicktime); //将总的时间分成180份通过sin(0,180)从0到0的特性完成一个圆滑的抛物线
     con.style.left = x + time2 / 20 + 'px';
     con.style.bottom = y + 'px';
    }, 20);
    var tout = setTimeout(function () { //控制小球运动的时间与鼠标按下的时间*1.5相等,控制小球运动的时间
     clearInterval(timer2); //结束小球运动
     x = con.offsetLeft; //获取运动结束后小球的left值
     var blc = document.querySelectorAll('.blc1'); //获取所有的平台
     if (con.offsetLeft >= wrap.lastElementChild.offsetLeft && con.offsetLeft <= wrap
      .lastElementChild.offsetLeft + wrap.lastElementChild.offsetHeight - 10
      ) { //判断小球是否位于平台里面
      num += 10; //每跳一次加10分
      h1.innerText = '分数:' + num; //动态展示分数
      //生成下一个平台
      var div_sex2 = randomInt(40, 60);
      var newdiv = document.createElement('div');
      newdiv.style.bottom = 40 - div_sex2 / 2 + 'px';
      newdiv.style.height = div_sex2 + 'px';
      newdiv.style.width = div_sex2 + 'px';
      newdiv.style.left = x + randomInt(80, 120) + 'px';
      newdiv.style.backgroundColor = randomColor();
      newdiv.className = 'blc1';
      wrap.appendChild(newdiv);
     } else {
      alert('游戏结束,分数:' + num);
      max = max > num ? max : num;
      localStorage.setItem('max', max) //更新最高分
      location.reload(); //刷新当前页面
     }
     wrap.scrollLeft = wrap.scrollWidth; //控制滚动条位于最右边
     mouseD = false; //完成一次事件,重新开启
     mouseUp = true; //
    }, clicktime)
   }
  }

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
vue下的@change事件的实现
Oct 25 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
js实现翻牌小游戏
Jul 31 #Javascript
Vue 请求传公共参数的操作
Jul 31 #Javascript
vue2.0 解决抽取公用js的问题
Jul 31 #Javascript
vue实现公共方法抽离
Jul 31 #Javascript
js实现无缝轮播图插件封装
Jul 31 #Javascript
原生js滑动轮播封装
Jul 31 #Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
You might like
php生成shtml类用法实例
2014/12/09 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP的PDO连接讲解
2019/01/24 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
Python开发编码规范
2006/09/08 Python
在Django中创建动态视图的教程
2015/07/15 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
优秀少先队员主要事迹材料
2014/05/28 职场文书
拓展策划方案
2014/06/03 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
学生病假条范文
2015/08/17 职场文书
Python列表的索引与切片
2022/04/07 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫