发布于2021-03-10 19:01 阅读(1420) 评论(0) 点赞(4) 收藏(3)
作者:@小灰灰
本文为作者原创,转载请注明出处:https://www.cnblogs.com/liuhui0308/p/14411698.html
阅读目录(Content)
现在开始学编程的,基本上都过手机游戏2048吧,那么这个游戏的玩法相信很多人都熟悉,我在这里再给大家回顾下吧。
每次控制所有方块向同一个方向运动,两个相同数字的方块撞在一起之后合并成为他们的和,每次操作之后会在空白的方格处随机生成一个2或者4,不断的组合让分数提高,在手机上有分数排行榜,那些大佬的分数真的令人叹服。如果16个格子全部填满并且相邻的格子都不相同也就是无法移动的话,那么恭喜你,gameover。
1. 最大的数一定要放到角落
2. 数字要按顺序紧邻排序
3. 保证最大数和次大数那一行/列是满的
这就是我给新手玩家分享的经验,遵守这几个规则,可以保证达到几万分的水准。
然后就要来分析一下我们需要实现的功能了:
1. 初始化界面,并且随机生成两个数字为2或者4的格子
2. 方块移动和合并适合的效果,方块的颜色要随着值的改变而改变
3. 判断在某个方向上是否可以移动,不能移动就不变化
4. 在后续生成随机数字的时候判断是否还有空间,有则生成下一块,没有则判断四个方向是否都无法移动,都满足时提示gameover并结束游戏
5. 在任意两个格子合并后,分数都要加上值为合并后格子的值
6. 判断每个格子移动到什么位置,会不会合并
实现思路:
用向右方向移动为例,先判断格子是否能够向右方向移动,如果可以,循环每一个格子。如果这个格子的值不为0,遍历格子右侧的元素,判断落脚的位置是否为空以及落脚位置的数字是否和本来的数字相等 。如果落脚的位置为空 && 中间没有障碍物,更新样式,将落脚位置格子的值设为移动格子的值,原格子值设为空。如果落脚位置的数字和本来的数字相等&& 中间没有障碍物,更新样式,将落脚位置格子的值设为移动格子值与落脚位置格子值相加后的值,原格子值设为空。
HTML
CSS
JavaScript
jQuery
Vue
我准备做三个版本的,原生JavaScript版、jQuery版以及Vue版。
这也是第一次做录音视频,讲的不好的地方大家见谅。
原文链接:https://www.cnblogs.com/liuhui0308/p/14411698.html
作者:大哥你来啦
链接:http://www.qianduanheidong.com/blog/article/34338/800ebea32948c08c4ba3/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!