[游戏开发]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);
    }
}

/* 相关原理放后头解释 */

2. 上下左右移动的算法。盘一共四行四列，用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 ] 上该元素已经是合成元素
   在进行操作中，标记操作是否有效。若循环后标志仍无效，说明操作无效。
3. 绘制格子。直接对照数组重绘，并更改颜色与数值。若上一次操作无效，不必执行重绘。
4. 新增加数格。两个随机数操作。当操作无效时不触发。若新增格子时格子满，判断是否结束。
5. 判断是否结束？dfs 加 剪枝

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

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

源代码

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