当前位置： 首页 > news >正文

H5+JS 4096小游戏

news 2025/9/16 10:59:52

主要实现

1.使用WASD或方向按钮控制游戏
2.最高值4096，玩到4096视为胜利
3.随机生成2、4、8方块
4.移动方块
5.合并方块

JS代码干了什么

初始化游戏界面：创建游戏板和控制按钮。
定义游戏相关变量：如棋盘大小、棋盘状态、得分等。
初始化棋盘：创建棋盘元素并添加到页面。
生成新的方块：根据一定概率生成 2、4 或 8 的方块。
更新棋盘显示：根据方块的值设置背景颜色。移动方块：根据用户操作或键盘按键，实现方块的上、下、左、右移动。
合并方块：在移动过程中，相同值的方块会合并。
处理游戏结束：判断是否无法再进行移动。
监听用户操作：通过点击按钮或键盘按键触发移动操作。

HTML布局

  `game-container`游戏板块|`game-board`游戏棋盘板块         |`controls`游戏控制按钮版块

不同数字的配色

数字颜色
2#eee4da
4#ede0c8
8#f2b179
16#f59563
32#f67c5f
64#f65e3b
128#edcf72
256#edcc61
512#edc850
1024#edc53f
2048#edc22e
4096#ed9e1f

效果图

无描述内容

源代码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>4096 Game</title><style>
* {box-sizing: border-box;margin: 0;padding: 0;font-family: 'Arial', sans-serif;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #faf8ef;}#game-container {display: flex;flex-direction: column;align-items: center;}#game-board {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 1fr);gap: 10px;background-color: #bbada0;padding: 10px;border-radius: 10px;margin-bottom: 20px;}.tile {width: 80px;height: 80px;background-color: #cdc1b4;display: flex;justify-content: center;align-items: center;font-size: 24px;border-radius: 10px;transition: all 0.2s ease-in-out;}#controls {display: flex;gap: 10px;}button {width: 60px;height: 60px;font-size: 20px;border-radius: 10px;background-color: #8f7a66;color: white;border: none;cursor: pointer;}button:hover {background-color: #9f8b76;}</style>
</head><body><div id="game-container"><div id="game-board"></div><div id="controls"><button id="up">W</button><button id="left">A</button><button id="down">S</button><button id="right">D</button></div></div><script>document.addEventListener('DOMContentLoaded', () => {const boardSize = 4;let board = [];let score = 0;const gameBoard = document.getElementById('game-board');const buttons = {up: document.getElementById('up'),down: document.getElementById('down'),left: document.getElementById('left'),right: document.getElementById('right')};function initBoard() {for (let i = 0; i < boardSize * boardSize; i++) {const tile = document.createElement('div');tile.classList.add('tile');gameBoard.appendChild(tile);}board = Array.from(document.querySelectorAll('.tile'));generateTile();generateTile();updateBoard();}function generateTile() {let emptyTiles = board.filter(tile =>!tile.textContent);if (emptyTiles.length > 0) {let randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];let randomValue = Math.random() < 0.9? '2' : Math.random() < 0.1? '4' : '8';randomTile.textContent = randomValue;}}function updateBoard() {board.forEach(tile => {const value = tile.textContent;tile.style.backgroundColor = getTileColor(value);});}function getTileColor(value) {switch (value) {case '2':return '#eee4da';case '4':return '#ede0c8';case '8':return '#f2b179';case '16':return '#f59563';case '32':return '#f67c5f';case '64':return '#f65e3b';case '128':return '#edcf72';case '256':return '#edcc61';case '512':return '#edc850';case '1024':return '#edc53f';case '2048':return '#edc22e';case '4096':return '#ed9e1f';default:return '#cdc1b4';}}function move(direction) {switch (direction) {case 'up':moveUp();break;case 'down':moveDown();break;case 'left':moveLeft();break;case 'right':moveRight();break;}generateTile();updateBoard();}function moveUp() {for (let i = 0; i < boardSize; i++) {let column = [];for (let j = 0; j < boardSize; j++) {column.push(board[i + j * boardSize].textContent);}let newColumn = slideTiles(column);for (let j = 0; j < boardSize; j++) {board[i + j * boardSize].textContent = newColumn[j];}}}function moveDown() {for (let i = 0; i < boardSize; i++) {let column = [];for (let j = 0; j < boardSize; j++) {column.push(board[i + j * boardSize].textContent);}let newColumn = slideTiles(column.reverse()).reverse();for (let j = 0; j < boardSize; j++) {board[i + j * boardSize].textContent = newColumn[j];}}}function moveLeft() {for (let i = 0; i < boardSize; i++) {let row = [];for (let j = 0; j < boardSize; j++) {row.push(board[i * boardSize + j].textContent);}let newRow = slideTiles(row);for (let j = 0; j < boardSize; j++) {board[i * boardSize + j].textContent = newRow[j];}}}function moveRight() {for (let i = 0; i < boardSize; i++) {let row = [];for (let j = 0; j < boardSize; j++) {row.push(board[i * boardSize + j].textContent);}let newRow = slideTiles(row.reverse()).reverse();for (let j = 0; j < boardSize; j++) {board[i * boardSize + j].textContent = newRow[j];}}}function slideTiles(tiles) {let newTiles = tiles.filter(tile => tile);for (let i = 0; i < newTiles.length - 1; i++) {if (newTiles[i] === newTiles[i + 1]) {newTiles[i] = (parseInt(newTiles[i]) * 2).toString();newTiles[i + 1] = '';}}newTiles = newTiles.filter(tile => tile);while (newTiles.length < boardSize) {newTiles.push('');}return newTiles;}buttons.up.addEventListener('click', () => move('up'));buttons.down.addEventListener('click', () => move('down'));buttons.left.addEventListener('click', () => move('left'));buttons.right.addEventListener('click', () => move('right'));document.addEventListener('keydown', (e) => {switch (e.key) {case 'w':move('up');break;case's':move('down');break;case 'a':move('left');break;case 'd':move('right');break;}});initBoard();});</script>
</body></html>

