jontyy-2048

最新推荐文章于 2022-05-17 23:24:48 发布

jontyy

最新推荐文章于 2022-05-17 23:24:48 发布

阅读量385

点赞数

分类专栏： web-demo

本文链接：https://blog.csdn.net/YJD19970908/article/details/80836171

版权

web-demo 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

jontyy-2048

jontyy-2048

introduce

嗯，就是闲的无聊，做了个2048
实现的功能很少，保证了基础的上下左右和分数的记录
后期会加上分数的记录，比如前十名的展示
原码在github上
https://github.com/YJD199798/jontyy-2048.git

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./jontyy-2048.css">
    <title>jontyy-2048</title>
</head>

<body>
    <header>
        <h1>jontyy-2048</h1>
        <a id="newGameButton">New Game</a>
        <p>score:
            <span id="score">0</span>
        </p>
    </header>
    <div id="grid-continer">
        <div id="grid-cell-0-0" class="grid-cell"></div>
        <div id="grid-cell-0-1" class="grid-cell"></div>
        <div id="grid-cell-0-2" class="grid-cell"></div>
        <div id="grid-cell-0-3" class="grid-cell"></div>
        <div id="grid-cell-1-0" class="grid-cell"></div>
        <div id="grid-cell-1-1" class="grid-cell"></div>
        <div id="grid-cell-1-2" class="grid-cell"></div>
        <div id="grid-cell-1-3" class="grid-cell"></div>
        <div id="grid-cell-2-0" class="grid-cell"></div>
        <div id="grid-cell-2-1" class="grid-cell"></div>
        <div id="grid-cell-2-2" class="grid-cell"></div>
        <div id="grid-cell-2-3" class="grid-cell"></div>
        <div id="grid-cell-3-0" class="grid-cell"></div>
        <div id="grid-cell-3-1" class="grid-cell"></div>
        <div id="grid-cell-3-2" class="grid-cell"></div>
        <div id="grid-cell-3-3" class="grid-cell"></div>
    </div>
    <script src="./jquery-3.3.1.min.js"></script>
    <script src="./jontyy-main.js"></script>
    <script src="./jontyy-support.js"></script>
    <script src="./jontyy-game.js"></script>
    <script src="./jontyy-anmiotion.js"></script>
</body>

</html>

main.js

$(function () {
    newGame();
});

function newGame() {
    score = 0;
    updateScore(score);
    // 初始化棋盘格和数字格
    init();
    // 在随机位置的两个格子生成随机数字
    generateOneNumber();
    generateOneNumber();
}

var border = new Array();
var score = 0;

function init() {
    updateScore(score);
    for (var i = 0; i != 4; i++) {
        // 定义了一个二维数组
        border[i] = new Array();
        for (var j = 0; j != 4; j++) {
            // 初始化小格子的值为零
            border[i][j] = 0;
            var gridCell = $("#grid-cell-" + i + "-" + j);
            // 通过getPostTop设置每个格子距离顶部的值
            gridCell.css("top", getPostTop(i, j));
            // 通过getPostLeft设置每个格子距离左边的值
            gridCell.css("left", getPostLeft(i, j));
        }
    }
    updateBorderView();
}

function updateBorderView() {
    $(".number-cell").remove();
    for (var i = 0; i != 4; i++) {
        for (var j = 0; j != 4; j++) {
            $("#grid-continer").append("<div class = 'number-cell' id = 'number-cell-" + i + "-" + j + "'></div>");
            var numberCeil = $("#number-cell-" + i + "-" + j);
            // 如果棋盘格的值为0的话，那么设置高度和宽度都为0
            // 如果棋盘格的值不为0，那么设置高度和宽度为75 并设置前景色和背景色以及数字的值
            if (border[i][j] == 0) {
                numberCeil.css("with", "0px");
                numberCeil.css("height", "0px");
                numberCeil.css("top", getPostTop(i, j) + 50);
                numberCeil.css("left", getPostLeft(i, j) + 50);
            } else {
                numberCeil.css("width", "100px");
                numberCeil.css("height", "100px");
                numberCeil.css("top", getPostTop(i, j));
                numberCeil.css("left", getPostLeft(i, j));
                numberCeil.css("background-color", getNumberBackgroundColor(border[i][j]));
                numberCeil.css("color", getNumberColor(border[i][j]));
                numberCeil.html(border[i][j])
            }
        }
    }
}

