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

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

news 2026/2/11 3:50:58

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

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

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

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);
}

动画效果

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

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

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

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

Django框架：python web开发

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

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

MySQL、HBase、ES的特点和区别

MySQL：关系型数据库，主要面向OLTP，支持事务，支持二级索引，支持sql，支持主从、Group Replication架构模型（本文全部以Innodb为例，不涉及别的存储引擎）。 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推出的一款专为代码展示和编写设计的开源等宽字体‌。它不仅在编程社区中广受好评，还被广泛应用于各种编辑器环境中，以提升代码的可读性和编程体验‌。 Source Code Pro的设计充分考虑了编程符号的呈…...

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

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

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

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

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

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

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

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

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

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

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

在前端实现监听用户是否选择了打印还是取消的功能，确实是一个挑战，因为浏览器的打印行为是通过原生对话框处理的，而这些对话框的行为无法直接被 JavaScript 控制或监听。不过，有一些插件和方法可以帮助你更接近这个目标&#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中的环境变量与程序地址空间

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

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

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

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

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

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

Android BitmapShader实现狙击瞄具十字交叉线准星，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远程传输字符串，并在Mac的终端中直接打印，可以使用以下方法。这里假设Linux作为服务器，Mac作为客户端。方法 1：使用Python的HTTP服务器在Linux上启动一个简单的HTTP服务器，Mac通过curl获取字符…...

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

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

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

编程日记 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 库创建 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（层叠样式表）是网页设计和开发中不可或缺的一部分。它用于描述网页的视觉表现，使页面不仅实现功能，还能提供吸引人的用户体验。本文将介绍 CSS 的基本概念、语法、选择器及其在提升网页美观性方面的重要性。什么是 CSS&…...

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

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

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

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

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

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

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章传送阵>> 点我查看说明：假设每台服务器已…...

编程新知 2026/2/10 11:45:58

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...

编程新知 2026/2/2 21:52:33

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。据「TMT星球」了解，“超级…...

编程新知 2026/2/8 4:08:40

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。但如果操作不当，可能会引发短暂的服务发现问题。下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人点击群设置下滑到群管理的机器人，点击进入添加机器人选择自定义Webhook服务点击添加设置安全设置，详见说明文档成功后，记录Webhook 2 API文档说明点击设置说明查看自…...

编程新知 2026/1/30 4:18:53

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21

Vue 模板语句的数据来源

🧩 Vue 模板语句的数据来源：全方位解析 Vue 模板（<template> 部分）中的表达式、指令绑定（如 v-bind, v-on）和插值（{{ }}）都在一个特定的作用域内求值。这个作用域由当前组件…...

编程新知 2026/2/1 6:18:18

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介在我的 QT/C 开发工作中，合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式：工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

1. CSS 样式（style.css）

2. 更新 HTML（index.html）

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

动画效果

相关文章：