相关文章：

H5+JS 4096小游戏

主要实现 1.使用WASD或方向按钮控制游戏 2.最高值4096&#xff0c;玩到4096视为胜利 3.随机生成2、4、8方块 4.移动方块 5.合并方块 JS代码干了什么 初始化游戏界面&#xff1a;创建游戏板和控制按钮。 定义游戏相关变量&#xff1a;如棋盘大小、棋盘状态、得分等。 初始化棋…...

编程日记 2024/8/7 1:04:58

常见中间件漏洞（二、WebLogin合集）

目录 二、WebLogic Weblogic介绍 2.1 后台弱口令GetShell 漏洞描述 影响范围 环境搭建 漏洞复现 2.2 CVE-2017-3506 漏洞描述 影响版本 环境搭建 漏洞复现 2.3 CVE-2019-2725 漏洞描述 影响版本 环境搭建 漏洞复现 2.4 CVE-2018-2628 漏洞描述 漏洞影响 环…...

编程日记 2024/8/7 1:03:54

LeetCode LCR147.最小栈

LeetCode LCR147.最小栈 思路&#x1f914;&#xff1a; 建立两个栈&#xff0c;一个栈正常入栈出栈&#xff0c;一个栈只用于出入最小数&#xff0c;当push值小于minst栈顶才入栈&#xff0c;当pop值等于minst栈顶才出栈。 代码&#x1f50e;&#xff1a; class MinStack { pu…...

编程日记 2024/8/7 1:01:50

目标检测的算法有哪些

目标检测是计算机视觉领域的一个重要任务&#xff0c;它涉及识别图像或视频中的对象&#xff0c;并确定它们的位置和类别。随着深度学习的发展&#xff0c;出现了许多高效且准确的目标检测算法。以下是一些主要的目标检测算法&#xff1a; 两阶段检测器&#xff08;Region-bas…...

编程日记 2024/8/7 0:57:42

HDU多校-交通管控

Problem - 7498 (hdu.edu.cn) 直接dfs显然不行&#xff0c;达到了2^500&#xff0c;那么我们可以考虑枚举所有红绿灯的状态&#xff0c;总共有三种状态&#xff0c;k的范围小于等于10&#xff0c;因此所有状态数为3^10不会超&#xff0c;所以通过三进制状压dp即可完成&#xf…...

编程日记 2024/8/7 0:56:42

【C++】string类

&#x1f680;个人主页&#xff1a;奋斗的小羊 &#x1f680;所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 前言&#x1f4a5;1、标准库中的string类&#x1f4a5;1.1string类的常用接口&#x1f4a5;string类对象常见…...

编程日记 2024/8/7 0:54:39

Python中各类常用内置转换函数

Python中各类常用内置转换函数 函数功能说明int(x)将 x 转换为整数类型float(x)将 x 转换为浮点数类型str(x)将 x 转换为字符串repr(x)将 x 转换为表达式字符串eval(str)计算在字符串中的有效Python表达式&#xff0c;并返回一个对象list(s)将序列 s 转换为一个列表tuple(s)将…...

编程日记 2024/8/7 0:53:38

LangChain与JWT：构建安全认证的桥梁

LangChain与JWT&#xff1a;构建安全认证的桥梁 在现代Web应用和微服务架构中&#xff0c;安全认证是保护数据和资源访问的关键。JSON Web Tokens&#xff08;JWT&#xff09;作为一种广泛使用的开放标准&#xff0c;为安全传输提供了一种简洁而自包含的方式。LangChain&#…...

编程日记 2024/8/7 0:51:36

ai写作软件哪个好用？怎么帮自己找到好用的ai写作软件？

ai写作软件的出现是随着ai技术的迅猛发展下的产物&#xff0c;它主要应用于内容创作领域&#xff0c;可以是文章内容创作、视频内容创作、绘图创作等等&#xff0c;不同的ai写作软件可能应用的领域不同&#xff0c;但也有的ai写作软件应用的范围却是比较广。今天小编主要来跟大…...

