首页
所有分类
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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
简单理解vue中Props属性
Oct 27 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
详解React项目如何修改打包地址（编译输出文件地址）
Mar 21 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
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
乌克兰购物网站(27) 哈萨克斯坦购物网站(2) 希腊购物网站(6) 罗马尼亚购物网站(10) 保加利亚购物网站(3) 白俄罗斯购物网站(3) PHP面试题(54) 约旦购物网站(1) 冰岛购物网站(1) 马耳他购物网站(1)
You might like
JavaScript Archive Network 集合
2007/05/12 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
javascript时间函数大全
2014/06/30 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
详解vue高级特性
2020/06/09 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python实现飞行棋游戏
2020/02/05 Python
医药代表个人的求职信分享
2013/12/08 职场文书
无毒社区工作方案
2014/05/23 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
护理工作个人总结
2015/03/03 职场文书
2015年科室工作总结
2015/04/10 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
关于python爬虫应用urllib库作用分析
2021/09/04 Python
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers