首页
所有分类
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 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
JavaScript-定时器0~9抽奖系统详解（代码）
Aug 16 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
详解JVM系列之内存模型
Jun 10 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
MOTOROLA(1) ICF-2010(1) 摩托罗拉(1) 收信机(3) BOSE(2) 晶体管(2) 音箱(1) 77A(2) 单管机(1) 耳机(1)
You might like
mysql 性能的检查和优化方法
2009/06/21 PHP
php如何获取Http请求
2020/04/30 PHP
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python列表解析配合if else的方法
2018/06/23 Python
python实现飞机大战
2018/09/11 Python
如何基于python生成list的所有的子集
2019/11/11 Python
阿拉伯世界最大的电子卖场：Souq埃及
2016/08/01 全球购物
美国礼品卡商城： Gift Card Mall
2017/08/25 全球购物
澳大利亚波希米亚风时尚品牌：Tree of Life
2019/09/15 全球购物
应用服务器有那些
2012/01/19 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
生日宴会答谢词
2014/01/09 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2014年新教师工作总结
2014/11/08 职场文书
汽车转让协议书
2015/01/29 职场文书
学生通报表扬范文
2015/05/04 职场文书
教师见习总结范文
2015/06/23 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL