2048游戏实现 for mobile d3

移动端的移植：

响应式 Web 设计 - Viewport
什么是 Viewport?
viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。

    <meta name="viewport" content="width=device-width, height=devive-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

手机字号小做调整

header {
    display: block;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

header h1 {
    font-family: Arial;
    font-size: 40px;
    font-weight: bold;
}

屏宽：

documentWidth = window.screen.availWidth;
gridContainerWidth = 0.92 * documentWidth;
cellSideLength = 0.18 * documentWidth;
cellSpace = 0.04 * documentWidth;

function getPosTop(i, j) {
    return cellSpace + i * (cellSpace + cellSideLength);
}

function getPosLeft(i, j) {
    return cellSpace + i * (cellSpace + cellSideLength);
}

$(document).ready(function() {
    prepareForMobile();
    newgame();
});

function prepareForMobile() {
	if (documentWidth > 500) {
        gridContainerWidth = 500;
        cellSpace = 20;
        cellSideLength = 100;
    }

    $("#grid-container").css('width', gridContainerWidth - 2 * cellSpace);
    $("#grid-container").css('height', gridContainerWidth - 2 * cellSpace);
    $("#grid-container").css('padding', cellSpace);
    $("#grid-container").css('border-radius', 0.02 * gridContainerWidth);

    $(".grid-cell").css('width', cellSideLength);
    $(".grid-cell").css('height', cellSideLength);
    $(".grid-cell").css("border-radius", 0.02 * cellSideLength);

}

numberCell.animate({
        width: cellSideLength,
        height: cellSideLength,
        top: getPosTop(i, j),
        left: getPosLeft(i, j)
    }, 50);

事件监听：

var startx = 0;
var starty = 0;
var endx = 0;
var endy = 0;

document.addEventListener('touchstart', function(event) {
    startx = event.touches[0].pageX;
    starty = event.touches[0].pageY;
});

document.addEventListener('touchend', function(event) {
    endx = event.touches[0].pageX;
    endy = event.touches[0].pageY;
})

if( Math.abs( deltax ) >= Math.abs( deltay ) ){

        if( deltax > 0 ){
            //move right
            if( moveRight() ){
                setTimeout("generateOneNumber()",210);
                setTimeout("isgameover()",300);
            }
        }
        else{
            //move left
            if( moveLeft() ){
                setTimeout("generateOneNumber()",210);
                setTimeout("isgameover()",300);
            }
        }
    }
    else{
        if( deltay > 0 ){
            //move down
            if( moveDown() ){
                setTimeout("generateOneNumber()",210);
                setTimeout("isgameover()",300);
            }
        }
        else{
            //move up
            if( moveUp() ){
                setTimeout("generateOneNumber()",210);
                setTimeout("isgameover()",300);
            }
        }
    }
});