h5小游戏--2048

2048

经典2048小游戏,基于JS、Html5改写版

效果预览

点我下载源代码

下载代码解压后,双击index.html即可开始本游戏。

Game Rule 游戏规则

以下为游戏默认规则,若需要修改规则请修改代码。

  • 移动箭头键来移动方块,当两个相同数字的方块碰撞时会合并成一个方块。每次移动后,会在随机位置生成一个新的方块。
  • 成功合并方块得分为两个方块的数字之后。
  • 当方块填满时使用箭头键就不能再移动方块,此时游戏结束

个性化定制

  • 可以替换meta文件夹中的图片,但需要注意保持尺寸大小与原图一致。
  • 核心样式在style文件中的main.css定义,可修改此文件来定制自己的个性化样式。
  • 游戏逻辑核心代码在js文件夹下的game_manager.js中,可修改此文件来定制自己的个性化规则。

以下为game_manager.js中核心逻辑控制代码

restart

启动游戏
清除当前游戏状态,初始化相关参数并启动游戏

// Restart the game
GameManager.prototype.restart = function () {this.storageManager.clearGameState();this.actuator.continueGame(); // Clear the game won/lost messagethis.setup();
};
keepPlaying

继续游戏
当玩家达到2048时,允许继续挑战最高记录。

// Keep playing after winning (allows going over 2048)
GameManager.prototype.keepPlaying = function () {this.keepPlaying = true;this.actuator.continueGame(); // Clear the game won/lost message
};
setup

游戏开始时初始化游戏相关参数
本游戏将玩家的游戏数据保存在浏览器本地存储中,游戏开始时会判断上一次游戏是否未结束,若没结束读取上一次的游戏数据。若结束则开始全新的游戏。所以,在游戏没有结束时你关闭了浏览器,重新打开游戏后依然会继续上一次的游戏。

GameManager.prototype.setup = function () {var previousState = this.storageManager.getGameState();// Reload the game from a previous game if presentif (previousState) {this.grid        = new Grid(previousState.grid.size,previousState.grid.cells); // Reload gridthis.score       = previousState.score;this.over        = previousState.over;this.won         = previousState.won;this.keepPlaying = previousState.keepPlaying;} else {this.grid        = new Grid(this.size);this.score       = 0;this.over        = false;this.won         = false;this.keepPlaying = false;// Add the initial tilesthis.addStartTiles();}// Update the actuatorthis.actuate();
};
addStartTiles

添加游戏开局时的方块
游戏开始时在随机位置产生方块,方块数量为startTiles,可修改此参数来控制游戏开始时产生的方块数量

// Set up the initial tiles to start the game with
GameManager.prototype.addStartTiles = function () {for (var i = 0; i < this.startTiles; i++) {this.addRandomTile();}
};
addRandomTile

在随机位置生成新的方块
每次移动后,在剩余没有方块的地方随机产生一个新的方块,方块数字为2的概率为90%,为4的概率为10%。可修改此方法的逻辑来实现自己的生成规则。

// Adds a tile in a random position
GameManager.prototype.addRandomTile = function () {if (this.grid.cellsAvailable()) {var value = Math.random() < 0.9 ? 2 : 4;var tile = new Tile(this.grid.randomAvailableCell(), value);this.grid.insertTile(tile);}
};
tileMatchesAvailable

判断方块是否能够合并
判断在移动方向上的两个方块数字是否相等,若相等则可合并。

