欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用JavaScript實現(xiàn)網(wǎng)頁版2048小游戲

 更新時間:2022年11月16日 14:24:19   作者:海擁  
這篇文章主要介紹了如何利用HTML+CSS+JS編寫一個網(wǎng)頁版的2048小游戲,代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

項目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下:

本節(jié)教程我會帶大家使用 HTML 、CSS和 JS 來制作一個 2048網(wǎng)頁版小游戲

本節(jié)示例將會實現(xiàn)如下所示的效果:

HTML源碼

使用<header></header>添加頭部2048標(biāo)題

<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>

效果:

添加一個 container 容器

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

添加游戲的主體部分

<div class="directions">
        <p id="haiyong" class="haiyong"><strong>如何玩:</strong> 使用鍵盤方向鍵鍵移動數(shù)字方塊。相鄰的兩個方塊數(shù)字相同,它們可合并成一個!</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">
            分?jǐn)?shù):
            <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">游戲結(jié)束<div class="monkey">??</div><button class="btn not-recommended__item js-restart-btn"
             id="try-again">再試一次</button></div>
    </div>

效果:

重新啟動游戲

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

底部導(dǎo)航欄

<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>

效果:

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;
    }
}

底部導(dǎo)航欄

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

到此這篇關(guān)于利用JavaScript實現(xiàn)網(wǎng)頁版2048小游戲的文章就介紹到這了,更多相關(guān)JavaScript 2048游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 前端html2canvas生成截圖實現(xiàn)步驟與踩坑記錄

    前端html2canvas生成截圖實現(xiàn)步驟與踩坑記錄

    這篇文章主要介紹了前端html2canvas生成截圖實現(xiàn)步驟與踩坑的相關(guān)資料,主要步驟包括使用html2canvas生成截圖以及處理圖片跨域和CSS樣式丟失問題,可選方案包括轉(zhuǎn)換圖片為base64編碼和使用domtoimage插件,需要的朋友可以參考下
    2024-09-09
  • javascript獲取本機操作系統(tǒng)類型的方法

    javascript獲取本機操作系統(tǒng)類型的方法

    關(guān)于我們使用電腦的操作系統(tǒng),我們通過鼠標(biāo)點擊就能獲取,如果我們想用腳本怎么實現(xiàn)javascript獲取本機操作系統(tǒng)類型的方法呢,下面給大家分享javascript獲取本機操作系統(tǒng)類型的方法,需要的朋友可以參考下
    2015-08-08
  • Vue2.0+ElementUI實現(xiàn)表格翻頁的實例

    Vue2.0+ElementUI實現(xiàn)表格翻頁的實例

    下面小編就為大家?guī)硪黄猇ue2.0+ElementUI實現(xiàn)表格翻頁的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 原生js實現(xiàn)購物車邏輯和功能

    原生js實現(xiàn)購物車邏輯和功能

    這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)購物車邏輯和功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • JavaScript的事件代理和委托實例分析

    JavaScript的事件代理和委托實例分析

    在javasript中delegate這個詞經(jīng)常出現(xiàn),看字面的意思,代理、委托。在各種框架中,也經(jīng)常能看到delegate相關(guān)的接口。這些接口又有什么特殊的用法呢?這篇文章就主要通過實例介紹一下javascript delegate的用法和原理。
    2015-03-03
  • Bootstrap前端開發(fā)案例一

    Bootstrap前端開發(fā)案例一

    Bootstrap前端開發(fā)案例一,這篇文章能夠幫助大家更還好的進(jìn)行前端開發(fā)Bootstrap,相信大家會愛上Bootstrap
    2016-06-06
  • js中call()和apply()改變指針問題的講解

    js中call()和apply()改變指針問題的講解

    今天小編就為大家分享一篇關(guān)于js中call()和apply()改變指針問題的講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 如何自己實現(xiàn)JavaScript的new操作符

    如何自己實現(xiàn)JavaScript的new操作符

    new大家肯定都不陌生,單身沒有對象的時候就new一個,很方便。那么它在創(chuàng)建實例的時候,具體做了哪些操作呢?今天我們就來一起分析一下。
    2021-04-04
  • js判讀瀏覽器是否支持html5的canvas的代碼

    js判讀瀏覽器是否支持html5的canvas的代碼

    瀏覽器是否支持html5的canvas,我們可以使用js來判斷下,具體如下,喜歡的朋友可以收藏
    2013-11-11
  • JavaScript console對象與控制臺使用示例詳解

    JavaScript console對象與控制臺使用示例詳解

    這篇文章主要介紹了JavaScript console對象與控制臺的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2022-10-10

最新評論