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

基于 HTML5 Canvas 制作一个精美的 2048 小游戏--day2

news 2025/11/16 3:19:02

为了使 2048 游戏的设计更加美观和用户友好，我们可以进行以下几项优化：

  1. 改善颜色方案：使用更温馨的颜色组合。
  2. 添加动画效果：为方块的移动和合并添加渐变效果。
  3. 优化分数显示：在分数增加时使用动画效果。

以下是改进后的代码示例：
在这里插入图片描述

1. CSS 样式（style.css）

body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #faf8ef;font-family: 'Arial', sans-serif;
}.container {position: relative;width: 420px; /* 自适应游戏板的总宽度 */
}canvas {border: 2px solid #bbada0;background-color: #eee4da;transition: background-color 0.3s ease; /* 过渡效果 */
}.score {position: absolute;top: -40px; /* 根据需要调整分数的位置 */right: 10px;font-size: 24px;color: #776e65;font-weight: bold;
}

2. 更新 HTML（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2048 游戏</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><canvas id="gameCanvas"></canvas><div class="score" id="scoreDisplay">Score: 0</div> <!-- 分数显示 --></div><script src="script.js"></script>
</body>
</html>

3. JavaScript 动画和动态效果（script.js）

在 JavaScript 中，我们将实现方块的移动和合并时的动画效果。我们也会在分数更新时添加动画效果。

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");const gridSize = 4;
const tileSize = 100;
canvas.width = gridSize * tileSize;
canvas.height = gridSize * tileSize;let board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0));
let score = 0;initBoard();function initBoard() {addRandomTile();addRandomTile();drawBoard();
}function drawBoard() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let r = 0; r < gridSize; r++) {for (let c = 0; c < gridSize; c++) {drawTile(r, c);}}updateScoreDisplay();
}function drawTile(r, c) {const value = board[r][c];ctx.fillStyle = value !== 0 ? getTileColor(value) : "#ccc0b3";ctx.fillRect(c * tileSize + 5,r * tileSize + 5,tileSize - 10,tileSize - 10); // 为方块添加间距if (value !== 0) {ctx.fillStyle = getTextColor(value);ctx.font = "bold 35px Arial";ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.fillText(value,c * tileSize + tileSize / 2,r * tileSize + tileSize / 2);}
}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 "#f67c5f";case 128:return "#edcf72";case 256:return "#edcc61";case 512:return "#edc850";case 1024:return "#edc53f";case 2048:return "#edc22e";default:return "#ccc0b3";}
}function getTextColor(value) {return value <= 4 ? "#776e65" : "#ffffff"; // 小于等于4的数字使用深色，大于4的使用白色
}function addRandomTile() {let emptyCells = [];for (let r = 0; r < gridSize; r++) {for (let c = 0; c < gridSize; c++) {if (board[r][c] === 0) {emptyCells.push({ r, c });}}}if (emptyCells.length) {const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)];board[r][c] = Math.random() < 0.9 ? 2 : 4;}
}document.addEventListener("keydown", (event) => {let moved = false;switch (event.key) {case "ArrowUp":moved = moveUp();break;case "ArrowDown":moved = moveDown();break;case "ArrowLeft":moved = moveLeft();break;case "ArrowRight":moved = moveRight();break;}if (moved) {addRandomTile();drawBoard();if (checkGameOver()) {showGameOver();}}
});function canMergeTiles(r1, c1, r2, c2) {return board[r1][c1] !== 0 && board[r1][c1] === board[r2][c2];
}function moveUp() {let moved = false;for (let c = 0; c < gridSize; c++) {for (let r = 1; r < gridSize; r++) {if (board[r][c] !== 0) {let targetRow = r;while (targetRow > 0 && board[targetRow - 1][c] === 0) {board[targetRow - 1][c] = board[targetRow][c];board[targetRow][c] = 0;targetRow--;moved = true;}if (targetRow > 0 && canMergeTiles(targetRow - 1, c, targetRow, c)) {board[targetRow - 1][c] *= 2;score += board[targetRow - 1][c];board[targetRow][c] = 0;moved = true;}}}}return moved;
}function moveDown() {let moved = false;for (let c = 0; c < gridSize; c++) {for (let r = gridSize - 2; r >= 0; r--) {if (board[r][c] !== 0) {let targetRow = r;while (targetRow < gridSize - 1 && board[targetRow + 1][c] === 0) {board[targetRow + 1][c] = board[targetRow][c];board[targetRow][c] = 0;targetRow++;moved = true;}if (targetRow < gridSize - 1 &&canMergeTiles(targetRow + 1, c, targetRow, c)) {board[targetRow + 1][c] *= 2;score += board[targetRow + 1][c];board[targetRow][c] = 0;moved = true;}}}}return moved;
}function moveLeft() {let moved = false;for (let r = 0; r < gridSize; r++) {for (let c = 1; c < gridSize; c++) {if (board[r][c] !== 0) {let targetCol = c;while (targetCol > 0 && board[r][targetCol - 1] === 0) {board[r][targetCol - 1] = board[r][targetCol];board[r][targetCol] = 0;targetCol--;moved = true;}if (targetCol > 0 && canMergeTiles(r, targetCol - 1, r, targetCol)) {board[r][targetCol - 1] *= 2;score += board[r][targetCol - 1];board[r][targetCol] = 0;moved = true;}}}}return moved;
}function moveRight() {let moved = false;for (let r = 0; r < gridSize; r++) {for (let c = gridSize - 2; c >= 0; c--) {if (board[r][c] !== 0) {let targetCol = c;while (targetCol < gridSize - 1 && board[r][targetCol + 1] === 0) {board[r][targetCol + 1] = board[r][targetCol];board[r][targetCol] = 0;targetCol++;moved = true;}if (targetCol < gridSize - 1 &&canMergeTiles(r, targetCol + 1, r, targetCol)) {board[r][targetCol + 1] *= 2;score += board[r][targetCol + 1];board[r][targetCol] = 0;moved = true;}}}}return moved;
}function checkGameOver() {for (let r = 0; r < gridSize; r++) {for (let c = 0; c < gridSize; c++) {if (board[r][c] === 0) {return false; // 还有空格}if (c < gridSize - 1 && canMergeTiles(r, c, r, c + 1)) {return false; // 可以合并}if (r < gridSize - 1 && canMergeTiles(r, c, r + 1, c)) {return false; // 可以合并}}}return true; // 游戏结束
}function updateScoreDisplay() {const scoreDisplay = document.getElementById("scoreDisplay");scoreDisplay.innerText = "Score: " + score;
}function showGameOver() {alert("游戏结束！您的得分是：" + score);
}

动画效果

  1. 移动与合并动画：我们可以使用 CSS 的 transition 属性来增加方块变化过程中的平滑感。这种效果可以在 drawTile 函数中体现，例如更改方块的背景色时使用过渡效果。
  2. 分数动画：我们可以在分数增加时使用淡入或渐变效果，以增加分数的视觉吸引力。这可以通过添加相关的 CSS 来实现，例如淡入特效，可以通过 JavaScript 调整 scoreDisplay 的样式。

相关文章：

基于 HTML5 Canvas 制作一个精美的 2048 小游戏--day2

为了使 2048 游戏的设计更加美观和用户友好&#xff0c;我们可以进行以下几项优化&#xff1a; 改善颜色方案&#xff1a;使用更温馨的颜色组合。添加动画效果&#xff1a;为方块的移动和合并添加渐变效果。优化分数显示&#xff1a;在分数增加时使用动画效果。 以下是改进后…...

编程日记 2025/1/20 1:08:27

Django框架：python web开发

1.环境搭建&#xff1a; &#xff08;a&#xff09;开发环境&#xff1a;pycharm &#xff08;b&#xff09;虚拟环境&#xff08;可有可无&#xff0c;优点&#xff1a;使用虚拟环境可以把使用的包自动生成一个文件&#xff0c;其他人需要使用时可以直接选择导入包&#xff…...

编程日记 2025/1/20 0:58:14

MySQL、HBase、ES的特点和区别

MySQL&#xff1a;关系型数据库&#xff0c;主要面向OLTP&#xff0c;支持事务&#xff0c;支持二级索引&#xff0c;支持sql&#xff0c;支持主从、Group Replication架构模型&#xff08;本文全部以Innodb为例&#xff0c;不涉及别的存储引擎&#xff09;。 HBase&#xff1…...

编程日记 2025/1/20 0:51:07

联发科MTK6762/MT6762安卓核心板_4G智能模块应用

MT6762安卓核心板是一款工业级高性能、可运行 android9.0 操作系统的 4G智能模块。MT6762平台打造具备 AI 体验、先进双摄像头拍摄效果且具备丰富连接功能的智能手机主板。 MT6762安卓核心板 是一款髙性能低功耗的 4G 全网通安卓智能模块。此模块支持 2G/3G/4G 移动&#xff0c…...

编程日记 2025/1/20 0:50:05

Windows7系统下载安装Source Code Pro字库

Source Code Pro字库介绍 Source Code Pro是由Adobe推出的一款专为代码展示和编写设计的开源等宽字体‌。它不仅在编程社区中广受好评&#xff0c;还被广泛应用于各种编辑器环境中&#xff0c;以提升代码的可读性和编程体验‌。 Source Code Pro的设计充分考虑了编程符号的呈…...

编程日记 2025/1/20 0:49:03

Navicat 17 功能简介 | 商业智能 BI

Navicat 17 功能简介 | 商业智能BI 随着 17 版本的发布&#xff0c;Navicat 也带来了众多的新特性&#xff0c;包括兼容更多数据库、全新的模型设计、可视化智能 BI、智能数据分析、可视化查询解释、高质量数据字典、增强用户体验、扩展 MongoDB 功能、轻松固定查询结果、便捷U…...

编程日记 2025/1/20 0:48:01

C# winodw TableLayoutPanel 料盒生产状态UI自动生成

料盒生产状态UI自动生成&#xff0c;效果如下 以前公司项目的这些都是手动拖控件做的。每个设备的料盒数量不一样&#xff0c;层数不一样时都要发好几个小时去改相关细节和代码。上次改了一次。这个又来了。上次就有想法做成根据参数自动生成。但项目时间有限有没有去深入思路和…...

编程日记 2025/1/20 0:47:00

提示词的艺术----AI Prompt撰写指南（个人用）

提示词的艺术 写在前面 制定提示词就像是和朋友聊天一样&#xff0c;要求我们能够清楚地表达问题。通过这个过程&#xff0c;一方面要不断练习提高自己地表达能力&#xff0c;另一方面还要锻炼自己使用更准确精炼的语言提出问题的能力。 什么样的提示词有用&#xff1f; 有…...

编程日记 2025/1/20 0:44:58

哪些前端打印插件可以实现监听用户选择了打印还是取消

在前端实现监听用户是否选择了打印还是取消的功能&#xff0c;确实是一个挑战&#xff0c;因为浏览器的打印行为是通过原生对话框处理的&#xff0c;而这些对话框的行为无法直接被 JavaScript 控制或监听。不过&#xff0c;有一些插件和方法可以帮助你更接近这个目标&#xff1…...

编程日记 2025/1/20 0:34:51

【PyCharm】连接Jupyter Notebook

【PyCharm】相关链接 【PyCharm】连接 Git【PyCharm】连接Jupyter Notebook【PyCharm】快捷键使用【PyCharm】远程连接Linux服务器【PyCharm】设置为中文界面 【PyCharm】连接Jupyter Notebook PyCharm连接Jupyter Notebook的过程可以根据不同的需求分为 本地连接 和 远程连…...

编程日记 2025/1/20 0:26:43

【Linux系统编程】—— 深入理解Linux中的环境变量与程序地址空间

文章目录 环境变量常见的环境变量查看环境变量环境变量的修改与使用环境变量的组织⽅式环境变量的命令通过代码如何获取环境变量环境变量的继承 前言&#xff1a;在Linux系统中&#xff0c;环境变量和程序地址空间是系统管理和进程运行的重要组成部分。本文将详细探讨环境变量的…...

编程日记 2025/1/20 0:24:41

Spark常见面试题-部分待更新

1. 简述hadoop 和 spark 的不同点&#xff08;为什么spark更快&#xff09; Hadoop是一个分布式管理、存储、计算的生态系统&#xff0c;包括HDFS&#xff08;分布式文件系统&#xff09;、MapReduce&#xff08;计算引擎&#xff09;和YARN&#xff08;资源调度器&#xff09;…...

编程日记 2025/1/20 0:17:35

Android BitmapShader实现狙击瞄具十字交叉线准星，Kotlin

Android BitmapShader实现狙击瞄具十字交叉线准星&#xff0c;Kotlin <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.…...

编程日记 2025/1/20 0:12:31

linux通过web向mac远程传输字符串，mac收到后在终端中直接打印。

要通过Web从Linux向Mac远程传输字符串&#xff0c;并在Mac的终端中直接打印&#xff0c;可以使用以下方法。这里假设Linux作为服务器&#xff0c;Mac作为客户端。 方法 1&#xff1a;使用Python的HTTP服务器 在Linux上启动一个简单的HTTP服务器&#xff0c;Mac通过curl获取字符…...

编程日记 2025/1/20 0:11:30

海云安开发者安全智能助手D10荣膺 “ AI标杆产品 ” 称号，首席科学家齐大伟博士入选2024年度 “ 十大杰出青年 ”

2024年12月27日&#xff0c;粤港澳大湾区AI领袖峰会在深圳成功举办&#xff0c;大会表彰了在人工智能技术创新、应用实践和产业发展等方面取得优异成绩的企业和个人&#xff0c;深圳海云安网络安全技术有限公司开发者安全智能助手D10荣膺“AI标杆产品”称号。同时&#xff0c;公…...

编程日记 2025/1/20 0:08:25

Spring Boot + Apache POI 实现 Excel 导出：BOM物料清单生成器（支持中文文件名、样式美化、数据合并）

目录 引言 Apache POI操作Excel的实用技巧 1.合并单元格操作 2.设置单元格样式 1. 创建样式对象 2. 设置边框 3. 设置底色 4. 设置对齐方式 5. 设置字体样式 6.设置自动换行 7. 应用样式到单元格 3. 定位和操作指定单元格 4.实现标签-值的形式 5.列宽设置 1. 设…...

编程日记 2025/1/20 0:07:23

ReactiveSwift 简单使用

记录 ReactiveSwift 简单使用 导入 ReactiveSwift 库创建 TestViewModel 文件 enum JKTypeType: Int {case cloudcase devicecase weater }// 通过监听属性变化 class TestViewModel: NSObject {lazy var recordType: Property<JKTypeType> {return Property(recordTy…...

编程日记 2025/1/20 0:06:22

CSS 的基础知识及应用

前言 CSS&#xff08;层叠样式表&#xff09;是网页设计和开发中不可或缺的一部分。它用于描述网页的视觉表现&#xff0c;使页面不仅实现功能&#xff0c;还能提供吸引人的用户体验。本文将介绍 CSS 的基本概念、语法、选择器及其在提升网页美观性方面的重要性。 什么是 CSS&…...

编程日记 2025/1/19 23:58:14

【Web】2025西湖论剑·中国杭州网络安全安全技能大赛题解(全)

目录 Rank-l Rank-U sqli or not Rank-l username存在报错回显&#xff0c;发现可以打SSTI 本地起一个服务&#xff0c;折半查找fuzz黑名单&#xff0c;不断扔给fenjing去迭代改payload from flask import Flask, request, render_template_stringapp Flask(__name__)app…...

编程日记 2025/1/19 23:56:11

能源物联网数据采集设备 串口服务器功能参数介绍

摘要 ​随着物联网技术的快速发展&#xff0c;各种传统设备的联网需求愈发迫切。串口服务器作为一种桥接传统串口设备与现代网络的关键设备&#xff0c;在工业控制、智能电网、交通运输等域发挥了重要作用。本文以APort100串口服务器为例&#xff0c;探讨串口服务器在现代物联…...

编程日记 2025/1/19 23:52:06

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/11/12 8:17:34

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/11/7 20:05:21

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/12 20:41:45

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/11/11 17:15:08

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/11/15 20:13:16

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/11/12 11:29:59

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

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

编程新知 2025/11/12 15:17:21