function generateOneNumber() {
    // 生成一个随机数
    // 生成一个随机位置
    // 在随机位置上显示随机数字
    var rendx = parseInt(Math.floor(Math.random() * 4));
    var rendy = parseInt(Math.floor(Math.random() * 4));
    // console.log(rendx);
    // console.log(rendy);
    while (true) {
        if (border[rendx][rendy] == 0) {
            break;
        } else {
            var rendx = parseInt(Math.floor(Math.random() * 4));
            var rendy = parseInt(Math.floor(Math.random() * 4));
        }
    }
    // 随机生成的数字
    var rendNumber = Math.random() > 0.5 ? 2 : 4;
    // console.log(rendNumber);
    border[rendx][rendy] = rendNumber;
    // 实现随机数字产生的动画
    showNumberWithAnimotion(rendx, rendy, rendNumber);
}

$("#newGameButton").click(function () {
    newGame();
})

support.js

function getPostTop(i, j) {
    return 20 + 120 * i;
}

function getPostLeft(i, j) {
    return 20 + 120 * j;
}


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 8192:
            return "#93c";
            break;
    }
}

function getNumberColor(number) {
    if (number <= 4) {
        return "#776e5b";
    }
    return "White";
}

function canMoveLeft(border) {
    for (var i = 0; i != 4; i++) {
        for (var j = 1; j != 4; j++) {
            if (border[i][j] != 0) {
                if (border[i][j - 1] == 0 || border[i][j - 1] == border[i][j]) {
                    return true;
                }
            }
        }
    }
    return false;
}

function canMoveRight(border) {
    for (var i = 0; i != 4; i++) {
        for (var j = 2; j != -1; j--) {
            if (border[i][j] != 0) {
                if (border[i][j + 1] == 0 || border[i][j + 1] == border[i][j]) {
                    return true;
                }
            }
        }
    }
    return false;
}

function canMoveUp(border) {
    for (var j = 0; j != 4; j++) {
        for (var i = 1; i != 4; i++) {
            if (border[i][j] != 0) {
                if (border[i - 1][j] == 0 || border[i - 1][j] == border[i][j]) {
                    return true;
                }
            }
        }
    }
    return false;
}

function canMoveDown(border) {
    for (var j = 0; j != 4; j++) {
        for (var i = 2; i != -1; i--) {
            if (border[i][j] != 0) {
                if (border[i + 1][j] == 0 || border[i + 1][j] == border[i][j]) {
                    return true;
                }
            }
        }
    }
    return false;
}

function noBlockHorization(row, col1, col2, border) {
    for (var i = col1 + 1; i != col2; i++) {
        if (border[row][i] != 0) {
            return false;
        }
    }
    return true;
}

function noBlockHorization2(col, col1, col2, border) {
    for (var i = col1 + 1; i != col2; i++) {
        if (border[i][col] != 0) {
            return false;
        }
    }
    return true;
}

function isGameOver() {
    if (!canMoveLeft(border) && (!canMoveRight(border)) && !canMoveUp(border) && !canMoveDown(border)) {
        alert("gameOver" + " and you score is " + score);
        return true;
    }
}

function updateScore(score) {
    $("#score").html(score);
}

animation

function showNumberWithAnimotion(i, j, rendNumber) {
    var numberCell = $("#number-cell-" + i + "-" + j);
    numberCell.css("background-color", getNumberBackgroundColor(rendNumber));
    numberCell.css("color", getNumberColor(rendNumber));
    numberCell.text(rendNumber);
    numberCell.animate({
        width: "100px",
        height: "100px",
        top: getPostTop(i, j),
        left: getPostLeft(i, j),
    }, 50);
}

function showMoveAnimation(fromx, fromy, tox, toy) {
    // 获取当前数据
    var numberCell = $("#number-cell-" + fromx + "-" + fromy);
    numberCell.animate({
        top: getPostTop(tox, toy),
        left: getPostLeft(tox, toy)
    }, 200);
}

game.js

// keydown表示键盘呗按下去
$(document).keydown(function (event) {
    var x = event.keyCode;
    switch (parseInt(x)) {
        // 左上右下
        case 37:
            event.preventDefault();
            if (moveLeft()) {
                generateOneNumber();
                isGameOver();
            }
            break;
        case 38:
            event.preventDefault();
            if (moveUp()) {
                generateOneNumber();
                isGameOver();
            }
            break;
        case 39:
            event.preventDefault();
            if (moveRight()) {
                generateOneNumber();
                isGameOver();
            }
            break;
        case 40:
            event.preventDefault();
            if (moveDown()) {
                generateOneNumber();
                isGameOver();
            }
            break;
    }
});