编程日记 2024/8/7 0:50:35

关于gunicorn+flask+docker模型的高并发部署

这是一个结合了现代Web技术的高效部署方案&#xff0c;旨在提高Web应用的并发处理能力和可扩展性。以下是对该模型高并发部署的详细解析&#xff1a; 一、模型概述 GunicornFlaskDocker模型结合了Flask的轻量级和灵活性、Gunicorn的高并发处理能力以及Docker的容器化优势&…...

编程日记 2024/8/7 0:49:33

35. 搜索插入位置

给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2: 输入:…...

编程日记 2024/8/7 0:47:31

ViT论文详解

文章目录 前言一、ViT理论二、模型结构三、实验结果总结 前言 ViT是谷歌团队在2021年3月发表的一篇论文&#xff0c;论文全称是《AN IMAGE IS WORTH 16X16 WORDS:TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE》一张图片分成16x16大小的区域&#xff1a;使用Transformer进行按比…...

编程日记 2024/8/7 0:46:30

常见中间件漏洞（三、Jboss合集）

目录 三、Jboss Jboss介绍 3.1 CVE-2015-7501 漏洞介绍 影响范围 环境搭建 漏洞复现 3.2 CVE-2017-7504 漏洞介绍 影响范围 环境搭建 漏洞复现 3.3 CVE-2017-12149 漏洞简述 漏洞范围 漏洞复现 3.4 Administration Console弱囗令 漏洞描述 影响版本 环境搭建…...

编程日记 2024/8/7 0:45:28

ios如何动态添加控件及动画

在ViewController中添加 // // ViewController.m // iosstudy2024 // // Created by figo on 2024/8/5. //#import "ViewController.h"interface ViewController () property (weak, nonatomic) IBOutlet UIButton *xigua; - (IBAction)xigua:(id)sender;endimpl…...

编程日记 2024/8/7 0:42:25

【数学建模】——【A题 信用风险识别问题】全面解析

目录 1.题目 2.解答分析 问题1&#xff1a;指标筛选 1.1 问题背景 1.2 数据预处理 1.3 特征选择方法 1.4 多重共线性检测 1.5 实现步骤 问题2&#xff1a;信用评分模型 2.1 问题背景 2.2 数据分割 2.3 处理不平衡数据 2.4 模型选择与理由 问题3&#xff1a;模型对…...

编程日记 2024/8/7 0:37:19

javascript：检测图片的宽高

1 方案描述 JavaScript提供了非常方便的FileReader和Image对象&#xff0c;可以帮助我们轻松实现这个功能。具体步骤如下&#xff1a; 获取文件输入框&#xff1a;首先&#xff0c;我们需要获取到用户选择的文件。读取文件内容&#xff1a;然后&#xff0c;通过FileReader对象…...

编程日记 2024/8/7 0:34:17

机械学习—零基础学习日志（高数23——无穷小运算）

零基础为了学人工智能&#xff0c;真的开始复习高数 这段时间&#xff0c;把张宇老师讲解考研的第一部分基本全部学习完毕了。 这里把第一部分的内容最后汇总一下。 无穷小运算——吸收律 这里展示一些无穷小的具体计算思路 无穷小运算——计算方法 泰勒展开的原则 夹逼准则…...

编程日记 2024/8/7 0:33:14

一个网络上计算机的通信

一台计算机上多个进程间的通信方式有&#xff1a;管道、共享内存、信号量、消息队列。如果不同的计算机上多个进程间通信&#xff0c;即通信的进程在不同的计算机上&#xff0c;需要用到网络相关的知识。 那么两台计算机通信需要解决哪些问题&#xff1f; 我们来回顾一下计算机…...

编程日记 2024/8/7 0:32:13

C语言基础题：吃冰棍（C语言版）

1.题目描述 机器猫喜欢吃冰棍。 买一根冰棍&#xff0c;吃完了会剩一个木棒;每三个木棒可以兑换一个冰棍。兑换出来的冰棍&#xff0c;吃完之后也能剩下一个木棒。 所以&#xff0c;如果机器猫买了5根冰棍&#xff0c;他可以吃完之后得到5个木棒;拿3个木棒兑换1根冰棍&#xff…...

编程日记 2024/8/7 0:31:12

C++中，vector、deque、list、set、multiset、unordered_set和unordered_multiset容器类的总结

最近用set比较多&#xff0c;复习一下基础。 在C中&#xff0c;vector、deque、list、set、multiset、unordered_set和unordered_multiset都是容器类&#xff0c;但它们有不同的特点和用途。下面是对它们的区别和示例说明&#xff1a; 1. vector 特点: 动态数组&#xff0c;…...

编程日记 2024/8/7 0:30:11

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/9/9 10:12:45

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/10 13:55:45

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/9/14 20:16:58

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/7/19 3:59:22

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/9/5 8:48:52

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/9/3 15:58:14

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/11 23:31:22

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2025/9/13 17:32:53

python打卡day49@浙大疏锦行

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...

编程新知 2025/9/5 19:43:47