欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-05 13:44:22
本文实例讲述了原生js实现的跳一跳小游戏。分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生...

本文实例讲述了原生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.jb51.net/code/htmljsrun测试上述代码运行效果。

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结

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