数码资讯
jQuery写的网页小游戏2048版
一般介绍 看到一个2048的视频游戏的网页版，使他以前喜欢玩游戏很有趣，自己试过，真的证明了这句话--你不想你所想，看视频时，读，写，而我也会遇到各种各样的问题，例如，在游戏最终的判断，我写的句子语法正确，但不执行。最后，通过对视频源的分析比较，发现一个由原作者写的setTimeout定时器具有附加
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
一般介绍
看到一个2048的视频游戏的网页版，使他以前喜欢玩游戏很有趣，自己试过，真的证明了这句话--你不想你所想，看视频时，读，写，而我也会遇到各种各样的问题，例如，在游戏最终的判断，我写的句子语法正确，但不执行。最后，通过对视频源的分析比较，发现一个由原作者写的setTimeout定时器具有附加意义。我认为这是一个简单的延时动画，实际上他是在等待另一个函数来完成，_ - | |。最后，很高兴能写和完善的一些源代码。
这个博客不是一个详细的解释，而是对函数功能的一般介绍。解释了实现的细节。互联网的源头有点乱。如果你想看到一个更经常的源代码或视频，你可以联系我QQ（免费）。
思维
这个小游戏可以抽象为3层（我想它可以更好的理解）。
底层是一种基本样式（可见）。
中间层是最重要的，是一个二维数组的4x4，我们在游戏中的二维数组的操作（不可见）
一个二维数组4x4是其中一个最上面的，它只是根据每个数第二层阵列的显示风格（可见）
我们在底层显示16个基本的小方格，通过键盘按钮或手指在屏幕上滑动操作中间层数组，最后在顶层显示数字。
基本结构与风格
基本结构和样式很简单，直接查看代码。
结构：
二千零四十八
开始一个新游戏
得分：0
风格：
* {
保证金：0；
填充：0；
}
# test2048 {
字体家庭：Arial；
保证金：0汽车；
文本对齐：中心；
}
#头{
保证金：20px；
}
#头{
字体家庭：Arial；
文字装饰：无；
显示块；
颜色：白色；
保证金：20px汽车；
宽度：125px；
身高：35px；
文本对齐：中心；
行高：40px；
背景颜色：# 8f7a66；
边界半径：10px；
字体大小：15px；
}
#头P {
字体家庭：Arial；
Font-size: 20px;
}
#容器{
宽度：460px；
身高：460px；
背景颜色：# bbada0；
保证金：0汽车；
边界半径：10px；
职位：相对；
填料：20px；
}
细胞{。
宽度：100px；
身高：100px；
边界半径：6px；
背景颜色：# ccc0b3；
位置：绝对；
}
我们可以从CSS样式中看到，而不是针对每个位置设置，因为如果使用CSS来设置每个单元格代码的样式太大，并且它们的位置有一定的规则，所以我们可以使用js循环来完成每个点阵样式的设置。
代码uff1a
初始化棋盘
函数初始化（）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝0；j＜4；j + +）{
设置棋盘位置
var =美元并（' #细胞+我+-+）；
EveryCell.css（{顶：率（I），左：率（J）}）；
}
}
}
取得{位置}
功能率（NUM）{
返回20 +数字* 120；
}
所以我们一楼不错
uff1a效应
现在我们构建了二层，即建立4x4 0值的数组。因为在第二层结构中有两个循环，我们在构建第一层时也可以构建第二层。
第三层是用JS生成16个格，对应于第一层的16格。
代码uff1a
数字点阵
功能numformat（）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝0；j＜4；j + +）{
$（#容器）。append（）
设置数字网格位置、样式
everynumber = $（var的#数+我+-+）；
如果（棋盘{ } = 0）{
EveryNumber.css（{
宽度：'0px，
身高：'opx，
上图：率（我）+ 50，
左：率（J）+ 50
}）
其他{ }
EveryNumber.css（{
宽度：'100px，
身高：'100px，
上图：（我）率，
左：率（J），
背景颜色：getbackgroundcolor（棋盘{我} {，}），
颜色：色鬼（棋盘{我} {，}）
}）；
everynumber.text（棋盘{我} {，}）；
}
}
}
}
获取相应的数字背景色
功能getbackgroundcolor（数）{
开关（数字）{
案例2：回归# eee4da ；打破；
案例4：回归# ede0c8 ；打破；
案例8：回归# f2b179 ；打破；
案例16：回归# f59563 ；打破；
案例32：回归# f67c5f ；打破；
案例64：回归# f65e3b ；打破；
案例128：回归# edcf72 ；打破；
案例256：回归# edcc61 ；打破；
案例512：回归# 9c0 ；打破；
案例1024：回归# 33b5e5 ；打破；
案例2048：回归# 09c ；打破；
案例4096：回归# A6C ；打破；
案例8192：回归# 93c ；打破；
}
}
设置相应的数字文本颜色
函数GetColor（数）{
如果（数字< = 4）{
返回# 776e65
}
返回白；
}
初始化
当每场比赛再次开始时，随机有两个随机数。我们将写一个随机数的函数，随机位置，如果我们调用它两次就会实现。
代码uff1a
在一个位置随机生成一个数字。
功能randomnum（）{
随机生成的坐标
无功randomx = math.floor（Math.random）*（4）；
无功随机= math.floor（Math.random）*（4）；
生成一个随机数（2或4）
无功randomvalue = Math.random（）> 0.52：4；
在图0中没有生成随机数的地方
当（真）{
如果（棋盘{ } { } randomx随机= = 0）{
打破；
其他{ }
无功randomx = math.floor（Math.random）*（4）；
无功随机= math.floor（Math.random）*（4）；
}
}
随机位置随机生成的数字显示
棋盘{ } { } = randomvalue随机randomx；
动画
randomnumanimate（randomx，随机，randomvalue）；
}
数字动画/随机生成
功能randomnumanimate（randomx，随机，randomvalue）{
randomnum = $（var的#数+ randomx随机+ - +）；
Randomnum.css（{
背景颜色：getbackgroundcolor（randomvalue），
颜色：色鬼（randomvalue），
}）
文本（randomvalue）。
动画（{
宽度：'100px，
身高：'100px，
上图：率（randomx），
左：率（随机）
}，50）；
}
基本操作
我们使用交换机循环来根据用户的不同输入执行不同的操作。
代码uff1a
获取键盘事件，不同操作的键检测不同
$（document）。Keydown（函数（事件）{
开关（事件。键码）{
案例37
如果（canmoveleft（棋盘））{
如果您可以向左移动/ /
向左移动（）；
向左移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
关于案例38
如果（canmoveup（棋盘））{
如果向上移动。
MoveUp（）；
移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例39
如果（canmoveright（棋盘））{
如果您可以向右移动/ /
MoveRight（）；
向右移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
在第40种情况下：
如果（canmovedown（棋盘））{
如果它们可以向下移动
向下移动（）；
向下移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
违约:
打破；
}
}）；
因为数字格的运动只是左、上、右、下，它们都是一样的，所以它们以左移为例。
要向左移动，首先要判断它是否能向左移动。有两种情况可以向左移动。
第一个：当前网格的左边网格是空的，也就是说，值是0。
第二个：当前网格的值与左侧网格相同。
由于向左移动，第一列不能向左移动，所以不需要判断。
代码uff1a
确定是否可以向左移动。
功能canmoveleft（棋盘）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝1；j＜4；j + +）{
如果（棋盘{ } }！= 0）{
如果点阵格数为数字左或左为空或相等，可向左移动。
如果（棋盘{我} { } = 0 | J-1 |棋盘{ } { } = =我，{我} { }棋盘J-1）{
返回true；
}
}
}
}
返回false；
}
当我们决定是否可以向左移动时，我们将移动活动格。在这里，我们需要特别注意朝哪个方向移动。
代码uff1a
向左移动
函数的MoveLeft（）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝1；j＜4；j + +）{
如果（棋盘{ } }！= 0）{
对于（var = 0；k j；k；+）{
如果（棋盘} { } = {我K = 0 nomiddlenumrow（I，K，J，棋盘））{
moveanimation（I，J，I，K）；
棋盘；
棋盘{ } = 0；
} else if（棋盘{ } { } = =我K { } { }我棋盘，nomiddlenumrow（I，K，J，棋盘）{ } { } {我hasconflicted K！）
moveanimation（I，J，I，K）；
棋盘；
棋盘{ } = 0；
}
}
}
}
}
设置刷新时间以使动画走在更新的数字点阵中，否则数字点阵动画将被中断。
setTimeout（）{（）函数（
NumFormat（）；
}，200）；
}
在判断中间的数字是0（for）
功能nomiddlenumrow（col1，col2排，棋盘）{
对于（var i = col1 + 1；i < COL2；i++）{
如果（棋盘{行} }）！= 0）{
返回false；
}
}
返回true；
}
写完后，右，下四个方向，游戏的基本操作已经完成。
比赛比分和裁判赛结束
游戏的得分是每增加一个数字的总和，所以我们可以在每次添加数字时更新分数。
代码uff1a
更新部分
得分=棋盘；
UpdateScore（评分）；
设置分数
功能updatescore（NUM）{
$（#得分）。文本（努姆）；
}
很容易判断游戏是否结束了，它可以用我们之前定义的方法来完成。
代码uff1a
判断游戏是否结束
功能whegameover（棋盘）{
如果（！canmoveleft（棋盘）！CanMoveUp（棋盘）！CanMoveRight（棋盘）！canmovedown（棋盘））{
showgameover（）；
}
}
显示/游戏
功能showgameover（）{
$（#容器）。追加（总分+成绩+启动游戏）
}
开始游戏
功能雷斯佩特（）{
$（# GAMEOVER）删除（）；
新游戏（）；
}
最终的优化
1，游戏中会有一个移动，一个数字会增加很多次。
在原来的游戏，每个数只能在每个操作的时间积累的，所以我们定义一个4x4的虚假数值数组，数组和相应的中间层，用于防止次数的累积，如果错误可以积累，并将改变虚假的价值，或不累积
2，死循环的结束
因为在设置随机数时有一个死环，但是在游戏结束后，循环仍然存在，所以我们在死循环中添加一个条件，如果游戏结束，我们将跳出循环。
3，最后的游戏提示不执行
案例37
如果（canmoveleft（棋盘））{
如果您可以向左移动/ /
向左移动（）；
向左移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否在这里，设置延迟是因为等待随机生成的数字在判断之后，如果没有
/ /延迟，最后一个将被判定为canmoveleft（棋盘）假将不会执行
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
你可以从代码中看到的，决定游戏是否结束是随机进行一系列的预判，所以在比赛结束的时候，总是有一个空格，使代码执行游戏没有结束，但当随机数产生，所有不能移动的格子，当我们按下，如果条件不合格，判断游戏是否结束的功能无法执行。所以我们要判断游戏结束的功能设置一个计时器，这样他就可以随机数后作出判断。
4。可以在移动端执行
因为原作者没有写移动终端的操作，所以我找了一个代码来判断触摸屏手机在互联网上的滑动位置，并添加了可以执行游戏的事件。
返回角度
函数的GetSlideAngle（dx，dy）{
返回math.atan2（dy，dx）* 180 / Math.PI；
}
根据出发点和终点/返回方向：1到2：3，下，左，右：：4：0：不滑动。
功能getslidedirection（startx，初始位置，endx，恩迪）{
var dy＝初始位置-恩迪；
VaR DX = endx - startx；
varresult = 0；
如果滑动距离太短
如果（Math.abs（DX）＜2 math.abs（DY）＜2）{
returnresult；
}
功角= GetSlideAngle（dx，dy）；
如果（角度角< 45 > = 45）{
结果= 4；
否则如果（角度角< 135 > = 45）{
结果= 1；
}如果（角135 - < 45 > =角）{
结果= 2；
}
否则（如果角= - 180角< 135 = = 135）{）
结果= 3；
}
返回结果；
}
滑动处理
层的初始位置；
Document.addEventListener（'touchstart功能（EV）{
StartX = EV。触动{ 0 }。pagex；
初始位置= EV。触动{ 0 }。pagey；
}，假）；
Document.addEventListener（'touchend功能（EV）{
无功endx，恩迪；
endx = EV。changedtouches { 0 }。pagex；
安迪= EV。changedtouches { 0 }。pagey；
无功方向= getslidedirection（startx，初始位置，endx，恩迪）；
开关（方向）{
案例0：
/不滑动
打破；
案例1：
如果（canmoveup（棋盘））{
如果向上移动。
MoveUp（）；
移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否结束
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例2：
如果（canmovedown（棋盘））{
如果它们可以向下移动
向下移动（）；
向下移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否结束
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例3：
如果（canmoveleft（棋盘））{
如果您可以向左移动/ /
向左移动（）；
向左移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否在这里，设置延迟是因为等待随机生成的数字在判断之后，如果没有
/ /延迟，最后一个将被判定为canmoveleft（棋盘）假将不会执行
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例4：
如果（canmoveright（棋盘））{
如果您可以向右移动/ /
MoveRight（）；
向右移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否结束
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
违约:
}
}，假）；
总结
一般来说，游戏并不太难实现，它是一个小操作集合。
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！
看到一个2048的视频游戏的网页版，使他以前喜欢玩游戏很有趣，自己试过，真的证明了这句话--你不想你所想，看视频时，读，写，而我也会遇到各种各样的问题，例如，在游戏最终的判断，我写的句子语法正确，但不执行。最后，通过对视频源的分析比较，发现一个由原作者写的setTimeout定时器具有附加意义。我认为这是一个简单的延时动画，实际上他是在等待另一个函数来完成，_ - | |。最后，很高兴能写和完善的一些源代码。
这个博客不是一个详细的解释，而是对函数功能的一般介绍。解释了实现的细节。互联网的源头有点乱。如果你想看到一个更经常的源代码或视频，你可以联系我QQ（免费）。
思维
这个小游戏可以抽象为3层（我想它可以更好的理解）。
底层是一种基本样式（可见）。
中间层是最重要的，是一个二维数组的4x4，我们在游戏中的二维数组的操作（不可见）
一个二维数组4x4是其中一个最上面的，它只是根据每个数第二层阵列的显示风格（可见）
我们在底层显示16个基本的小方格，通过键盘按钮或手指在屏幕上滑动操作中间层数组，最后在顶层显示数字。
基本结构与风格
基本结构和样式很简单，直接查看代码。
结构：
二千零四十八
开始一个新游戏
得分：0
风格：
* {
保证金：0；
填充：0；
}
# test2048 {
字体家庭：Arial；
保证金：0汽车；
文本对齐：中心；
}
#头{
保证金：20px；
}
#头{
字体家庭：Arial；
文字装饰：无；
显示块；
颜色：白色；
保证金：20px汽车；
宽度：125px；
身高：35px；
文本对齐：中心；
行高：40px；
背景颜色：# 8f7a66；
边界半径：10px；
字体大小：15px；
}
#头P {
字体家庭：Arial；
Font-size: 20px;
}
#容器{
宽度：460px；
身高：460px；
背景颜色：# bbada0；
保证金：0汽车；
边界半径：10px；
职位：相对；
填料：20px；
}
细胞{。
宽度：100px；
身高：100px；
边界半径：6px；
背景颜色：# ccc0b3；
位置：绝对；
}
我们可以从CSS样式中看到，而不是针对每个位置设置，因为如果使用CSS来设置每个单元格代码的样式太大，并且它们的位置有一定的规则，所以我们可以使用js循环来完成每个点阵样式的设置。
代码uff1a
初始化棋盘
函数初始化（）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝0；j＜4；j + +）{
设置棋盘位置
var =美元并（' #细胞+我+-+）；
EveryCell.css（{顶：率（I），左：率（J）}）；
}
}
}
取得{位置}
功能率（NUM）{
返回20 +数字* 120；
}
所以我们一楼不错
uff1a效应
现在我们构建了二层，即建立4x4 0值的数组。因为在第二层结构中有两个循环，我们在构建第一层时也可以构建第二层。
第三层是用JS生成16个格，对应于第一层的16格。
代码uff1a
数字点阵
功能numformat（）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝0；j＜4；j + +）{
$（#容器）。append（）
设置数字网格位置、样式
everynumber = $（var的#数+我+-+）；
如果（棋盘{ } = 0）{
EveryNumber.css（{
宽度：'0px，
身高：'opx，
上图：率（我）+ 50，
左：率（J）+ 50
}）
其他{ }
EveryNumber.css（{
宽度：'100px，
身高：'100px，
上图：（我）率，
左：率（J），
背景颜色：getbackgroundcolor（棋盘{我} {，}），
颜色：色鬼（棋盘{我} {，}）
}）；
everynumber.text（棋盘{我} {，}）；
}
}
}
}
获取相应的数字背景色
功能getbackgroundcolor（数）{
开关（数字）{
案例2：回归# eee4da ；打破；
案例4：回归# ede0c8 ；打破；
案例8：回归# f2b179 ；打破；
案例16：回归# f59563 ；打破；
案例32：回归# f67c5f ；打破；
案例64：回归# f65e3b ；打破；
案例128：回归# edcf72 ；打破；
案例256：回归# edcc61 ；打破；
案例512：回归# 9c0 ；打破；
案例1024：回归# 33b5e5 ；打破；
案例2048：回归# 09c ；打破；
案例4096：回归# A6C ；打破；
案例8192：回归# 93c ；打破；
}
}
设置相应的数字文本颜色
函数GetColor（数）{
如果（数字< = 4）{
返回# 776e65
}
返回白；
}
初始化
当每场比赛再次开始时，随机有两个随机数。我们将写一个随机数的函数，随机位置，如果我们调用它两次就会实现。
代码uff1a
在一个位置随机生成一个数字。
功能randomnum（）{
随机生成的坐标
无功randomx = math.floor（Math.random）*（4）；
无功随机= math.floor（Math.random）*（4）；
生成一个随机数（2或4）
无功randomvalue = Math.random（）> 0.52：4；
在图0中没有生成随机数的地方
当（真）{
如果（棋盘{ } { } randomx随机= = 0）{
打破；
其他{ }
无功randomx = math.floor（Math.random）*（4）；
无功随机= math.floor（Math.random）*（4）；
}
}
随机位置随机生成的数字显示
棋盘{ } { } = randomvalue随机randomx；
动画
randomnumanimate（randomx，随机，randomvalue）；
}
数字动画/随机生成
功能randomnumanimate（randomx，随机，randomvalue）{
randomnum = $（var的#数+ randomx随机+ - +）；
Randomnum.css（{
背景颜色：getbackgroundcolor（randomvalue），
颜色：色鬼（randomvalue），
}）
文本（randomvalue）。
动画（{
宽度：'100px，
身高：'100px，
上图：率（randomx），
左：率（随机）
}，50）；
}
基本操作
我们使用交换机循环来根据用户的不同输入执行不同的操作。
代码uff1a
获取键盘事件，不同操作的键检测不同
$（document）。Keydown（函数（事件）{
开关（事件。键码）{
案例37
如果（canmoveleft（棋盘））{
如果您可以向左移动/ /
向左移动（）；
向左移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
关于案例38
如果（canmoveup（棋盘））{
如果向上移动。
MoveUp（）；
移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例39
如果（canmoveright（棋盘））{
如果您可以向右移动/ /
MoveRight（）；
向右移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
在第40种情况下：
如果（canmovedown（棋盘））{
如果它们可以向下移动
向下移动（）；
向下移动
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
违约:
打破；
}
}）；
因为数字格的运动只是左、上、右、下，它们都是一样的，所以它们以左移为例。
要向左移动，首先要判断它是否能向左移动。有两种情况可以向左移动。
第一个：当前网格的左边网格是空的，也就是说，值是0。
第二个：当前网格的值与左侧网格相同。
由于向左移动，第一列不能向左移动，所以不需要判断。
代码uff1a
确定是否可以向左移动。
功能canmoveleft（棋盘）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝1；j＜4；j + +）{
如果（棋盘{ } }！= 0）{
如果点阵格数为数字左或左为空或相等，可向左移动。
如果（棋盘{我} { } = 0 | J-1 |棋盘{ } { } = =我，{我} { }棋盘J-1）{
返回true；
}
}
}
}
返回false；
}
当我们决定是否可以向左移动时，我们将移动活动格。在这里，我们需要特别注意朝哪个方向移动。
代码uff1a
向左移动
函数的MoveLeft（）{
对于（var i = 0；i < 4；i + +）{
对于（var j＝1；j＜4；j + +）{
如果（棋盘{ } }！= 0）{
对于（var = 0；k j；k；+）{
如果（棋盘} { } = {我K = 0 nomiddlenumrow（I，K，J，棋盘））{
moveanimation（I，J，I，K）；
棋盘；
棋盘{ } = 0；
} else if（棋盘{ } { } = =我K { } { }我棋盘，nomiddlenumrow（I，K，J，棋盘）{ } { } {我hasconflicted K！）
moveanimation（I，J，I，K）；
棋盘；
棋盘{ } = 0；
}
}
}
}
}
设置刷新时间以使动画走在更新的数字点阵中，否则数字点阵动画将被中断。
setTimeout（）{（）函数（
NumFormat（）；
}，200）；
}
在判断中间的数字是0（for）
功能nomiddlenumrow（col1，col2排，棋盘）{
对于（var i = col1 + 1；i < COL2；i++）{
如果（棋盘{行} }）！= 0）{
返回false；
}
}
返回true；
}
写完后，右，下四个方向，游戏的基本操作已经完成。
比赛比分和裁判赛结束
游戏的得分是每增加一个数字的总和，所以我们可以在每次添加数字时更新分数。
代码uff1a
更新部分
得分=棋盘；
UpdateScore（评分）；
设置分数
功能updatescore（NUM）{
$（#得分）。文本（努姆）；
}
很容易判断游戏是否结束了，它可以用我们之前定义的方法来完成。
代码uff1a
判断游戏是否结束
功能whegameover（棋盘）{
如果（！canmoveleft（棋盘）！CanMoveUp（棋盘）！CanMoveRight（棋盘）！canmovedown（棋盘））{
showgameover（）；
}
}
显示/游戏
功能showgameover（）{
$（#容器）。追加（总分+成绩+启动游戏）
}
开始游戏
功能雷斯佩特（）{
$（# GAMEOVER）删除（）；
新游戏（）；
}
最终的优化
1，游戏中会有一个移动，一个数字会增加很多次。
在原来的游戏，每个数只能在每个操作的时间积累的，所以我们定义一个4x4的虚假数值数组，数组和相应的中间层，用于防止次数的累积，如果错误可以积累，并将改变虚假的价值，或不累积
2，死循环的结束
因为在设置随机数时有一个死环，但是在游戏结束后，循环仍然存在，所以我们在死循环中添加一个条件，如果游戏结束，我们将跳出循环。
3，最后的游戏提示不执行
案例37
如果（canmoveleft（棋盘））{
如果您可以向左移动/ /
向左移动（）；
向左移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否在这里，设置延迟是因为等待随机生成的数字在判断之后，如果没有
/ /延迟，最后一个将被判定为canmoveleft（棋盘）假将不会执行
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
你可以从代码中看到的，决定游戏是否结束是随机进行一系列的预判，所以在比赛结束的时候，总是有一个空格，使代码执行游戏没有结束，但当随机数产生，所有不能移动的格子，当我们按下，如果条件不合格，判断游戏是否结束的功能无法执行。所以我们要判断游戏结束的功能设置一个计时器，这样他就可以随机数后作出判断。
4。可以在移动端执行
因为原作者没有写移动终端的操作，所以我找了一个代码来判断触摸屏手机在互联网上的滑动位置，并添加了可以执行游戏的事件。
返回角度
函数的GetSlideAngle（dx，dy）{
返回math.atan2（dy，dx）* 180 / Math.PI；
}
根据出发点和终点/返回方向：1到2：3，下，左，右：：4：0：不滑动。
功能getslidedirection（startx，初始位置，endx，恩迪）{
var dy＝初始位置-恩迪；
VaR DX = endx - startx；
varresult = 0；
如果滑动距离太短
如果（Math.abs（DX）＜2 math.abs（DY）＜2）{
returnresult；
}
功角= GetSlideAngle（dx，dy）；
如果（角度角< 45 > = 45）{
结果= 4；
否则如果（角度角< 135 > = 45）{
结果= 1；
}如果（角135 - < 45 > =角）{
结果= 2；
}
否则（如果角= - 180角< 135 = = 135）{）
结果= 3；
}
返回结果；
}
滑动处理
层的初始位置；
Document.addEventListener（'touchstart功能（EV）{
StartX = EV。触动{ 0 }。pagex；
初始位置= EV。触动{ 0 }。pagey；
}，假）；
Document.addEventListener（'touchend功能（EV）{
无功endx，恩迪；
endx = EV。changedtouches { 0 }。pagex；
安迪= EV。changedtouches { 0 }。pagey；
无功方向= getslidedirection（startx，初始位置，endx，恩迪）；
开关（方向）{
案例0：
/不滑动
打破；
案例1：
如果（canmoveup（棋盘））{
如果向上移动。
MoveUp（）；
移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否结束
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例2：
如果（canmovedown（棋盘））{
如果它们可以向下移动
向下移动（）；
向下移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否结束
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例3：
如果（canmoveleft（棋盘））{
如果您可以向左移动/ /
向左移动（）；
向左移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否在这里，设置延迟是因为等待随机生成的数字在判断之后，如果没有
/ /延迟，最后一个将被判定为canmoveleft（棋盘）假将不会执行
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
案例4：
如果（canmoveright（棋盘））{
如果您可以向右移动/ /
MoveRight（）；
向右移动
setTimeout（）{（）函数（
whegameover（棋盘）
}，300）；
判断游戏是否结束
setTimeout（）{（）函数（
RandomNum（）；
}，200）；
生成一个随机数
}
打破；
违约:
}
}，假）；
总结
一般来说，游戏并不太难实现，它是一个小操作集合。
以上是本文的全部内容，希望本文的内容能给大家的学习或工作带来一定的帮助，同时也希望能给予更多的支持！
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。