![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
2048小游戏
Ankry果冻
这个作者很懒,什么都没留下…
展开
-
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(五)
5.1 分数的叠加续上一小节,不知道大家有没有注意到,我们还没有分数统计功能呀在游戏初始化**init()**函数里,我们应该加上对分数的初始化 score = 0;我们什么时候会产生分数的变化?在两个数合在一起产生一个叠加效果的时候。具体发生在用户按下 “上下左右” 键的时候我们以**moveLeft()**为例,我们能向左移动有两种情况左边有空位左边的数与本身相同,可以叠加很明显,第二种情况才会产生分数的叠加比如:2和2叠加为4, 4和4叠加为8此时 score变量发原创 2020-07-29 00:33:30 · 1354 阅读 · 1 评论 -
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(四)
4.1游戏循环大多数游戏采用的是基于时间的游戏循环这种循环会随着时间的流逝更新游戏数据根据时间流逝判断游戏是否结束比如:星际争霸、魔兽争霸另一类是基于玩家响应的游戏循环这种游戏循环是基于玩家响应而更新游戏数据玩家响应后继续判断游戏是否结束比如:棋类游戏,2048游戏4.2 基于玩家响应的游戏循环那么我们怎么接收玩家的操作呢?也就是说,玩家如何控制游戏的进行?2048游戏是玩家通过键盘上下左右操作,进而推进游戏的继续,于是,我们需要获取玩家的按键信息这里,我们需要使用keydown事原创 2020-07-28 21:28:05 · 1269 阅读 · 1 评论 -
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(三)
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作,现在,我们需要在随机两个两个生成数字。随机生成数字在这个游戏里会经常出现,用户移动一步,也会产生一个随机数字。我们在newgame()函数里,声明一个generateOneNumber()函数,来随机在16个格子里找出没有数字的格子,随机生成一个数字2或4。因为newgame()函数里,起始时,生成了2个随机数字,于是我们要调用2次。2.31 generateOneNumber()函数在main原创 2020-07-27 13:54:32 · 1195 阅读 · 1 评论 -
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里。这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓只有当grid-cell上的数字不为0,才会显示出来,这个数字有自己的颜色属性,和独有的文字我们把grid-cell上面的数字元素设置成 number-cell ,之前我们定义的var board二维数组,就是存储这些数字元素的值number cell是board数组里的数据在前端的显示每次用户在操作时,就是改变board二维原创 2020-07-27 00:06:46 · 1319 阅读 · 1 评论 -
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(一)
前几天看了慕课里的制作2048小游戏课程->>> 指路:https://www.imooc.com/learn/76这个游戏适合我这种前端入门的小白作为第一个游戏项目,做完还挺有成就感、虽然是跟着视频做,但是还是经常出错做完以后收获挺大,但是还有一些不太理解。现在开始复盘,把每一步都认真归纳总结希望能通过一步一步理解透彻里面的原理,分享出来也希望能帮到你该游戏需要有HTML、CSS、JS和JQ基础边做边思考每一步的来由2048小游戏(一)...原创 2020-07-26 21:30:51 · 6176 阅读 · 2 评论