function moveLeft() {
    // return a bootlen
    if (!canMoveLeft(border)) {
        return false;
    }
    // 向左移动 上下左右对i和j有区分
    for (var i = 0; i != 4; i++) {
        for (var j = 1; j != 4; j++) {
            if (border[i][j] !== 0) {
                for (var k = 0; k != j; k++) {
                    if (border[i][k] == 0 && noBlockHorization(i, k, j, border)) {
                        // 向左移动
                        showMoveAnimation(i, j, i, k);
                        border[i][k] = border[i][j];
                        border[i][j] = 0;
                    } else if (border[i][k] == border[i][j] && noBlockHorization(i, k, j, border)) {
                        // 向左移动
                        showMoveAnimation(i, j, i, k);
                        border[i][k] += border[i][j];
                        score += border[i][j];
                        border[i][j] = 0;
                        updateScore(score);
                    }
                }
            }
        }
    }

    setTimeout("updateBorderView()", 200);
    return true;
}


function moveRight() {
    // return a bootlen
    if (!canMoveRight(border)) {
        return false;
    }
    // 向右移动 上下左右对i和j有区分
    for (var i = 0; i != 4; i++) {
        for (var j = 2; j != -1; j--) {
            if (border[i][j] !== 0) {
                for (var k = 3; k != j; k--) {
                    if (border[i][k] == 0 && noBlockHorization(i, j, k, border)) {
                        // 移动
                        showMoveAnimation(i, j, i, k);
                        border[i][k] = border[i][j];
                        border[i][j] = 0;
                    } else if (border[i][k] == border[i][j] && noBlockHorization(i, j, k, border)) {
                        // 向左移动
                        showMoveAnimation(i, j, i, k);
                        border[i][k] += border[i][j];
                        score += border[i][j];
                        border[i][j] = 0;
                        updateScore(score);
                    }
                }
            }
        }
    }
    setTimeout("updateBorderView()", 200);
    return true;
}

function moveUp() {
    // return a bootlen
    if (!canMoveUp(border)) {
        return false;
    }
    // 向左移动 上下左右对i和j有区分
    for (var j = 0; j != 4; j++) {
        for (var i = 1; i != 4; i++) {
            if (border[i][j] !== 0) {
                for (var k = 0; k != i; k++) {
                    if (border[k][j] == 0 && noBlockHorization2(j, k, i, border)) {
                        // 向左移动
                        showMoveAnimation(i, j, k, j);
                        border[k][j] = border[i][j];
                        border[i][j] = 0;
                    } else if (border[k][j] == border[i][j] && noBlockHorization2(j, k, i, border)) {
                        // 向左移动
                        showMoveAnimation(i, j, k, j);
                        border[k][j] += border[i][j];
                        score += border[i][j];
                        border[i][j] = 0;
                        updateScore(score);
                    }
                }
            }
        }
    }
    setTimeout("updateBorderView()", 200);
    return true;
}

function moveDown() {
    // return a bootlen
    if (!canMoveDown(border)) {
        return false;
    }
    // 向右移动 上下左右对i和j有区分
    for (var j = 0; j != 4; j++) {
        for (var i = 2; i != -1; i--) {
            if (border[i][j] !== 0) {
                for (var k = 3; k != i; k--) {
                    if (border[k][j] == 0 && noBlockHorization2(j, i, k, border)) {
                        // 移动
                        showMoveAnimation(i, j, k, j);
                        border[k][j] = border[i][j];
                        border[i][j] = 0;
                    } else if (border[k][j] == border[i][j] && noBlockHorization2(j, i, k, border)) {
                        // 向左移动
                        showMoveAnimation(i, j, k, j);
                        border[k][j] += border[i][j];
                        score += border[i][j];
                        border[i][j] = 0;
                        updateScore(score);
                    }
                }
            }
        }
    }
    setTimeout("updateBorderView()", 200);
    return true;
}

pic

writer

Jontyy

jontyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jontyy-2048

jontyy-2048introduceindex.htmlmain.jssupport.jsanimationgame.jspicwriterjontyy-2048introduce嗯，就是闲的无聊，做了个2048 实现的功能很少，保证了基础的上下左右和分数的记录后期会加上分数的记录，比如前十名的展示原码在github上 https:/...
复制链接

扫一扫

专栏目录