2048小游戏js实现

摘要

2048小游戏，采用原生js的dom操作，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。

样式

demo功能：

常见的2048游戏功能，通过键盘上下左右键控制格子的移动。
游戏结束时alert(“游戏结束”)

主要实现方式

设置媒体查询，横屏设备以视口宽度设置rem，竖屏设备以视口高度设置rem

@media screen and (min-width: 768px),
screen and (orientation:landscape) {:root {font-size: calc(100vw / 375);}
}@media screen and (max-width: 768px),
screen and (orientation:portrait) {:root {font-size: calc(100vh / 375);}
}/* 相关原理放后头解释 */

上下左右移动的算法。盘一共四行四列，用array存储。
以上移为例。外层循环控制行，从第1行往上压，再从第2行往上压，最后是第三行往上压。
行确定，循环位号。
以第3行第0位为例子，设置j = row - 1。j指向该元素移动方向前进一格的位置。
两种情况需要移动。
（1）[ row ][ j ] = 0; 此时交换 [ row ][ j ] = [ row ][ j + 1] ， [ row ][ j + 1 ] = 0
（2）[ row ][ j + 1 ] = [ row ][ j ] ，且[ row ][ j + 1 ] 和 [ row ][ j ] 均不是已合成的元素，则合并，[ row ][ j ] = [ row ][ j ] * 2，[ row ][ j + 1 ] = 0，并标记 [ row ][ j ] 上该元素已经是合成元素
在进行操作中，标记操作是否有效。若循环后标志仍无效，说明操作无效。
绘制格子。直接对照数组重绘，并更改颜色与数值。若上一次操作无效，不必执行重绘。
新增加数格。两个随机数操作。当操作无效时不触发。若新增格子时格子满，判断是否结束。
判断是否结束？dfs 加剪枝

过程中遇见的问题与解决方式

移动端适配。放一个掘金大佬文章：你了解过移动端适配吗？学到不少东西。
简单做个小总结：
物理分辨率指，这个屏幕横竖能放下多少个像素。按照这个逻辑，一个300px x 300px的div，在屏幕大小相同的前提下，在 300 x 300 分辨率的设备上占满屏，在 600 x 600 分辨率的设备上占 1/4屏。这样而言，硬件发展对软件的影响太大，针对不同的屏幕要必须出不同的设计稿。于是便有了逻辑抽象。
逻辑分辨率，设备的物理分辨率差距很大，但逻辑分辨率相差不多。就此也产生了逻辑像素的概念。在物理分辨率大的情况下，举个例子，把 2 * 2的物理像素当成1个逻辑像素来使用，提高清晰度的同时，显示不会过分变形。既然有逻辑像素和物理像素，自然而然地，产生设备像素比dpr。
rem，设置:root也就是html的根元素的字体大小，实现相同比例放缩。
最开始没有判断某位置“是否已经合成过”，类似 2 2 2 2 ，左移应生成 4 4 0 0，而不能是 8 0 0 0。增加一个标记数组解决。
关于重绘游戏界面，以是否操作有效来减少没必要的重绘。
关于游戏效果。直接重绘不够友好，设置了transition为0.2s过渡，提升交互效果。

源代码

ShenMu-X github 的 2048 项目。有需自取。

2048小游戏js实现相关推荐

html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）
在前面的五篇文章中,小编带大家完成了网页版2048小游戏的基本游戏逻辑.但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息,这样的话只能出现下图的效果.这样的游戏,不 ...
使用JS实现2048小游戏
JS实现2048小游戏源码效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
2048小游戏（原生js基础代码篇）
今天在这里,我将给各位呈现一个简单的游戏代码. 想必大家都接触过2048这个小游戏吧,在悠闲时间用于消遣时间最好不过了,那么,我给大家写一个2048最基本的原生js代码. HTML: <!DOC ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）
续上一小节,我们可以发现每一个grid-cell上的数字初始时并不在格子里. 这些数字可以随着玩家的操作而移动我们可以想象:初始时每一个格子上的数为0,他们并不显示 ↓ 只有当grid-cell ...
2048小游戏——简简单单利用js做出自己的游戏！！
博主教你轻轻松松利用js技巧写出属于自己的2048小游戏!! 自己做出实现在页面中想必大家都听说过甚至玩过2048这款小游戏博主无聊时也会拿起手机或者在电脑上玩上几把但是大家有没有想过自己花费 ...
JS与HTML、CSS实现2048小游戏（一）
JS与HTML.CSS实现2048小游戏(一) 引言知识储备编译器推荐游戏框架构建游戏的基础页面后续文章引言这是大一刚结束的时候做的东西,之前也写了文章做记录,最近想发一下博客,就重新整 ...
原生js 实现2048小游戏
2048小游戏首先2048小游戏离不开16个格子,我们通过html和css创建好对应的标签和样式, 然后开始js逻辑 <div id="box">//一个盒子里面16 ...
.NET手撸2048小游戏
前言 2048是一款益智小游戏,得益于其规则简单,又和 2的倍数有关,因此广为人知,特别是广受程序员的喜爱. 本文将再次使用我自制的"准游戏引擎" FlysEngine,从空白窗口 ...

2048小游戏js实现

摘要

样式

demo功能：

主要实现方式

过程中遇见的问题与解决方式

源代码

2048小游戏js实现相关推荐

最新文章

热门文章