HTML小游戏2—— 2048网页版(附完整源码)

给大家安利一个免费且实用的前端刷题(面经大全)网站,👉点击跳转到网站

在线演示地址: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/

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • 本博文介绍HTML中的表单标签。 表单 = 表单域 + 表单控件 + 提示信息,下面说说表单域和表单控件。 1 表单域标签:         基本格式:                        ...

  • html篇之《表单》 一、结构 标注 选项1 选项2 选项3 选项1 选项2 选项3 ...

  • 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识...

  • 🌄一、form表单是什么 表单是一个包含表单元素的区域。 表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列...

  • HTML结构 HTML模板 HTML:htyper text markup language, 即超文本标记语言...

  • 🏆一、HTML是什么又不是什么? 👤1.1、HTML是什么 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别...

  • 表格:  表格1 表格2 快捷键:table>tr*数量>td*数量   属性名 属性值 说明 ...

  • 渲染模板 我的客服系统后端使用的golang Gin 框架,想把页面渲染出来,下面就是加载html模板页面 package router func InitViewRouter(engine *gi...

  • w3c机构:规定网页分成三个部分:结构、样式、表现形式。     无序列表: (每个列表左侧都有实心黑点,可以用css去掉)   列表1 列表2 快捷方式:...

  • 最近又是更新了报告模板的样式新使用了目录对象 因为直接生成的目录样式比较丑所以这边使用的是自定义xsl                                               ...

  • 目标: 会使用HTML5的基本结构创建网页 会使用文本相关标签排版文本信息 会使用图像相关标签实现图文并茂的页面 会使用标签创建超链接、锚链接及功能性链接 1、什么是HTML HTML:Hyper...

  • html篇之《标签分类和嵌套》 一、常用标签 (1) 一个区块容器标记,可以包含图片、表格、段落等各种html元素 (2) 没有实际意义,为了应用样式 二、标签分类 (1) 块级标签 独...

  • 1、媒体元素 音频和视频 2、页面结构分析 3、iframe内联框架 4、初始表单post和get提交    注册            名字:...

  • 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 HTML页面加载过程会发生什么?因为浏览器网络拉取资源是多线程的,但是dom树的操作都是在一个线程中的,所以网页资源的解析、js加载、...

  • 获取元素的尺寸信息,有很多种方法。不同的尺寸属性有不同的定义,如果没有很好的总结,就很容易混淆。下面就一起来看看。偏移尺寸(offset)元素相对于偏移父元素(offsetParent)的偏移尺寸。o...

  • Markdown 利用HTML进行优雅排版 我在使用Markdown整理文档的时候发现,Markdown本身对文本格式的排版很单一,只有编号、字体加粗、固定标题格式等一些基础的排版,使用不够灵活,好...

  • 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识...

  • 好家伙,好久好久没有更新这个系列了   为了使文档更方便阅读,使代码更容易维护,来把这个飞机大战模块化 项目已开源: https://gitee.com/tang-and-han-...

  • 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识...

  • 零、学习中的补充 1、head中的meta 这段代码表示2s后当前网页会自动refresh跳转到http://www.baidu.com页面。 一般来说,HTML中只有六个标签可以放在head中...