// Check for available matches between tiles (more expensive check)
GameManager.prototype.tileMatchesAvailable = function () {var self = this;var tile;for (var x = 0; x < this.size; x++) {for (var y = 0; y < this.size; y++) {tile = this.grid.cellContent({ x: x, y: y });if (tile) {for (var direction = 0; direction < 4; direction++) {var vector = self.getVector(direction);var cell   = { x: x + vector.x, y: y + vector.y };var other  = self.grid.cellContent(cell);if (other && other.value === tile.value) {return true; // These two tiles can be merged}}}}}return false;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/217813.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

终于来了,Runway gen2 制作AI视频的全功能超详细使用教程

最近有好几个学员私信我们&#xff0c;让我出一期Runway完整的使用教程&#xff0c;刚好11月Runway对外发布运动涂笔等新功能&#xff0c;那么今天就给大家安排一期全功能&#xff0c;超详细的从Gen1到Gen2的使用教程。 Runway 是国外一家在线视频剪辑制作网站&#xff0c;作为…

C/C++ 通过SQLiteSDK增删改查

SQLite&#xff0c;作为一款嵌入式关系型数据库管理系统&#xff0c;一直以其轻量级、零配置以及跨平台等特性而备受青睐。不同于传统的数据库系统&#xff0c;SQLite是一个库&#xff0c;直接与应用程序一同编译和链接&#xff0c;无需单独的数据库服务器进程&#xff0c;实现…

Anaconda安装与Python虚拟环境配置保姆级图文教程(附速查字典)

目录 1 混乱的Python库2 什么是Anaconda&#xff1f;3 Anaconda的安装3.1 Windows系统3.2 Linux系统3.3 测试 4 虚拟环境管理(速查字典) 1 混乱的Python库 你有没有遇到过这样的问题 在项目A中需要用到某个Python库PkgA&#xff0c;且项目A的其他库要求PkgA的版本必须为v3.0以…

如何给echarts的legend设置不同的样式和位置 legend分组显示

legend分组显示 给每一个图例设置不一样的位置和样式 样式如下 demo代码 option {title: {text: Stacked Line},tooltip: {trigger: axis},// legend写为数组可以给一些给某些组分配一些不一样的样式legend: [{data: [// 使用svg画任意的图形{name:Email,icon: path://"…

歌手荆涛演唱的《春节回家》,一种情感的表达和文化的传承

歌手荆涛演唱的《春节回家》&#xff0c;一种情感的表达和文化的传承 春节回家&#xff0c;是中国传统文化中最为重要的传统节日之一&#xff0c;也是亿万华夏儿女最为期待的日子。每当春节临近&#xff0c;无论身在何处&#xff0c;人们都会收拾行囊&#xff0c;踏上归途&…

我的第一个Arduino点灯程序

我简直难以相信&#xff0c;什么都不用配置&#xff0c;就这么几行代码&#xff0c;就可以blink了 void setup() {// Set up the built-in LED pin as an output:pinMode(PA1, OUTPUT); }void loop() {digitalWrite(PA1,!digitalRead(PA1));// Turn the LED from off to on, o…

float和double(浮点型数据)在内存中的储存方法

作者&#xff1a;元清加油 主页&#xff1a;主页 编译环境&#xff1a;visual studio 2022 (x86) 相信大家都知道数据在内存中是以二进制储存的 整数的储存方法是首位是符号位&#xff0c;后面便是数值位 那么浮点数在内存中是怎么储存的呢&#xff1f;我们先来看一个例子&am…

鸿蒙HarmonyOS 编辑器 下载 安装

好 各位 之前的文章 注册并实名认证华为开发者账号 我们基实名注册了华为的开发者账号 我们可以访问官网 https://developer.harmonyos.com/cn/develop/deveco-studio 在这里 直接就有我们编辑器的下载按钮 我们直接点击立即下载 这里 我们根据自己的系统选择要下载的系统 例…

Excel表中合并两个Sheet的方法?

按AltF11&#xff0c;调出Visual Basic 界面。 在左侧窗口中&#xff0c;右键选择“插入”—“模块”&#xff1a; 将如下代码粘贴进去&#xff0c;点击运行按钮&#xff0c;完成数据表合并。 Sub MergeAllSheetsInThisWorkbook() On Error Resume Next Application.ScreenU…

AR眼镜双目光波导/主板硬件方案

AR(增强现实)技术的发展离不开光学元件&#xff0c;而在其中&#xff0c;光波导和Micro OLED被视为AR眼镜光学方案的黄金搭档。光学元件在AR行业中扮演着核心角色&#xff0c;其成本高昂且直接影响用户体验的亮度、清晰度和大小等因素。AR眼镜的硬件成本中&#xff0c;光机部分…

抖音权重查询源码H5源码

源码下载&#xff1a;123网盘

循环队列的实现(附完整代码)

题目解读 本题是要求我们设计一个循环的队列&#xff0c;循环队列要有以下功能&#xff1a; 1.获取队首元素&#xff0c;若队列为空返回-1 2.获取队尾元素&#xff0c;若队列为空&#xff0c;则返回-1 3.插入元素&#xff0c;插入成功返回真 4.删除元素&#xff0c;删除成功返回…