首页 web前端 js教程 如何用js实现2048小游戏

如何用js实现2048小游戏

Sep 26, 2017 am 09:45 AM
javascript 小游戏

最近同学参加宣讲会,说有个公司要求是写一个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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

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

详解:Windows 10是否内置了扫雷小游戏 详解:Windows 10是否内置了扫雷小游戏 Dec 23, 2023 pm 02:07 PM

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

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

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

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

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

如何在谷歌浏览器中游玩小游戏 如何在谷歌浏览器中游玩小游戏 Jan 30, 2024 pm 12:39 PM

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

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

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

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

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

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

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

See all articles