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.mzph.cn/news/186732.shtml

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

相关文章

flutter开发实战-readmore长文本展开和收缩控件

flutter开发实战-readmore长文本展开和收缩控件 当长文本展开和收缩控件&#xff0c;我们需要使用readmore来处理长文本展开和收缩&#xff0c;方便阅读 一、引入readmore 在工程的pubspec.yaml中引入插件 readmore: ^2.1.0ReadMoreText的属性如下 const ReadMoreText(this.…

Andrioid T 实现充电动画(2)

Andrioid T 实现充电动画&#xff08;2&#xff09; 以MTK平台为例&#xff0c;实现充电动画 效果图 资源包 修改文件清单 system/vendor/mediatek/proprietary/packages/apps/SystemUI/res/layout/prize_charge_layout.xmlsystem/vendor/mediatek/proprietary/packages/ap…

Bilateral Guided Upsampling

Abstract 我们提出了一种加速一大类图像处理算子的算法。给定低分辨率参考输入和输出对&#xff0c;我们通过拟合将输入映射到输出的局部曲线来对算子进行建模。然后&#xff0c;我们可以通过在全分辨率输入上评估这些低分辨率曲线来生成全分辨率输出。我们证明&#xff0c;这…

电商项目之Web实时消息推送(附源码)

文章目录 1 问题背景2 前言3 什么是消息推送4 短轮询5 长轮询5.1 demo代码 6 iframe流6.1 demo代码 7 SSE7.1 demo代码7.2 生产环境的应用 &#xff08;重要&#xff09; 8 MQTT 1 问题背景 扩宽自己的知识广度&#xff0c;研究一下web实时消息推送 2 前言 文章参考自Web 实时消…

【数值计算方法(黄明游)】矩阵特征值与特征向量的计算(三):Jacobi 旋转法【理论到程序】

文章目录 一、Jacobi 旋转法1. 基本思想2. 计算过程演示 二、Python实现迭代过程&#xff08;调试&#xff09; 矩阵的特征值&#xff08;eigenvalue&#xff09;和特征向量&#xff08;eigenvector&#xff09;在很多应用中都具有重要的数学和物理意义。Jacobi 旋转法是一种用…

LeetCode Hot100 438.找到字符串中所有字母异位词

题目&#xff1a; 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 代码&#xff1a; class Solution …

位图和布隆过滤器(C++)

位图和布隆过滤器 一、位图1. 引入2. 概念3. 代码实现setreset完整代码 4. 位图的应用 二、布隆过滤器1. 引入2. 概念3. 逻辑结构4. 特点5. 代码实现6. 布隆过滤器的应用 三、哈希切割 一、位图 1. 引入 当面对海量数据需要处理时&#xff0c;内存不足以加载这些数据&#xf…

The Sandbox 携手 Sandsoft,与 Nuqtah 合作推动沙特阿拉伯的 Web3 发展

新的合作伙伴关系将增强创作者的能力&#xff0c;促进区块链生态系统的包容性。 The Sandbox 及其合作伙伴 Sandsoft 是移动游戏开发商和发行商&#xff0c;也是 AAA 人才驱动的投资者&#xff0c;他们非常高兴地宣布与 Nuqtah 建立新的合作伙伴关系&#xff0c;Nuqtah 是中东和…

numpy模块安装方法

https://www.bilibili.com/video/BV1qN411R7V2/?spm_id_from333.337.search-card.all.click&vd_sourcefb8dcae0aee3f1aab700c21099045395

Linux:Ubuntu系统安装软件

本次以安装vim为例 sudo apt-get remove vim //卸载vim sudo apt-get install vim //安装vim sudo apt-cache show vim //获取vim软件信息安装时间较长。 安装完成后&#xff0c;执行下第三条指令&#xff0c;测试下是否安装成功即可。

在gazebo里搭建一个livox mid360 + 惯导仿真平台测试 FAST-LIO2

在gazebo里搭建一个livox mid360 惯导仿真平台测试 FAST-LIO2 前言立方体平台加入 livox mid360 激光雷达加入IMU模块调整底盘大小 并设计调用接口测试 Fast-Lio2 前言 livox mid360 在官网一直没有货&#xff0c;在gazebo里可以仿真该雷达形式的点云。 但是其只发布雷达的数…

Spire.Office 8.11.2 for NET fix Crack

内容摘自来自互联网------或者SDK官方本身手册 Spire.Doc for .NET A professional Word .NET library designed to create, read, write, convert and print Word document files in any .NET ( C#, VB.NET, ASP.NET, .NET Core, Xamarin ) application with fast and high qu…

Aurora8B10B(一) 从IP配置界面学习Aurora

一. 简介 哈喽&#xff0c;大家好&#xff0c;好久没有给大家写FPGA技术的文章&#xff0c;是不是已经忘记我是做FPGA的啦&#xff0c;O(∩_∩)O哈哈~。 这里将会给大家分享我学习到的第一个高速接口Aurora8B10B&#xff0c;有点复杂&#xff0c;但不是特别复杂&#xff0c;对…

使用vscode的remotessh插件远程连接的时候被要求重复输入密码

问题描述&#xff1a; 需要远程连接服务器&#xff0c;使用ssh&#xff0c;我用到的是vscode里面的remotessh插件。配置好config以后 HostHostNameUserPortIdentifyFile进入到了vscode的密码登录界面&#xff0c;但是一直被要求循环输入密码&#xff0c;很奇怪&#xff0c;去…

论文阅读——DINOv

首先是关于给了提示然后做分割的一些方法的总结&#xff1a; 左边一列是prompt类型&#xff0c;右边一列是使用各个类型的prompt的模型。这些模型有分为两大类&#xff1a;Generic和Refer&#xff0c;通用分割和参考分割。Generic seg 是分割和提示语义概念一样的所有的物体&am…

LLM之Agent(二):BabyAGI的详细教程

BabyAGI是一个 AI 支持的任务管理系统&#xff08;Python脚本&#xff09;&#xff0c;使用 OpenAI 和 Pinecone API 创建, 优先级排序和执行任务。该系统背后的主要思想是基于先前任务的结果和预定义的目标创建任务。脚本然后使用 OpenAI 的自然语言处理&#xff08;NLP&#…

leetCode 93.复原 IP 地址 + 回溯算法 + 图解 + 笔记

93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.168.1.1…

CS 2520nonono

CS 2520nonono WeChat&#xff1a;yj4399_​​​​​ Sina Visitor System High-level●3 Congestion Control Algorithms:○TCP Reno:■additive increase, multiplicative decrease function to adjust window size for every RTTuntil a packet loss is detected○TCP CUBI…

用java实现拼图小游戏

1、了解拼图游戏基本功能&#xff1a; 拼图游戏内容由若干小图像块组成的&#xff0c;通过鼠标点击图像块上下左右移动&#xff0c;完成图像的拼凑。 2、拼图游戏交互界面设计与开发&#xff1a; 通过创建窗体类、菜单、中间面板和左右面板完成设计拼图的交互界面 &#xff…

分享从零开始学习网络设备配置--任务4.3 使用动态路由RIPng实现网络连通

任务描述 某公司使用IPv6技术搭建企业网络&#xff0c;由于静态路由需要管理员手工配置&#xff0c;在网络拓扑发生变化时&#xff0c;也不会自动生成新的路由&#xff0c;因此采用IPv6动态路由协议RIPng实现网络连通&#xff0c;实现任意两个节点之间的通信&#xff0c;并降低…