2048小游戏HTML网页版源码共享

简介: 2048小游戏HTML网页版源码共享

上下左右键控制

游戏截图如下:

image.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<title>2048</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
  <div class="container">
    <h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
    <p class="inspired">by the原2048的灵感。</p>
  </div>
</header>
<div class="container">
  <div class="directions">
    <p><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>
  <div class="not-recommended">
    <button class="btn not-recommended__item js-restart-btn" id="restart">重新启动游戏</button>
    <span class="not-recommended__annotation"></span>
  </div>
</div>
<script src="js/index.js"></script>
<div style="text-align:center;">
<p><a href="https://blog.csdn.net/qq_44273429" target="_blank">海拥✘</a></p>
</div>
<center><script type="text/javascript"> (function() { var s = "_" + Math.random().toString(36).slice(2); document.write('<div style="" id="' + s + '"></div>'); (window.slotbydup = window.slotbydup || []).push({ id: "u4923786", container:  s }); })(); </script><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" ></script></center>
</body>
</html>
目录
相关文章
|
6天前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
30 0
|
28天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
28天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
9天前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
25 1
【HTML】构建网页的基石
|
1月前
|
移动开发 HTML5
响应式精品资源导航源码html5
一款响应式精品网站推荐导航源码,可以自己修改代码替换图标图片和指向网址。背景图支持自动替换,背景图可以在images中修改,本地双击html即可查看效果
31 2
响应式精品资源导航源码html5
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1月前
|
搜索推荐
2024微信个人名片在线生成HTML源码
微信个人名片卡片在线生成,这是一款微信个人名片生成网站源码,无第三方接口,本地直接生成可长期使用。 主要用于生成用户个性化的名片页面,包括头像、姓名、联系方式、个人介绍等信息。 在本地浏览器打开即可,源码是html的,也可上传到服务器上。
41 0
2024微信个人名片在线生成HTML源码
|
28天前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
28天前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
1月前
|
移动开发 HTML5
蓝色炫酷碎粒子HTML5导航源码
蓝色炫酷碎粒子HTML5导航源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
34 1