2048的移动端网页——实现上下左右触摸移动和合并+存储2048的上一次关闭页面时的历史记录

一、触摸
触摸事件：
ouchstart: //手指放到屏幕上时触发，触摸/滑动开始点
touchmove: //手指在屏幕上滑动时触发， 接触点改变（滑动中）
touchend: //手指离开屏幕时触发，触摸/滑动结束点
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
触摸事件每个都包括了三个触摸对象列表（可根据触摸点实现多点触控）：

1. touches：当前屏幕上的所有手指触摸点的列表
2. targetTouches：当前DOM元素上手指的列表
3. changedTouches：当前事件发生后手指的列表
   这些列表里的每次触摸由touch对象(触摸对象列表中的任一元素)组成，touch对象里包含着触摸信息，同时每个touch对象包含的属性如下：

• identifier：标识触摸的唯一ID
• pageX：触摸点在页面中的x坐标
• pageY：触摸点在页面中的y坐标
• screenX：触摸点在屏幕中的x坐标
• screenY：触摸点在屏幕中的y坐标
• clientX：触摸点在视口(浏览器窗口)中的x坐标
• clientY：触摸点在视口(浏览器窗口)中的y坐标
• target：触摸的DOM节点

2、如何存储2048的上一次关闭页面时的历史记录
前言：浏览器正常运行时先加载的是beforeunload->onunload->onload 但是麻烦的是如果刷新页面时是执行beforeunload->onunload,如果关闭浏览器的话是执行onunload.
使用localStorage存储关闭和刷新时的页面，和读取上一次关闭的页面

//滑动的监听
/**
 * 距离： 滑动距离要大于40
时间： 滑动时间小于在0.5秒，即500毫秒内完成手指按下，拖动，离开（避免只是手指在屏幕就触发——防止一直摁着但是不是想滑动的情况）
滑动方向：
左右滑动的条件是：X轴移动的距离大于Y轴移动的距离，为正则向左，为负则向右
上下滑动的条件是Y轴移动的距离大于X轴移动的距离，为正则向上，为负则向下
说到监听触摸滑动，要用到的自然就是下面这三个触摸事件了：
1. touchstart 触摸开始，手指点击屏幕时触发（可监听多点触控，后面的手指也同样会触发）
2. touchmove 接触点改变，滑动时持续触发
3. touchend 触摸结束，手指离开屏幕时触发
这三个触摸事件每个都包括了三个触摸对象列表（可根据触摸点实现多点触控）：
1. touches：当前屏幕上的所有手指触摸点的列表
2. targetTouches：当前DOM元素上手指的列表
3. changedTouches：当前事件发生后手指的列表
 */
// querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
//4*4格子

var board=new Array();
for(let i=0;i<4;i++){
    board[i]=new Array(4).fill(0);
}
// updateBoardView();
// 游戏分数
var score=0;

window.onload = function(){
//由于我的布局中new Game使用的是超链接的方式，链接到当前页面，相当于刷新
//所以要对这一种情况单独处理，使它页面是一个初始化页面
    let newGameListening=document.querySelector('.newGame')
    //给newGame添加触摸开始事件
    newGameListening.addEventListener("touchstart", (e) => {
        //当重新开始一个游戏时，清空localStorage
        localStorage.clear(); // clear方法，清除所有保存的数据
        //先清空页面显示
        showBox(board,boxs)
        //重新开始游戏,新加载页面
        board=[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]
        // 游戏分数
        score=0;
        randomNumber2or4(board,boxs);
        randomNumber2or4(board,boxs);
        //显示出两个数字
    })
    let boxs=document.getElementsByClassName("box");
    //1、页面加载时根据localStorage加载数据
    //若localStorage无相关数据，则让游戏刚开始/每次刷新页面就随机在任何位置出现两个2/4,开始时棋盘内随机出现两个数字，出现的数字仅可能为2或4
    var boardValue = localStorage.getItem("board"); // 取回 value 变量
    if(boardValue === null){
        //当棋盘为空时，初始化棋盘任意位置上随机生成两个数字（2或4）
        randomNumber2or4(board,boxs);
        randomNumber2or4(board,boxs);
    }else{
        board = JSON.parse(boardValue);
        var scoreValue=localStorage.getItem("score");
        score=Number(scoreValue);
    }
    //显示出数字
    showBox(board,boxs)
    let boxListening = document.querySelector('body') // 监听对象,装16个格子的外部容器
    // console.log(box)
    let startTime = '' // 触摸开始时间
    let startX = '' // 触摸开始X轴位置
    let startY = '' // 触摸开始Y轴位置
    let endTime = '' // 触摸结束时间
    let endX = '' // 触摸结束X轴位置
    let endY = '' // 触摸结束Y轴位置
    let moveTime = '' // 触摸时间
    let moveDistanceX = '' // 触摸移动X轴距离
    let moveDistanceY = '' // 触摸移动Y轴距离
    //给boxListening添加触摸事件监听
    //触摸开始事件
    boxListening.addEventListener("touchstart", (e) => {
        startTime = new Date().getTime()
        startX = e.touches[0].screenX
        startY = e.touches[0].screenY
    })
    //触摸结束事件
    boxListening.addEventListener("touchend", (e) => {
        endTime = new Date().getTime()
        endX = e.changedTouches[0].screenX// e.changedTouches[0]触摸对象
        endY = e.changedTouches[0].screenY
        moveTime = endTime - startTime
        moveDistanceX = startX - endX//X轴移动距离
        moveDistanceY = startY - endY//Y轴的移动距离
        // console.log(moveDistanceX, moveDistanceY)
        // 判断任一轴上滑动距离超过40 且 时间小于500毫秒
        if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
            // 判断X轴移动的距离是否大于Y轴移动的距离
            if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
                // 左右
                moveDistanceX > 0 ? moveLeft(board,boxs) : moveRight(board,boxs)
            // console.log(moveDistanceX > 0 ? moveUp(board,boxs) : '右')
            } else {
            // 上下
            moveDistanceY > 0 ? moveUp(board,boxs) : moveDown(board,boxs)
            // console.log(moveDistanceY > 0 ? '上' : '下')
            }
        }
    })
    //将score中的span的文本值设为实时分数
    document.getElementById("score").children[1].innerHTML=score;
}
//js实现关闭或刷新页面时保存页面数据
//在刷新时调用浏览器事件将html/js代码用json的格式保存到localStorage中
window.onbeforeunload=function(){
    boardValue = JSON.stringify(board); // 将 JSON 对象board转化成字符串
    localStorage.setItem("board", boardValue);// 用 localStorage 保存转化好的的字符串boardValue
    localStorage.setItem("score", score);//score只是一个数字，这里将转化成字符串保存
}