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

H5+JS 4096小游戏

news 2026/1/22 4:10:08

主要实现

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/1/20 3:14:06

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/20 3:51:17

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/20 16:43:56

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/21 7:19:26

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/15 6:36:02

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38