溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

原生JS怎么實現(xiàn)的跳一跳小游戲

發(fā)布時間：2021-04-20 09:53:16 來源：億速云 閱讀：224 作者：小新 欄目：web開發(fā)

小編給大家分享一下原生JS怎么實現(xiàn)的跳一跳小游戲，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

具體如下：

以下說的是閑暇編寫的一個小游戲--跳一跳，類似于微信的跳一跳，大體實現(xiàn)功能有：

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 ></div>
      <div >
      </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];
  // 初始函數(shù)，入口函數(shù)
  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';
  }
  // 綁定事件函數(shù)
  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;
  }
  // 判斷動畫是否結(jié)束
  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()函數(shù)，用來綁定按鈕事件的BindEvent()函數(shù)，用來監(jiān)聽CSS3動畫是否結(jié)束的getTransition()函數(shù)，用來判斷棋子是否出界的函數(shù)judeg()函數(shù)。而控制棋子運動的距離，主要是通過當你按下按鈕時(onmousedown)觸發(fā)一個定時器函數(shù)中的(time的加加)，彈起按鈕時(onmouseup)棋子的left和top運動距離=設定像素值*time。

為了讓棋子運動不那么生硬我添加了一些css3動畫（rotate屬性）以及transition屬性。

實現(xiàn)效果如下：

原生JS怎么實現(xiàn)的跳一跳小游戲

雖然還有些許不足，但不影響整體功能。

以上是“原生JS怎么實現(xiàn)的跳一跳小游戲”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手