<tbody id="86a2i"></tbody>


<dd id="86a2i"></dd>
<progress id="86a2i"><track id="86a2i"></track></progress>

<dd id="86a2i"></dd>
<em id="86a2i"><ruby id="86a2i"><u id="86a2i"></u></ruby></em>

    <dd id="86a2i"></dd>

    項目基本結構

    目錄結構如下:

    利用JavaScript實現網頁版2048小游戲

    本節教程我會帶大家使用 HTML 、CSS和 JS 來制作一個?2048網頁版小游戲

    本節示例將會實現如下所示的效果:

    利用JavaScript實現網頁版2048小游戲

    HTML源碼

    使用<header></header>添加頭部2048標題

    <header>
        <div class="container">
            <h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
            <p class="inspired">by <a  rel="external nofollow"  target="_blank">海擁?</a></p>
        </div>
    </header>

    效果:

    利用JavaScript實現網頁版2048小游戲

    添加一個 container 容器

    <div class="container">
    </div>

    添加游戲的主體部分

    <div class="directions">
            <p id="haiyong" class="haiyong"><strong>如何玩:</strong> 使用鍵盤方向鍵鍵移動數字方塊。相鄰的兩個方塊數字相同,它們可合并成一個!</p>
        </div>
        <div class="scores">
            <div class="score-container best-score">
                歷史最佳:
                <div class="score">
                    <div id="bestScore">0</div>
                </div>
            </div>
            <div class="score-container">
                分數:
                <div class="score">
                    <div id="score">0</div>
                    <div class="add" id="add"></div>
                </div>
            </div>
        </div>
        <div class="game">
            <div id="tile-container" class="tile-container"></div>
            <div class="end" id="end">游戲結束<div class="monkey">?</div><button class="btn not-recommended__item js-restart-btn"
                 id="try-again">再試一次</button></div>
        </div>

    效果:

    利用JavaScript實現網頁版2048小游戲

    利用JavaScript實現網頁版2048小游戲

    重新啟動游戲

    <div class="not-recommended">
            <button class="btn not-recommended__item js-restart-btn" id="restart">重新啟動游戲</button>
            <span class="not-recommended__annotation"></span>
        </div>

    利用JavaScript實現網頁版2048小游戲

    底部導航欄

    <footer>
      <span class="author">Created by <a  rel="external nofollow" >Haiyong</a></span>        
      <span class="center">2048</span>        
      <span class="opposite">更多游戲:<a  rel="external nofollow" >摸魚</a></span>
    </footer>

    效果:

    利用JavaScript實現網頁版2048小游戲

    CSS 源碼

    header 部分

    header {
        color: #F8FFE5;
        text-align: center;
    }
    
    header span {
        display: inline-block;
        box-sizing: border-box;
        width: 4rem;
        height: 4rem;
        line-height: 4rem;
        margin: 0 0.4rem;
        background: #FFC43D;
    }

    媒體查詢:

    @media screen and (max-width:440px) {
      header span {
          width: 3rem;
          height: 3rem;
          line-height: 3rem;
      }
    }
    @media screen and (max-width:375px) {
      header span {
          width: 2.5rem;
          height: 2.5rem;
          line-height: 2.5rem;
      }
    }

    container 容器

    .container {
        margin: 0 auto;
        padding-bottom: 3.5rem;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-width: 550px;
        text-align: center;
    }
    
    header .container {
        padding: 0;
        padding: 2rem 4rem;
        max-width: 900px;
    }
    @media screen and (max-width:440px) {
        header .container {
            padding: 1rem 2rem;
        }
    }

    底部導航欄

    footer {
      background-color: #158ca5;
      bottom: 0;
      box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      justify-content: space-around;
      left: 0;
      padding: 15px;
      position: fixed;
      right: 0;
    }
    footer a {
      color: white;
    }
    footer .center {
      justify-content: center;
    }

    JS 源碼

    js 代碼較多,這里提供部分

    function handleKeypress(evt) {
      var modifiers = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
      var whichKey = event.which;
    
      var prevGame = [].concat(game);
    
      if (!modifiers) {
        event.preventDefault();
        switch (whichKey) {
          case 37:
            game = shiftGameLeft(game);
            break;
          case 38:
            game = shiftGameUp(game);
            break;
          case 39:
            game = shiftGameRight(game);
            break;
          case 40:
            game = shiftGameDown(game);
            break;
        }
        game = game.map(function (tile, index) {
          if (tile) {
            return _extends({}, tile, {
              index: index
            });
          } else {
            return null;
          }
        });
        addRandomNumber();
        updateDOM(prevGame, game);
        if (gameOver()) {
          setTimeout(function () {
            endDiv.classList.add('active');
          }, 800);
          return;
        }
      }
    }
    
    function newGameStart() {
      document.getElementById('tile-container').innerHTML = '';
      endDiv.classList.remove('active');
      score = 0;
      scoreDiv.innerHTML = score;
      initGame();
      drawBackground();
      var previousGame = [].concat(game);
      addRandomNumber();
      addRandomNumber();
      updateDOM(previousGame, game);
    }
    
    newGameStart();
    原文地址:https://segmentfault.com/a/1190000042826084

    相關文章:

    免费一级a片在线播放视频|亚洲娇小性XXXX色|曰本无码毛片道毛片视频清|亚洲一级a片视频免费观看
    <tbody id="86a2i"></tbody>

    
    
    <dd id="86a2i"></dd>
    <progress id="86a2i"><track id="86a2i"></track></progress>

    <dd id="86a2i"></dd>
    <em id="86a2i"><ruby id="86a2i"><u id="86a2i"></u></ruby></em>

      <dd id="86a2i"></dd>