2048小游戏——网页版（提升篇）

时间 2019-11-13

标签游戏网页提升栏目游戏繁體版

原文原文链接

出于以前的承诺，仍是含着泪来总结一下2048改进版的代码吧！javascript

2048小游戏——网页版（提升篇）：主要是想对该游戏进行一个改进，~~2048的数字换成图片、支持手机端的滑动操做等~~。css

并无换图片，也没有作滑动设置，感受那个没什么卵用。因此此次的主要改进：①屏幕适配；②数字换成文字；③界面优化。html

一样的，我把该项目的全部代码已上传，欢迎下载：点击打开连接
java

先对比一下界面：jquery

能够看到，如今这个界面的标题改了、数字也改文字了、新增了一个中止按钮。数组

那么代码上有作哪些变化呢，我就把代码有改动过的几个文件再展现一下好了：app

index.html
dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <title>2048</title>
    <link rel="stylesheet" type="text/css" href="2048.css"/>

    <!--<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>-->
    <script src="jquery-1.10.1.js"></script>
    <script type="text/javascript" src="support2048.js"></script>
    <script type="text/javascript" src="showAnimation.js"></script>
    <script type="text/javascript" src="main2048.js"></script>

</head>
<body>

<!-- 绘制标题 -->
<header>
    <h1>2048文字版</h1>
    <div id="button">
        <a href="javascript:newgame();" id="newgamebutton">New Game</a>
        <a href="javascript:gameover();" id="stopgamebutton">Stop Game</a>
    </div>
    <p>score:<span id="score">0</span></p>
</header>

<!-- 绘制棋盘格 -->
<div id="grid-container">
    <div class="grid-cell" id="grid-cell-0-0"></div>
    <div class="grid-cell" id="grid-cell-0-1"></div>
    <div class="grid-cell" id="grid-cell-0-2"></div>
    <div class="grid-cell" id="grid-cell-0-3"></div>

    <div class="grid-cell" id="grid-cell-1-0"></div>
    <div class="grid-cell" id="grid-cell-1-1"></div>
    <div class="grid-cell" id="grid-cell-1-2"></div>
    <div class="grid-cell" id="grid-cell-1-3"></div>

    <div class="grid-cell" id="grid-cell-2-0"></div>
    <div class="grid-cell" id="grid-cell-2-1"></div>
    <div class="grid-cell" id="grid-cell-2-2"></div>
    <div class="grid-cell" id="grid-cell-2-3"></div>

    <div class="grid-cell" id="grid-cell-3-0"></div>
    <div class="grid-cell" id="grid-cell-3-1"></div>
    <div class="grid-cell" id="grid-cell-3-2"></div>
    <div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>

main2048.js
ide

/**
 * Created by Kay on 2016/3/7.
 */

// --------------------------------------------------------------------------------------------------------------------
var board = new Array();
var score = 0;
var hasConflicted = new Array();// 用来判断每一个格子是否已经发生过碰撞，从而避免一会儿加好几个格子

$(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);

}

function newgame() {

    // 初始化棋盘格
    init();

    // 在随机两个格子生成数字
    generateOneNumber();
    generateOneNumber();
}

// --------------------------------------------------------------------------------------------------------------------
/*
 *  一、初始化棋盘格 gridCell
 *  二、初始化二维数组 用于存储数据 board
 *  三、初始化数据 清零 updateBoardView();
 */
function init() {
    for (var i = 0; i < 4; i++)
        for (var j = 0; j < 4; j++) {
            var gridCell = $("#grid-cell-" + i + "-" + j);
            gridCell.css('top', getPosition(i));
            gridCell.css('left', getPosition(j));
        }

    for (var i = 0; i < 4; i++) {
        board[i] = new Array();
        hasConflicted[i] = new Array();
        for (var j = 0; j < 4; j++) {
            board[i][j] = 0;
            hasConflicted[i][j] = false;
        }
    }

    updateBoardView();

    score = 0;

    updateScore(score);

}

