首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 27, 2019

本文实例讲述了原生JS实现的跳一跳小游戏。分享给大家供大家参考，具体如下：

以下说的是闲暇编写的一个小游戏--跳一跳，类似于微信的跳一跳，大体实现功能有：

1.先随机生成地图；

2.按住按钮释放后完成动作并进行判断；

首先po一下代码；

代码如下：

<!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>

代码主要分为用来绘制圆柱体分布的draw()函数，用来绑定按钮事件的BindEvent()函数，用来监听CSS3动画是否结束的getTransition()函数，用来判断棋子是否出界的函数judeg()函数。而控制棋子运动的距离，主要是通过当你按下按钮时(onmousedown)触发一个定时器函数中的(time的加加)，弹起按钮时(onmouseup)棋子的left和top运动距离=设定像素值*time。

为了让棋子运动不那么生硬我添加了一些css3动画（rotate属性）以及transition属性。

实现效果如下：

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

虽然还有些许不足，但不影响整体功能。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

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

- Author -

Cairo960918

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 #Javascript
vue-cli构建vue项目的步骤详解
Jan 27 #Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 #Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 #Javascript
实例讲解JS中pop使用方法
Jan 27 #Javascript
Vue.js实现的购物车功能详解
Jan 27 #Javascript
JS温故而知新之变量提升和时间死区
Jan 27 #Javascript
蓝牙(1) 鸿蒙(2) 虚拟键盘(1) 鸿蒙3.0(1) xhunter1.sys(1) 蓝牙耳机(1) Debian(1) RustDesk(1) 华为(1) HarmonyOS(1)
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python操作SQLite简明教程
2014/07/10 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Django实现网页分页功能
2019/10/31 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python实现字符串和数字拼接
2020/03/02 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
工作自荐信
2013/12/11 职场文书
车间副主任岗位职责
2013/12/24 职场文书
小学科学教学反思
2014/01/26 职场文书
打架检讨书300字
2014/02/02 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
小学生必读成语故事大全：送给暑假的你们
2019/07/09 职场文书