如何用js实现2048小游戏
最近同学参加宣讲会,说有个公司要求是写一个2048小游戏,参考了一点网上的代码以后,自己写了一个。
写的思路如下:
1.设置好HTML布局。大盒子嵌套小盒子,这块没什么可说的。
2.实现游戏初始化,生成一开始的两个小块。这里就要实现生成随机2或4,还要放入随机位置。其实从布局好了之后差不多就能想到用数组来存储数字了。这块主要用了Math.random()来生成随机数和随机X,Y来插入到数组中。然后写一个更新页面的函数,利用JS来更新小盒子的内容和CSS样式。这里把这一块,初始化数组和生成两个随机盒子的函数写成了一个newGame()函数,这样重新开始游戏可以直接调用。
3.最重要的来了,移动。我自己写的时候我是先按照先能然他们移动,在来考虑合并的思路来的。要留一个能记录下来为0的位置的变量,比如向下移动的时候,代码如下。
for(var i = 0;i<4;i++){ var n=3; for(var j = 3;j>=0;j--){ if(board[j][i] == 0){ continue; }else{ if(board[n][i]==0){ board[n][i] = board[j][i]; board[j][i] = 0; } n--; } } }
我是把继续生成随机盒子的函数放在了移动函数的结尾调用的,在这个时候就要考虑一个问题了,怎么让在其实没有移动动作的时候不在继续增加盒子。我还是用了一个循环遍历来完成这个问题。遍历循环数组,如果在移动方向上不为0的前面存在0就可以继续移动。比如判断是否能够下移:
function canMoveDown(){ for(var i = 0;i<4;i++){ for(var j = 3;j>=0;j--){ if(board[j][i]!=0&&j!=3){ if(board[j+1][i]==0){ return false; } } } } return true; }
然后改写了前面的移动函数,前面判断了这个,如果返回为真直接return false,不执行之后的移动函数体。
4.当移动都完成好了之后,就要考虑合并的问题了。我的思路是这样的,在移动之后,就移动后移动方向的前一个盒子(如果存在)和移动后的这个盒子来比较值,如果比较相等,就把前一个盒子置为本身2倍,移动后的盒子置为0。比如向下移动,修改代码如下:
for(var i = 0;i<4;i++){ var n=3; for(var j = 3;j>=0;j--){ if(board[j][i] == 0){ continue; }else{ if(board[n][i]==0){ board[n][i] = board[j][i]; board[j][i] = 0; } if(n<3){ if(board[n][i] == board[n+1][i]){ board[n+1][i] = board[n][i]*2; board[n][i] = 0; continue; } } n--; } } }
此处只有当n<3的时候才能进入,排除了他是最下面盒子的情况,因为他没有盒子可以合并嘛。这里要注意当合并之后,当前盒子变为0,前面说了n是为了帮助记录为0盒子的位置的,那么在这里就要注意,n值不用改变,因为当前盒子为0,如果还有值要下移应该移动到这里,否则你会发现上面的盒子会和下面的合并之后的盒子空一格,和想的不太一样。这里也要修改前面的canMoveDown()函数的判断条件,如果可以合并也要判断为能够移动,修改if条件为:
if(board[j+1][i]==0||board[j+1][i]==board[j][i]){ eturn false;}
5.到这里呢,基本上主要功能就结束啦。还有一点点就是关于结束的判断。结束就是1没有盒子是空的,2不能够移动了。没有盒子是空的就遍历数组看是不是全部都不是0了。不能移动就把前面写的canMoveDown()函数和上移,左移,右移的函数用上,如果这5个都是真的,就弹出游戏结束框,然后调用新的newGame()函数重新来。
以上是如何用js实现2048小游戏 的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

我们在使用win10操作系统的时候,想要知道win10更新了之后是不是还保存有以前老版本中的自带游戏扫雷,据小编所知,我们可以在商店中进行下载安装,只要在商店中搜索microsoftminesweeper即可。具体步骤就来和小编一起看一下吧~windows10有扫雷游戏吗1,首先打开win10开始菜单,点击。然后搜索,点击搜索。2,点击排在第一位的。3,然后就可能需要输入微软账户,即Microsoft账户。没有Microsoft账户的可以安装提示注册即可。输入账户密码,点击下一步。4,然后开始下

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

谷歌浏览器怎么玩小游戏?谷歌浏览器之中是有着非常多充满人文关怀的功能设计的,各位可以在其中获得非常多样化的乐趣。在谷歌浏览器之中,有这一个非常好玩的彩蛋小游戏,即小恐龙游戏,很多小伙伴都非常喜欢这个游戏,但却不清楚该怎么触发进行游玩,下面就由小编为大家带来恐龙小游戏进入教程。谷歌浏览器怎么玩小游戏方法一:【电脑断网】如果你的电脑使用有线网络,请拔掉网线;如果你的电脑使用无线网络,请在电脑右下角点击无线网络连接断开。②在你电脑断网的前提下,打开谷歌浏览器(GoogleChrome)即可出现谷歌浏览

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We