// --------------------------------------------------------------------------------------------------------------------
// 初始化数据，就是将数据可视化！根据board[i][j]存的数值来画图！
function updateBoardView() {
    $(".number-cell").remove();
    for (var i = 0; i < 4; i++)
        for (var j = 0; j < 4; j++) {
            $("#grid-container").append('<div class="number-cell" id="number-cell-' + i + '-' + j + '"></div>');
            var theNumberCell = $('#number-cell-' + i + '-' + j);

            if (board[i][j] == 0) {
                theNumberCell.css("width", "0px");
                theNumberCell.css("height", "0px");
                theNumberCell.css("top", getPosition(i) + cellSideLength/2);
                theNumberCell.css("left", getPosition(j) + cellSideLength/2);
            } else {
                theNumberCell.css('width', cellSideLength);
                theNumberCell.css('height',cellSideLength);
                theNumberCell.css('top', getPosition(i));
                theNumberCell.css('left', getPosition(j));
                theNumberCell.css('background-color', getNumberBackgroundColor(board[i][j]));
                theNumberCell.css('color', getNumberColor(board[i][j]));
                theNumberCell.text(getNumberText(board[i][j]));
            }
            hasConflicted[i][j] = false;
        }
    $('.number-cell').css('line-height',cellSideLength+'px')
    $('.number-cell').css('font-size',0.3*cellSideLength+'px')//注意这里以前是0.6.如今文字版是0.3

}

// --------------------------------------------------------------------------------------------------------------------
// 随机选一个格子生成一个数字
function generateOneNumber() {

    if (nospace(board))
        return false;

    // 随机一个位置
    var randx = parseInt(Math.floor(Math.random() * 4));
    var randy = parseInt(Math.floor(Math.random() * 4));

    // 设置一个时间参数，50次之内系统还未生成一个空位置，那么就进行人工找一个空位置
    var times = 0;
    while (times < 50) {
        if (board[randx][randy] == 0)
            break;

        randx = parseInt(Math.floor(Math.random() * 4));
        randy = parseInt(Math.floor(Math.random() * 4));

        times++;
    }
    if (times == 50) {
        for (var i = 0; i < 4; i++)
            for (var j = 0; j < 4; j++) {
                if (board[i][j] == 0) {
                    randx = i;
                    randy = j;
                }
            }
    }

    // 随机一个数字
    var randNumber = Math.random() < 0.5 ? 2 : 4;

    // 在随机位置显示随机数字
    board[randx][randy] = randNumber;
    showNumberWithAnimation(randx, randy, randNumber);

    return true;
}

// --------------------------------------------------------------------------------------------------------------------
// 判断键盘的响应时间 上下左右
$(document).keydown(function (event) {
    event.preventDefault();
    switch (event.keyCode) {
        case 37: // left 向左移动
            if (moveLeft()) {
                setTimeout("generateOneNumber()", 210);
                setTimeout("isgameover()", 300);
            }
            ;
            break;
        case 38: // up 向上移动
            if (moveUp()) {
                setTimeout("generateOneNumber()", 210);
                setTimeout("isgameover()", 300);
            }
            ;
            break;
        case 39: // right 向右移动
            if (moveRight()) {
                setTimeout("generateOneNumber()", 210);
                setTimeout("isgameover()", 300);
            }
            ;
            break;
        case 40: // down 向下移动
            if (moveDown()) {
                setTimeout("generateOneNumber()", 210);
                setTimeout("isgameover()", 300);
            }
            ;
            break;
        default: // default
            break;
    }
});

