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

H5+JS 4096小游戏

news 文章来源：https://blog.csdn.net/w11111xxxl/article/details/140834184 2025/5/3 13:37:27

主要实现

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

Python处理Redis

操作Redis redis也是基于tcp通信的&#xff0c;所以我们可以直接通过socket来做 Redis通信过程 简单使用 redis-cli.exe -h192.168.56.188 auth 123456 set name myredis get name lindex students 0 # 查看students列的第一条数据核心协议体 *2 # 表示下述的指令由2个字符…...

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

nodejs多版本随心切换-windows

nodejs多版本控制 1. 安装 nvm github下载地址 不需要卸载已安装的nodejs&#xff0c;安装时会让你选择nodejs的位置&#xff0c;可修改为你已经安装的路径&#xff0c;会自动搜索已安装版本&#xff0c;并进行弹窗询问&#xff0c;选择托管即可 2. 修改配置文件 在 nvm 安装…...

编程日记 2024/8/7 0:24:05

json文件格式

json文件格式 格式介绍1格式介绍2格式3 格式介绍1 格式介绍2 格式3 参考地址...

编程日记 2024/8/7 0:22:03

日撸Java三百行（day15：栈的应用之括号匹配）

目录 一、栈的括号匹配 二、代码实现 1.方法创建 2.数据测试 3.完整的程序代码 总结 一、栈的括号匹配 要完成今天的任务&#xff0c;需要先来了解一下什么是栈的括号匹配。首先&#xff0c;顾名思义&#xff0c;括号匹配就是指将一对括号匹配起来&#xff0c;我们给定一…...

编程日记 2024/8/7 0:21:02

Oracle-OracleConnector

提示&#xff1a;OracleConnector 类是 Debezium 中用于与 Oracle 数据库交互的一个连接器组件 文章目录 前言一、核心功能二、代码分析总结 前言 提示&#xff1a;OracleConnector 类负责配置、启动、管理和验证与 Oracle 数据库的连接&#xff0c;并为后续的数据捕获任务准备…...

编程日记 2024/8/7 0:20:01

『 Linux 』线程池与 POSIX 线程的封装编码实现

文章目录 线程池概念线程池的编码实现线程池的测试参考代码 线程的封装使用测试封装后的线程参考代码 线程池概念 池化技术是一种资源管理方法,通过预先创建和管理一组资源以便在需要使用时快速分配这些资源; 线程池是池化技术的一种典型应用; 资源分配 在线程池中预先创建一定…...

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

【C++】————哈希表

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年8月6日 前言&#xff1a; 在计算机科学的广袤世界中&#xff0c;数据结构犹如基石&#xff0c;支撑着各种高效算法的构建与运行。而哈希表&#xff08;Hash Table&#xff09;&#…...

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

前端学习AI历程

AI基本概念tensorflow入门conda搭建环境&#xff0c;pycham使用训练自己的第一个模型AI目前前端方便入手的几个方向 素材图片库图像识别&#xff0c;在线学习低代码应用智能客服 获取数据集 roboflowkagglecocomakesense&#xff08;用于打标&#xff09; 认识yolo两个简单小应…...

编程日记 2024/8/7 0:16:58

常见中间件漏洞复现之【Tomcat】！

Tomcat介绍 tomcat是⼀个开源⽽且免费的jsp服务器&#xff0c;默认端⼝ : 8080&#xff0c;属于轻量级应⽤服务器。它可以实现 JavaWeb程序的装载&#xff0c;是配置JSP&#xff08;Java Server Page&#xff09;和JAVA系统必备的⼀款环境。 在历史上也披露出来了很多的漏洞 …...

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

C++并发编程(一)：线程基础

简介 本文学习的是 b 站 up 恋恋风辰的并发编程教学视频做的一些笔记补充。 教程视频链接如下&#xff1a;线程基础&#xff1a;视频教程 文档链接如下&#xff1a;线程基础&#xff1a;笔记文档 理论上直接看 up 提供的笔记文档即可&#xff0c;我这里主要是记录一些我自己…...

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