HTML2048小游戏
源代码在效果图后面
效果图
源代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2048 Game</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background: #f7f7f7;font-family: Arial, sans-serif;}.game-container {width: 400px;height: 400px;background: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.tile {width: 25%;height: 25%;box-sizing: border-box;position: relative;background: #fff;border: 1px solid #eaeaea;margin: 0;float: left;text-align: center;line-height: 100px;font-size: 48px;color: #776e65;border-radius: 10px;transition: transform 0.2s;}.tile:after {content: '';display: block;padding-top: 100%;}.tile.new {animation: slideIn 0.5s;}.tile.tile-2 {background: #eee4da;}.tile.tile-4 {background: #ede0c8;}.tile.tile-8 {background: #f2b47b;}.tile.tile-16 {background: #f59563;}.tile.tile-32 {background: #f67c5f;}.tile.tile-64 {background: #f65e3b;}.tile.tile-128 {background: #edcf72;}.tile.tile-256 {background: #edcc61;}.tile.tile-512 {background: #edc850;}.tile.tile-1024 {background: #edc53f;}.tile.tile-2048 {background: #edc22e;}@keyframes slideIn {0% {transform: translate(-50%, -50%) rotate(90deg);}100% {transform: translate(-50%, -50%) rotate(0deg);}}</style>
</head><body><div class="game-container" id="game-container"></div><div style="margin-top: 20px;"><button onclick="moveUp()">上</button><button onclick="moveDown()">下</button><button onclick="moveLeft()">左</button><button onclick="moveRight()">右</button></div><script>const container = document.getElementById('game-container');let grid = [];let score = 0;function createGrid() {for (let i = 0; i < 4; i++) {const row = [];for (let j = 0; j < 4; j++) {const tile = document.createElement('div');tile.classList.add('tile');tile.dataset.row = i;tile.dataset.col = j;container.appendChild(tile);row.push(tile);}grid.push(row);}}function addRandomTile() {const emptyCells = [];grid.forEach((row, rowIndex) => {row.forEach((tile, colIndex) => {if (!tile.classList.contains('tile-2') &&!tile.classList.contains('tile-4') &&!tile.classList.contains('tile-8') &&!tile.classList.contains('tile-16') &&!tile.classList.contains('tile-32') &&!tile.classList.contains('tile-64') &&!tile.classList.contains('tile-128') &&!tile.classList.contains('tile-256') &&!tile.classList.contains('tile-512') &&!tile.classList.contains('tile-1024') &&!tile.classList.contains('tile-2048')) {emptyCells.push({ row: rowIndex, col: colIndex });}});});if (emptyCells.length) {const randomIndex = Math.floor(Math.random() * emptyCells.length);const cell = emptyCells[randomIndex];const value = Math.random() > 0.5? 2 : 4;addTile(cell.row, cell.col, value);}}function addTile(row, col, value) {const tile = grid[row][col];tile.classList.add(`tile-${value}`);tile.textContent = value;}function removeTile(row, col) {const tile = grid[row][col];tile.classList.remove('tile-2', 'tile-4', 'tile-8', 'tile-16', 'tile-32', 'tile-64', 'tile-128', 'tile-256', 'tile-512', 'tile-1024', 'tile-2048');tile.textContent = '';}function moveUp() {for (let col = 0; col < 4; col++) {let merged = false;let newRow = [];for (let row = 0; row < 4; row++) {const tile = grid[row][col];if (tile.textContent === '') continue;let currentValue = parseInt(tile.textContent);if (newRow.length === 0) {newRow.push(currentValue);} else {const lastValue = newRow[newRow.length - 1];if (lastValue === currentValue &&!merged) {newRow[newRow.length - 1] = currentValue * 2;score += currentValue * 2;merged = true;} else {newRow.push(currentValue);merged = false;}}}for (let row = 0; row < 4; row++) {if (row < newRow.length) {addTile(row, col, newRow[row]);} else {removeTile(row, col);}}}addRandomTile();}function moveDown() {for (let col = 0; col < 4; col++) {let merged = false;let newRow = [];for (let row = 3; row >= 0; row--) {const tile = grid[row][col];if (tile.textContent === '') continue;let currentValue = parseInt(tile.textContent);if (newRow.length === 0) {newRow.push(currentValue);} else {const lastValue = newRow[newRow.length - 1];if (lastValue === currentValue &&!merged) {newRow[newRow.length - 1] = currentValue * 2;score += currentValue * 2;merged = true;} else {newRow.push(currentValue);merged = false;}}}for (let row = 3; row >= 0; row--) {if (3 - row < newRow.length) {addTile(row, col, newRow[3 - row]);} else {removeTile(row, col);}}}addRandomTile();}function moveLeft() {for (let row = 0; row < 4; row++) {let merged = false;let newCol = [];for (let col = 0; col < 4; col++) {const tile = grid[row][col];if (tile.textContent === '') continue;let currentValue = parseInt(tile.textContent);if (newCol.length === 0) {newCol.push(currentValue);} else {const lastValue = newCol[newCol.length - 1];if (lastValue === currentValue &&!merged) {newCol[newCol.length - 1] = currentValue * 2;score += currentValue * 2;merged = true;} else {newCol.push(currentValue);merged = false;}}}for (let col = 0; col < 4; col++) {if (col < newCol.length) {addTile(row, col, newCol[col]);} else {removeTile(row, col);}}}addRandomTile();}function moveRight() {for (let row = 0; row < 4; row++) {let merged = false;let newCol = [];for (let col = 3; col >= 0; col--) {const tile = grid[row][col];if (tile.textContent === '') continue;let currentValue = parseInt(tile.textContent);if (newCol.length === 0) {newCol.push(currentValue);} else {const lastValue = newCol[newCol.length - 1];if (lastValue === currentValue &&!merged) {newCol[newCol.length - 1] = currentValue * 2;score += currentValue * 2;merged = true;} else {newCol.push(currentValue);merged = false;}}}for (let col = 3; col >= 0; col--) {if (3 - col < newCol.length) {addTile(row, col, newCol[3 - col]);} else {removeTile(row, col);}}}addRandomTile();}function checkGameEnd() {// 检查是否无法再进行移动let canMove = false;for (let row = 0; row < 4; row++) {for (let col = 0; col < 4; col++) {const tile = grid[row][col];if (tile.textContent === '') {canMove = true;break;}if (row > 0 && parseInt(grid[row - 1][col].textContent) === parseInt(tile.textContent)) {canMove = true;break;}if (row < 3 && parseInt(grid[row + 1][col].textContent) === parseInt(tile.textContent)) {canMove = true;break;}if (col > 0 && parseInt(grid[row][col - 1].textContent) === parseInt(tile.textContent)) {canMove = true;break;}if (col < 3 && parseInt(grid[row][col + 1].textContent) === parseInt(tile.textContent)) {canMove = true;break;}}if (canMove) break;}if (!canMove) {alert('游戏结束！你的得分是：' + score);}}document.addEventListener('keydown', (e) => {switch (e.key) {case 'ArrowUp':moveUp();break;case 'ArrowDown':moveDown();break;case 'ArrowLeft':moveLeft();break;case 'ArrowRight':moveRight();break;}});createGrid();addRandomTile();addRandomTile();</script>
</body></html>相关文章：
HTML2048小游戏
源代码在效果图后面 效果图 源代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>2048 Game&l…...
为 android编译 luajit库、 交叉编译
时间：20200719 本机环境：iMac2017 macOS11.4 参考: 官方的文档：Use the NDK with other build systems 写在前边：交叉编译跟普通编译类似，无非是利用特殊的编译器、链接器生成动态或静态库; make 本质上是按照 Make…...
【音视频】音频重采样
文章目录 前言音频重采样的基本概念音频重采样的原因1. 设备兼容性2. 文件大小和带宽3. 音质优化4. 标准化和规范5. 多媒体同步6. 降低处理负载重采样的注意事项 总结 前言 音频重采样是指将音频文件的采样率转换成另一种采样率的过程。这在音频处理和传输中是一个常见且重要的…...
卷积神经网络学习问题总结
问题一： 深度学习中的损失函数和应用场景 回归任务： 均方误差函数（MSE）适用于回归任务，如预测房价、预测股票价格等。 import torch.nn as nn loss_fn nn.MSELoss() 分类任务： 交叉熵损失函数&…...
嵌入式面试总结
C语言中struct和union的区别 struct和union都是常见的复合结构。 结构体和联合体虽然都是由多个不同的数据类型成员组成的，但不同之处在于联合体中所有成员共用一块地址空间，即联合体只存放了一个被选中的成员，结构体中所有成员占用空间是累…...
超简单安装指定版本的clickhouse
超简单安装指定版本的clickhouse 命令执行shell脚本 idea连接 命令执行 参考官网 # 下载脚本 wget https://raw.githubusercontent.com/183461750/doc-record/d988dced891d70b23c153a3bbfecee67902a3757/middleware/data/clickhouse/clickhouse-install.sh # 执行安装脚本(中…...
FlowUs横向对比几款笔记应用的优势所在
FlowUs作为一个本土化的生产力工具，在中国市场的环境下相对于Notion有其独特的优势，尤其是在稳定性和模板适应性方面。 尽管Notion在笔记和生产力工具领域享有极高的声誉，拥有着诸多创新功能和强大的生态系统，但它并不一定适合每…...
收银系统源码-千呼新零售收银视频介绍
千呼新零售2.0系统是零售行业连锁店一体化收银系统，包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体，线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…...
从Catalog说到拜义父-《分析模式》漫谈11
DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 “Analysis Patterns”的Preface（前言）有这么一句： This book is thus a catalog, rather than a book to be read from cover to cover. 2004&am…...
Qt判定鼠标是否在该多边形的线条上
要判断鼠标是否在由QPainterPath或一系列QPointF点定义的多边形的线条上，你可以使用以下步骤： 获取鼠标当前位置：在鼠标事件中，使用QMouseEvent的pos()方法获取鼠标的当前位置。 检查点与线段的距离：遍历多边形的每条…...
【笔记：3D航路规划算法】一、随机搜索锚点（python实现，讲解思路）
目录 关键概念3D路径规划算法1. A*算法2. 快速随机锚点1. 初始化：2. 实例化搜索算法：3. 路径生成：4. 绘制图像： 3D路径规划是在三维空间中寻找从起点到终点的最短或最优路径的一种技术。它广泛应用于无人机导航、机器人运动规划、…...
ubuntu如何彻底卸载android studio？
最新版的ubuntu已经使用snap进行软件管理了，我用snap-store安装android studio以后，在安装plugin的时候强制退出后，直接再也进不去了，启动就报错。 先后进行了如下操作依然不行： 1 重装snap-store和android studio都…...
使用Windows Linux 子系统安装 Tensorflow，并使用GPU环境
在Microsoft Store商店安装Ubuntu 20.04 使用 nvidia-smi 命令查看GPU信息，查看支持的CUDA版本，这里最高支持11.7 安装cuda工具集 进入官网：CUDA Toolkit Archive | NVIDIA Developer，现在对应版本，点击 配置平台&…...
C++案例三：猜数字游戏
文章目录 介绍代码说明设置随机种子生成随机数猜测循环完整代码运行效果介绍 猜数字游戏是一个经典的编程练习，通过这个案例可以学习到基本的输入输出、随机数生成、条件判断和循环结构。 代码说明 设置随机种子 std::srand(static_cast<unsigned int>(std::time(nu…...
LNMP架构部署及应用
部署LNMP架构流程 1.安装Nginx（上传软件包，执行脚本） yum -y install pcre-devel zlib-devel gcc gcc useradd -M -s /sbin/nologin nginx tar zxf nginx-1.12.0.tar.gz cd nginx-1.12.0 ./configure --prefix/usr/local/nginx --usernginx…...
【医学影像】X86+FPGA:支持AI医学影像设备应用的工控主板，赋能CT、MRI、X线、超声等医学影像设备
支持AI医学影像设备应用的工控主板 在我国人口老龄化问题不断加剧，对影像诊断需求持续增长，和国家利好高端医学影像市场发展的系列法规和政策接连出台的大环境下，AI医学影像设备产业迎来发展黄金期。紧跟发展大势，基于12/13代 In…...
【PostgreSQL】PostgreSQL简史
博主介绍：✌全网粉丝20W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
Linux的热插拔UDEV机制和守护进程
目录 一、Linux的热插拔UDEV机制 二、守护进程 2.1 守护进程概念和基本特点： 2.2 显示进程信息： 2.3 守护进程和后台进程的区别： 2.4 创建守护进程的步骤和守护进程的特征： 2.4.1 创建守护进程的步骤： 2.4.2 守…...
laravel框架基础通识-新手
常用目录及其解析 routes 该目录为路由目录 一般根据api uri可以反向查找对应路由及其controller，目录下的文件名一般和url的第一级对应为了规范，然后根据根据里面具体分组和别名对应拼接对应路由url，后面对应的则是controller，…...
c++ extern 关键字
C中的extern关键字和跨语言互操作 变量的声明与定义 extern关键字用于声明在另一个翻译单元（文件）中定义的变量或函数。通过extern关键字，可以在多个文件中访问全局变量或函数。 变量声明示例 文件：main.cpp #include <io…...
Meta KDD Cup 2024 CRAG: Comphrehensive RAG Benchmark参赛指南（写了一半跑去改大论文了所以没正式参赛）
诸神缄默不语-个人CSDN博文目录 因为比赛过程正好和我毕业答辩的时间段高度重合，所以我……最后其实还是相当于没有成功参赛。 呃反正现在已经咕咕咕了，就把当时写了一半（一小半）的参赛指南发一下吧。 官网：AIcrowd …...
系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划（ERP）-解读
系统架构设计师教程 第3章 信息系统基础知识-3.7 企业资源规划（ERP） 3.7.1 企业资源规划的概念3.7.2 企业资源规划的结构3.7.2.1 生产预测3.7.2.2 销售管理（计划）3.7.2.3 经营计划（生产计划大纲）3.7.2.4 …...
windows实现自动化按键
1.选择目标窗口 获取窗口句柄 void KeyPresser::selectWindow() {SetWinEventHook(EVENT_SYSTEM_FOREGROUND, EVENT_SYSTEM_FOREGROUND, NULL, WinEventProc, 0, 0, WINEVENT_OUTOFCONTEXT);selectedWindowLabel->setText("请点击目标窗口..."); }void CALLBACK …...
阿里云 https证书部署
一.申请证书 二.查看状态 查看状态，已签发是完成了申请证书 三.部署 我在nginx服务器上部署 具体操作链接:阿里云文档 修改前 修改后 四.重启ngnix 五.验证是否成功 在浏览器输入域名查看...
DX-10A信号继电器 柜内安装，板前接线 约瑟JOSEF
DX-10型闪光信号继电器型号： DX-10A闪光信号继电器； DX-10B闪光信号继电器； DX-10C闪光信号继电器; 用途 DX-10 闪光继电器用于电力系统断路器的位置信号灯不对应闪光，该继电器是为了适应当前推广使用发光二极管节能指示灯而…...
芯片光刻后的晶片多层组合构成的吗
是的，芯片（尤其是集成电路芯片）确实是通过光刻后的晶片多层组合构成的。在芯片制造过程中，光刻是一个至关重要的步骤，用于在硅片（或称为晶片）上刻画出精确的电路图案。然而，一个完整…...
OpenGL-ES 学习(7) ---- VBO EBO 和 VAO
目录 VBO(Vertex Buffer Object)EBO(Element Buffer Object)VAO(Vertex Array Object) VBO(Vertex Buffer Object) EBO(Element Buffer Object) VBO(Vertex Buffer Object) 实际是指顶点缓冲器对象 在 opengl-es 2.0 的编程中，用于绘制图元的顶点数据是从 CPU 传…...
github如何实现和gitlab的同步
要实现 GitHub 和 GitLab 之间的同步，你可以使用以下几种方法。这里介绍两种常用的方法：使用 GitLab CI/CD 和使用镜像仓库。 方法1：使用 GitLab CI/CD 通过 GitLab CI/CD，可以在每次推送到 GitLab 时自动同步到 GitHub。以下是…...
内网隧道——隧道技术基础
文章目录 一、正向连接与反向连接1.1 正向连接1.2 反向连接 二、端口转发三、端口映射四、端口复用五、代理和隧道的区别六、常见隧道穿透分类 环境： kali：192.168.92.6，MSF v6.3.25 win7：192.168.92.7 一、正向连接与反向连接 1…...
NAS新品“翻车”后，绿联科技要上市了
在消费电子市场回暖的东风中，又一消费电子知名企业登陆A股。 近日，深圳市绿联科技股份有限公司（下称“绿联科技”）开启申购，将在创业板上市。本次上市，绿联科技的发行价为21.21元/股，发行数量为…...
18款禁用软件app网站入口/全网推广的方式有哪些
2019独角兽企业重金招聘Python工程师标准>>> 7.1 指标和测量 7.1.1 DNS 查找时间 发起连接第一步是DNS查找。如果你的应用严重依赖网络操作，DNS的查找时间会使应用变慢。 查找时间与主DNS服务器的性能成函数关系。最终的连接时间与追踪到目的IP地址的路由…...
国内做赌博网站代理怎么样/全网优化推广
下载地址：https://download.csdn.net/download/qq_41570658/15766712 写在最后： 微信小程序源码-合集6 https://blog.csdn.net/qq_41570658/article/details/114752580 微信小程序源码-合集5 https://blog.csdn.net/qq_41570658/article/details/11475…...
如何做宣传推广的网站链接/百度竞价托管运营
1.对于莫名的错误，可点击的的端子短接， 输入 gradlew compileDebug --stacktrace 使用命令进行错误查看。 logcat中，运行日志信息，终端，软件项目的命令行终端，建立，软件构建的信息 2.命令E&…...
郑州做的比较好网站公司/seo攻略
c语言上机填空题.DOC1. 在考生目录下，有Modify.c程序，该程序中 N 是根据程序功能需要填充部分，请完成程序填充(注意不得加行、减行、加句、减句，否则后果自负)。 该程序功能输入m、n(要求输入数均大于0)，输出它们的最大…...
那个大学业做网站/官网排名优化方案
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去…...
企业网站建设免费/山东百度推广
js web开发截至2012年8月的一个非常有趣JavaScript Web开发列表。 您可以在此集合中找到一些以前从未使用过的最酷JavaScript创建方法。 玩得开心！ 相关文章： 2012年7月版 2012年6月版 2012年5月版 Blogger多图库显示引擎 这是一个很棒的多画廊显示…...