// --------------------------------------------------------------------------------------------------------------------
// 向左移动
function moveLeft() {

    // 一、首先，判断可否向左移动
    if (!canMoveLeft(board))
        return false;

    /*二、若是能够向左移动：
     *   ①当前的数字是否为0，不为0则进行左移 board[i][j] != 0
     *   ②若是左侧为空格子，则数字进行一个移位操做 board[i][k] == 0
     *   ③若是左侧有数字且不相等，则数字仍是进行移位操做 noBlockHorizontal
     *   ④若是左侧有数字且相等，则数字进行相加操做 board[i][k] == board[i][j]
     */
    for (var i = 0; i < 4; i++)
        for (var j = 1; j < 4; j++) {
            if (board[i][j] != 0) {
                for (var k = 0; k < j; k++) {
                    if (board[i][k] == 0 && noBlockHorizontal(i, k, j, board)) {
                        //move
                        showMoveAnimation(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if (board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board) && !hasConflicted[i][k]) {
                        //move
                        showMoveAnimation(i, j, i, k);
                        //add
                        board[i][k] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        score += board[i][k];
                        updateScore(score);

                        hasConflicted[i][k] = true;
                        continue;
                    }
                }
            }
        }
    // 三、初始化数据 updateBoardView()
    // 为显示动画效果，设置该函数的等待时间200毫秒
    setTimeout("updateBoardView()", 200);
    return true;
}

// --------------------------------------------------------------------------------------------------------------------
// 向上移动
function moveUp() {

    if (!canMoveUp(board))
        return false;

    //moveUp
    for (var j = 0; j < 4; j++)
        for (var i = 1; i < 4; i++) {
            if (board[i][j] != 0) {
                for (var k = 0; k < i; k++) {
                    if (board[k][j] == 0 && noBlockVertical(j, k, i, board)) {
                        //move
                        showMoveAnimation(i, j, k, j);
                        board[k][j] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if (board[k][j] == board[i][j] && noBlockVertical(j, k, i, board) && !hasConflicted[k][j]) {
                        //move
                        showMoveAnimation(i, j, k, j);
                        //add
                        board[k][j] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        score += board[k][j];
                        updateScore(score);

                        hasConflicted[k][j] = true;
                        continue;
                    }
                }
            }
        }
    setTimeout("updateBoardView()", 200);
    return true;
}

// --------------------------------------------------------------------------------------------------------------------
// 向右移动
function moveRight() {
    if (!canMoveRight(board))
        return false;

    //moveRight
    for (var i = 0; i < 4; i++)
        for (var j = 2; j >= 0; j--) {
            if (board[i][j] != 0) {
                for (var k = 3; k > j; k--) {
                    if (board[i][k] == 0 && noBlockHorizontal(i, j, k, board)) {
                        //move
                        showMoveAnimation(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if (board[i][k] == board[i][j] && noBlockHorizontal(i, j, k, board) && !hasConflicted[i][k]) {
                        //move
                        showMoveAnimation(i, j, i, k);
                        //add
                        board[i][k] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        score += board[i][k];
                        updateScore(score);

                        hasConflicted[i][k] = true;
                        continue;
                    }
                }
            }
        }
    setTimeout("updateBoardView()", 200);
    return true;
}

// --------------------------------------------------------------------------------------------------------------------
// 向下移动
function moveDown() {
    if (!canMoveDown(board))
        return false;

    //moveDown
    for (var j = 0; j < 4; j++)
        for (var i = 2; i >= 0; i--) {
            if (board[i][j] != 0) {
                for (var k = 3; k > i; k--) {
                    if (board[k][j] == 0 && noBlockVertical(j, i, k, board)) {
                        //move
                        showMoveAnimation(i, j, k, j);
                        board[k][j] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if (board[k][j] == board[i][j] && noBlockVertical(j, i, k, board) && !hasConflicted[k][j]) {
                        //move
                        showMoveAnimation(i, j, k, j);
                        //add
                        board[k][j] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        score += board[k][j];
                        updateScore(score);

                        hasConflicted[k][j] = true;
                        continue;
                    }
                }
            }
        }
    setTimeout("updateBoardView()", 200);
    return true;
}

// --------------------------------------------------------------------------------------------------------------------
// 游戏结束
function isgameover() {
    if (nospace(board) && nomove(board)) {
        gameover();
    }
}

function gameover() {
    //alert("游戏结束！您的得分为：" + score);
    var max = 0;
    for (var i = 0; i < 4; i++){
        for (var j = 0; j < 4; j++){
            if (board[i][j] > max) {
                max = board[i][j];
            }
        }
    }
    alert("恭喜您得到了：" + getNumberText(max) + "段位！"+ "\n 您的当前得分为：" + score + "分");
}

support2048.js
函数

/**
 * Created by Kay on 2016/3/7.
 */

// 定义一些相对屏幕的经常使用尺寸
documentWidth = window.screen.availWidth;
gridContainerWidth = 0.92 * documentWidth;
cellSideLength = 0.18 * documentWidth;
cellSpace = 0.04 * documentWidth;

// --------------------------------------------------------------------------------------------------------------------
// 获取每一个单元格的坐标
function getPosition(pos) {
    return cellSpace + pos * (cellSpace + cellSideLength);
}

// --------------------------------------------------------------------------------------------------------------------
// 设置不一样数字的不一样背景颜色
function getNumberBackgroundColor(number) {
    switch (number) {
        case 2:
            return "#eee4da";
            break;
        case 4:
            return "#ede0c8";
            break;
        case 8:
            return "#f2b179";
            break;
        case 16:
            return "#f59563";
            break;
        case 32:
            return "#f67c5f";
            break;
        case 64:
            return "#f65e3b";
            break;
        case 128:
            return "#edcf72";
            break;
        case 256:
            return "#edcc61";
            break;
        case 512:
            return "#9c0";
            break;
        case 1024:
            return "#33b5e5";
            break;
        case 2048:
            return "#09c";
            break;
        case 4096:
            return "#a6c";
            break;
        case 3192:
            return "#93c";
            break;
    }
    return "black";
}

function getNumberText(number) {
    switch (number) {
        case 2:
            return "LOL";
            break;
        case 4:
            return "人机";
            break;
        case 8:
            return "匹配";
            break;
        case 16:
            return "排位";
            break;
        case 32:
            return "青铜";
            break;
        case 64:
            return "白银";
            break;
        case 128:
            return "黄金";
            break;
        case 256:
            return "铂金";
            break;
        case 512:
            return "钻石";
            break;
        case 1024:
            return "大师";
            break;
        case 2048:
            return "王者";
            break;
        case 4096:
            return "大神";
            break;
        case 8192:
            return "腾讯";
            break;
    }
    return "black";
}

// --------------------------------------------------------------------------------------------------------------------
// 设置数字的颜色：2和4的颜色都为#776e65，其它数字的颜色为白色
function getNumberColor(number) {
    if (number <= 4)
        return "#776e65";

    return "white";
}

// --------------------------------------------------------------------------------------------------------------------
// 判断当前格子是否有数字 即判断是否是一个“非空（nospace）”的格子
function nospace(board) {
    for (var i = 0; i < 4; i++)
        for (var j = 0; j < 4; j++)
            if (board[i][j] == 0) // 若是没有数字，返回false
                return false;
    // 若是有数字，返回true
    return true;
}

// --------------------------------------------------------------------------------------------------------------------
/* 判断可否向左移动
 * 一、只须要判断每一行的后3列格子便可。
 * 二、能够移动的条件是：
 *   ①当前格子有数字，即 board[i][j] != 0
 *   ②左侧格子没有数字，即 (board[i][j - 1] == 0
 *   ③左侧格子和当前格子数字相同，即 board[i][j - 1] == board[i][j]
 */
function canMoveLeft(board) {
    for (var i = 0; i < 4; i++)
        for (var j = 1; j < 4; j++)
            if (board[i][j] != 0)
                if (board[i][j - 1] == 0 || board[i][j - 1] == board[i][j])
                    return true;
    return false;
}

// --------------------------------------------------------------------------------------------------------------------
// 判断可否向上、右、下移动
function canMoveUp(board) {
    for (var j = 0; j < 4; j++)
        for (var i = 1; i < 4; i++)
            if (board[i][j] != 0)
                if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j])
                    return true;
    return false;
}
function canMoveRight(board) {
    for (var i = 0; i < 4; i++)
        for (var j = 0; j < 3; j++)
            if (board[i][j] != 0)
                if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j])
                    return true;
    return false;
}
function canMoveDown(board) {
    for (var j = 0; j < 4; j++)
        for (var i = 0; i < 3; i++)
            if (board[i][j] != 0)
                if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j])
                    return true;
    return false;
}

// --------------------------------------------------------------------------------------------------------------------
// 判断水平方向是否可移动，即水平方向的两个目标格子之间没有其余数字 noBlockHorizontal
function noBlockHorizontal(row, col1, col2, board) {
    for (var i = col1 + 1; i < col2; i++)
        if (board[row][i] != 0) // 若是在这二者之间的其它格子有数字，返回false
            return false;
    // 若是二者之间没数字，返回true
    return true;
}

// --------------------------------------------------------------------------------------------------------------------
// 判断垂直方向是否可移动，即垂直方向的两个目标格子之间没有其余数字 noBlockHorizontal
function noBlockVertical(col, row1, row2, board) {
    for (var i = row1 + 1; i < row2; i++)
        if (board[i][col] != 0) // 若是在这二者之间的其它格子有数字，返回false
            return false;
    // 若是二者之间没数字，返回true
    return true;
}

function nomove(board) {
    if (canMoveLeft(board) ||
        canMoveRight(board) ||
        canMoveUp(board) ||
        canMoveDown(board))
        return false;

    return true;
}

另外的几个文件（2048.css、showAnimation.js）和以前同样，不作修改。快速连接请点击→2048小游戏——网页版（基础篇）