HTML小遊戲2—— 2048網頁版（附完整原始碼）

海擁發表於2022-11-23
HTML遊戲網頁原始碼

給大家安利一個免費且實用的前端刷題（面經大全）網站，?點選跳轉到網站。

線上演示地址：https://code.haiyong.site/moyu/2048.html
原始碼也可在文末免費獲取

✨ 前言

?️ 本文已收錄於?️100個HTML小遊戲專欄：100個HTML小遊戲
? 目前已有100+小遊戲，原始碼在持續更新中，前100位訂閱免費，先到先得。
? 訂閱專欄後可閱讀100個HTML小遊戲文章；還可私聊領取一百個小遊戲原始碼。
在這裡插入圖片描述

✨ 專案基本結構

目錄結構如下：

├── css
│   └── style.css
├── js
│   └── script.js
└── index.html

本節教程我會帶大家使用 HTML 、CSS和 JS 來製作一個 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 href="https://blog.csdn.net/qq_44273429" target="_blank">海擁✘</a></p>
    </div>
</header>

效果：

在這裡插入圖片描述

新增一個 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>

效果：

title=
title=

重新啟動遊戲

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

title=

底部導航欄

<footer>
  <span class="author">Created by <a href="https://haiyong.site/about">Haiyong</a></span>        
  <span class="center">2048</span>        
  <span class="opposite">更多遊戲:<a href="https://code.haiyong.site/moyu">摸魚</a></span>
</footer>

效果：
在這裡插入圖片描述

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();

原始碼下載

1.CSDN資源下載：https://download.csdn.net/download/qq_44273429/86815522
2.從學長的資源網下載（價格更優惠）：https://code.haiyong.site/372/

相關文章