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)
   }
  }

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

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

java经典小游戏汇总

javascript经典小游戏汇总

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

时间: 2020-07-30

Three.js 再探 - 写一个微信跳一跳极简版游戏

那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧 源码地址:  github.com/luosijie/th- 由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好 下面是实现过程 游戏分析 首先分析一下一个这样的游戏需要什么元素 Three.js必备元素: 场景,灯光,摄像机 一块又一块的方块 会跳的那个 ,或者叫游戏者 以上 游戏过程 初始一个场景, 场景中有一个 会跳的那个 和 2个方块 鼠标按下储存 能量值 鼠标放

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

本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

原生js实现的金山打字小游戏(实例代码详解)

首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g

JS实现的走迷宫小游戏完整实例

本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

C#实现微信跳一跳小游戏的自动跳跃助手开发实战

一.前言: 前段时间微信更新了新版本后,带来的一款H5小游戏"跳一跳"在各朋友圈里又火了起来,类似以前的"打飞机"游戏,这游戏玩法简单,但加上了积分排名功能后,却成了"装逼"的地方,于是很多人花钱花时间的刷积分抢排名.后来越来越多的聪明的"程序哥们"弄出了不同方式不同花样的跳一跳助手(外挂?),有用JS实现的.有JAVA实现的.有Python实现的,有直接物理模式的.有机械化的.有量尺子的等等,简直是百花齐放啊-- 赶一下潮流

Android版微信跳一跳小游戏利用技术手段达到高分的操作方法

本文主要来讲个个好玩的东西,近来微信刚出的跳一跳微信小程序的游戏很火,看到很多人都达到了二三百分就各种刷朋友圈了. 甩手一个表情 最终我们达到的分数却是这样的: 羡慕吧 一定会有人拍手叫好,"黄金右手"!说真的,我已经不用右手好多年,而且我玩这个游戏压根就没用手,而是意念!哈哈,别喷我,开个玩笑而已,肯定是利用技术手段啦,什么技术?python喽-哈哈,不过不是我写的,我自己是做Android开发的,我对于python从来没有接触,只是恰好在蛋哥公众号看到关于这个游戏的文章,觉得有意思

微信跳一跳小游戏python脚本

Python编写微信小游戏"跳一跳"的运行脚本,分享给大家. 更新了微信后发现了一款小游戏跳一跳,但是玩了一下午最高才达到200,每次差点破纪录后总是手抖就挂掉了,气的想要砸手机.闲来无事刷微博的时候正好看到有人分析如何编写脚本自动运行游戏破了3000多分,细看后觉得原理并不复杂,就索性花了一个晚上,参考大神的实现方法,在他的基础上删减了一些代码,也用Python写了个脚本.接下来进行原理和代码分析. 图1.跳一跳启动界面 原理 配置adb环境变量,在我的电脑–>属性–>高

javascript实现的猜数小游戏完整实例代码

本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

JavaScript原生编写《飞机大战坦克》游戏完整实例

先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r

微信小程序—微信跳一跳,Android游戏助手(外挂)使用教程详解

作为一名有着丰富实战经验的Android开发人员,作为一个有着一定基础和实战的逆向新司机,第一次面对github上的这个项目自己也是懵的,即使看完了README,也还是不知道从何下手.在此之前玩游戏从未使用过游戏助手之类的.那么我在想,作为小半个专业选手尚且这样,广大小白又能比我好到哪里去呢? 以前我也曾经是个单纯的好骚年啊! 后来经过仔细阅读README,加上摸索,和查看源码,才慢慢走上正途:下面记录一下,以备你查看: 成果 图片说明:本人排行第二,记得我自己才跳了昨天一百七十多分,大多数都是

小米5s微信跳一跳小程序python源码

本文实例为大家分享了微信跳一跳小程序python源码,供大家参考,具体内容如下 微信跳一跳小程序小米5s源码python,搭建环境后亲测可用. # coding: utf-8 import os import sys import subprocess import shutil import time import math from PIL import Image, ImageDraw import random import json import re # === 思路 === # 核