b10k小型游戏问题

Question

我试着用2048年的外观重新创建一个小游戏(不确定它的名字，我叫它b10k)，因此如果我使用html元素看起来会更好，而且我真的不擅长使用它们，但我尝试了：https://github.com/Cicada3301/b10k。

我也可以发现，有一个错误，有时不能更新球员的位置上升或下降。我建议在非本地机器上使用这进行测试。

如果是建设性的，请侮辱我，不要忘记代码的可读性！你也能找出故障的原因吗？

以下是不想单击链接的JavaScript代码：

 function b10k() {
    var player,
        boardSide = 40,
        boardMargin = 2.5;
    function Level(map) {
        this.map = map;
        this.size = this.map.length;
    }
    function Player(x, y, map, container) {
        this.x =x;
        this.y =y;
        this.map = map;
        this.container = container;
        this.el = document.getElementById('player');
        this.render();
    }
    Player.prototype.move = function (dir) {
        var nextBlock =  this.map[this.y + dir.y]? this.map[this.y+dir.y][this.x + dir.x]:undefined;
        if (nextBlock !== undefined&&nextBlock!==1) {
            this.x += dir.x;
            this.y += dir.y
            this.move(dir);
        } else {
            this.render();
        }
    }
    Player.prototype.render = function () {
        this.el.style.left = '' + ((this.x * (boardSide / this.map.length) + boardMargin) + 'vw');
        this.el.style.top = '' + ((this.y * (boardSide / this.map.length) + boardMargin) + 'vw');
    }
    Level.prototype.play = function () {
        this.render(document.getElementById('map'))
        this.adjustElements();
    }
    Level.prototype.adjustElements = function () {
        var player = document.getElementById('player');
        player.style.setProperty('width', (boardSide/2 / this.size) + 'vw');
        player.style.setProperty('height', (boardSide/2 / this.size) + 'vw');
        player.style.setProperty('margin', (boardSide/4 / this.size) + 'vw');
        var goal = document.getElementById('goal');
        goal.style.setProperty('width', (boardSide/2 / this.size) + 'vw');
        goal.style.setProperty('height', (boardSide/2 / this.size) + 'vw');
        goal.style.setProperty('margin', (boardSide/4 / this.size) + 'vw');
    }
    Level.prototype.render = function (container) {
        container.innerHTML = '';
        for (var row = 0; row < this.size; ++row) {
            container.innerHTML += '<tr id=row' + row + '></tr>';
            var currentRow = document.getElementById('row' + row);
            for (var col = 0; col < this.size; ++col) {
                var addition = '';
                switch (this.map[row][col]) {
                    case 1: addition = 'class="wall ';
                        var sides=['top-right ', 'bottom-right ', 'bottom-left ', 'top-left'];
                        if (this.map[row + 1]) { if (this.map[row + 1][col] === 1) sides[1] = sides[2] = ''; }
                            else sides[1] = sides[2] = '';
                        if (this.map[row - 1]) { if (this.map[row - 1][col] === 1) sides[0] = sides[3] = ''; }
                            else sides[0] = sides[3] = '';
                        if (this.map[row][col + 1] === 1 || this.map[row][col + 1] === undefined) sides[0] = sides[1] = '';
                        if (this.map[row][col - 1] === 1 || this.map[row][col - 1] === undefined) sides[2] = sides[3] = '';
                        addition += sides[0] + sides[1] + sides[2] + sides[3] + '"';
                        break;
                    case 2: addition = 'id="goal"'; break;
                    case 3: player = new Player(col, row, this.map, document.getElementById('game')); this.map[row][col] = 0;
                }
                currentRow.innerHTML += '<td ' + addition + ' style="top:' + (row * (boardSide / this.size) + boardMargin) + 'vw; left:' + (col * (boardSide / this.size) + boardMargin) + 'vw; width:' + (boardSide / this.size) + 'vw; height:' + (boardSide / this.size) + 'vw"></td>';
            }
        }
    }
    var levels = [
        new Level([
            [0, 0, 0, 1, 0, 1, 2, 0, 0, 1],
            [0, 0, 1, 1, 1, 0, 1, 1, 0, 0],
            [1, 0, 1, 0, 0, 0, 1, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 1, 1, 1, 1, 1, 0, 1, 0],
            [0, 0, 1, 0, 0, 0, 1, 0, 0, 0],
            [0, 1, 0, 1, 0, 0, 1, 0, 0, 0],
            [0, 1, 1, 1, 0, 1, 1, 0, 0, 0],
            [0, 1, 1, 0, 0, 1, 0, 0 ,0, 1],
            [0, 0, 0, 0, 0, 0, 0, 1, 0, 3]
            ])
    ];
    levels[0].play();
    document.addEventListener('keydown', function (e) {
        var isKey = true;
        switch (e.keyCode) {
            case 37: player.move({x:-1, y:0}); break;
            case 38: player.move({x:0, y:-1}); break;
            case 39: player.move({x:1, y:0}); break;
            case 40: player.move({x:0, y:1}); break;
            default: isKey = false;
        }
        if (isKey) {
            e.preventDefault();
        }

    })
};
b10k();

这里的html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>b10k - towc</title>
    <link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <div id="container">
        <h1>Welcome to the b10k game!</h1>
        <span id="level">1</span>
        <div id="game">
            <div id="player"></div>
            <div id="board"></div>
            <table id="cell-container">
                <tbody id="map"></tbody>
            </table>
        </div>
        <div id="rules">
            <h2>Rules:</h2>
            <ol>
                <li>Press arrow keys to play</li>
                <li>Your goal is to get the green block in the red spot</li>
                <li>The green block only stops after hitting other blocks or margins</li>
            </ol>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>

最后，css：

body {
    background-color:beige;
    font-family:Helvetica, Arial, sans-serif;
}
#container {
    margin-left:30vw;
}
#level::before {
    content: 'level ';
}
#game {
    position:absolute;
    background-color:lightgray;
    border-radius:20px;
    margin-left:-5vw;
    width:45vw;
    height:45vw;
}
#cell-container {
    width:40vw;
    height:40vw;
    margin:2.5vw;
    background-color:azure;
    border-radius:10px;
}
#cell-container td {
    position:absolute;
}
#rules {
    margin-top:60vw;
}
#player {
    background-color:green;
    margin:1vw;
    width:2vw;
    height:2vw;
    transition:top 0.4s, left 0.4s;
    border-radius:2px;
    position:absolute;
}
.wall {
    background-color:gray;
    width:4vw;
    height:4vw;
}
.bottom-left{
    border-bottom-left-radius:9px;
}
.bottom-right {
    border-bottom-right-radius:9px;
}
.top-left {
    border-top-left-radius: 9px;
}
.top-right {
    border-top-right-radius:9px;
}
#goal {
    background-color:red;
    border-radius:3px;
    width:3vw;
    height:3vw;
}

Answer 1

我将主要做JS：

• 间距和代码样式:除了一行之外，一切都很完美。
• if(this.map[this.y-1]) if (this.map[this.y-1][this.x] ===0){ - if if？为什么不使用&&呢？请参阅短路评价
• 您的move*方法是重复的。也许有些抽象是合适的？
• 避免神奇的常量-什么是40？2.5是多少？
• 缺乏文档--您的construct方法确实可以使用它。

此外，如果您试图移动到顶层或底层，您的render()方法将永远不会到达。您应该添加针对this.map[expected Y value]的检查，以避免未定义。