Question

我已经为游戏创建了地图，现在我想拒绝某些游戏上的移动。例如，一些瓦片是角色移动的路径，而其他瓦片是森林，草地或者角色无法移动的东西。这是我的地图代码：

var mapLeft = 224;
var mapTop = 160;
var protagonistLeft;
var protagonistTop;
var tileProperties = [
    [ true,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [true, true, true, true,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
    [false,false,false,false,false,false,],
  ]

我在考虑这样的事情，但我不知道该放什么，而不是“拒绝运动”和“允许运动”：

if (tileProperties = true){
    allow movement  
}
else {
    deny movement
}

编辑：

我实际上并没有移动播放器。它背后的地图正在移动，玩家总是在中间。但是接下来是代码：

function positionSettings() {
    document.getElementById("gameWindow").scrollLeft = mapLeft;
    document.getElementById("gameWindow").scrollTop = mapTop;
    document.getElementById("protagonist").style.left ="507px";
    document.getElementById("protagonist").style.top ="347px";
}

function moveMap(keystroke){
    switch(keystroke.keyCode){
        case 37:
            mapLeft = mapLeft - 8;
            positionSettings();
            break
        case 38:
            mapTop = mapTop - 8;
            positionSettings();
            break
        case 39:
            mapLeft = mapLeft + 8;
            positionSettings();
            break
        case 40:
            mapTop = mapTop + 8;
            positionSettings();
            break
    }
}

function loadMap(){
    for(updown=0;updown<50;updown++){
        for(leftright=0;leftright<50;leftright++){
            //alert(tileProperties[leftright][updown]);
            var tile = document.createElement("div");
            tile.setAttribute("class","mapTile");
            if(tileProperties[leftright][updown]){
                tile.setAttribute("style","background-color:#00FF00;left:"+ leftright * 32 +"px; top:"+ updown * 32+"px;");
            }
            else{
                tile.setAttribute("style","background-color:#FFFF00;left:"+ leftright * 32 +"px; top:"+ updown * 32+"px;");
            }
            var tileNum = document.createTextNode(leftright +":"+ updown);
            tile.appendChild(tileNum);
            document.getElementById("worldMap").appendChild(tile);
        }
    }
    positionSettings();
}

编辑：

这是我的HTML代码，如果它有帮助（还有一些样式代码，但它与运动无关，所以我不会在这里发布。）：

<body onload="loadMap()" onkeydown="moveMap(event)">

    <div id="gameWindow">

        <div id="worldMap">
        </div>

    </div>
        <div id="protagonist">
        </div>

</body>

Answer 1

更容易使用的方法是使用char map ...例如：

M = ["wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww",
     "w::::::::::::::::::::::::::::r::::::w",
     "w:::::::::::::t::::::t::::::r:::::::w",
     "w:::::::t:t:::::::t::::::::bbb::X:::w",
     "w::::::t::::::::::::::::::::r:::::::w",
     "E::*::::::t:::t:::::::::t:::r:::::::w",
     "w::::::::::::::::::::::::::::r::::::w",
     "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"];

例如t表示树，b表示桥梁，r表示河流，w表示墙，*表示树的初始位置玩家，X抓住的宝藏，E出口点（只有当你拿到宝藏时门才打开）等等......

然后，您可以为每个标志创建一个地图，并将其用于：

var can_walk = {'b': true, ':': true, 'X':  true};

...

if (can_walk[M[y1][x1]]) {
    // Step ok, update coords
    x = x1; y = y1;
}

Answer 2

我前段时间做了这个“游戏”以获得乐趣。它不完整，代码应该以更好的方式排列，但它应该对你有用：

JS

var canvas = document.getElementById("grid");
var context = canvas.getContext("2d");
var tile = new Image();
var cursorImg = new Image();
cursorImg.src = "http://www.sebissimos.com/imgs/rmt_icon.png";
var game = function(document) {
    this.document = document;
    this.grid = {};
    this.cursor = {
        spriteImg: cursorImg,
        x: 0,
        y: 0,
        cellx: 2,
        celly: 2
    };
    this.tile = function(idx, idy, x, y, type) {
        this.idx = idx;
        this.idy = idy;
        this.x = x;
        this.y = y;
        this.sprite = new Image();
        if (type === "dirt") {
            this.walkable = true;
            this.sprite.src = 'http://vignette1.wikia.nocookie.net/tibia/images/0/0b/Dirt_%28Light%29.gif/revision/latest?cb=20091024213053&path-prefix=en';
        }
        if (type === "rock") {
            this.walkable = false;
            this.sprite.src = 'http://christessmer.com/sprites/tiles/grey_rock_tile.png';
        }
    };
    this.map = [
        ["rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "rock", "dirt", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "dirt", "rock", "rock"],
        ["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock", "dirt", "dirt", "dirt", "rock"],
        ["rock", "rock", "dirt", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "dirt", "rock", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "dirt", "rock"],
        ["rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock", "rock"]
    ];
    this.firstStart = true;
    this.initGrid();
};

game.prototype = {
    getInput: function(kc) {
        actualx = this.cursor.cellx;
        actualy = this.cursor.celly;
        if (kc == 37) {
            nextx = actualx - 1;
            if (this.grid.squares[actualy][nextx] != undefined && this.grid.squares[actualy][nextx].walkable)
                this.cursor.cellx = nextx;
        }
        if (kc == 38) {
            nexty = actualy - 1;
            if (this.grid.squares[nexty][actualx] != undefined && this.grid.squares[nexty][actualx].walkable)
                this.cursor.celly = nexty;
        }
        if (kc == 39) {
            nextx = actualx + 1;
            if (this.grid.squares[actualy][nextx] != undefined && this.grid.squares[actualy][nextx].walkable)
                this.cursor.cellx = nextx;
        }
        if (kc == 40) {
            nexty = actualy + 1;
            if (this.grid.squares[nexty][actualx] != undefined && this.grid.squares[nexty][actualx].walkable)
                this.cursor.celly = nexty;
        }
    },
    start: function() {
        game = this;
        var interval = setInterval(function() {
            game.draw();
        }, 10);
        function checkKey(e) {
            e = e || window.event;
            game.getInput(e.keyCode);
        }

        document.onkeydown = checkKey;
    },
    draw: function() {
        if (this.firstStart) {
            this.grid.squares.forEach(function(yrow) {
                yrow.forEach(function(cell) {
                    context.drawImage(cell.sprite, cell.x, cell.y);
                });
            });
        }
        context.drawImage(this.cursor.spriteImg, this.grid.squares[this.cursor.celly][this.cursor.cellx].x, this.grid.squares[this.cursor.celly][this.cursor.cellx].y);
    },
    initGrid: function() {
        this.grid.squaresize = 32;
        this.grid.squares = [];
        var idx = 0;
        var idy = 0;
        var posx = 0;
        var posy = 0;
        for (var y = 0; y < this.map.length; y += 1) {
            this.grid.squares[y] = [];
            for (var x = 0; x < this.map[y].length; x += 1) {
                this.grid.squares[idy][idx] = new this.tile(idx, idy, posx, posy, this.map[y][x]);
                idx++;
                posx = this.grid.squaresize * idx;
            }
            idx = 0;
            posx = 0;
            idy++;
            posy = this.grid.squaresize * idy;
        }
    }
};
window.onload = function() {
    test1 = new game(document);
    test1.start();

};

HTML

<canvas id="grid" width="800" height="600"></canvas>

jsfiddle示例：https://jsfiddle.net/xqjp4j72/7/ 编辑：现在使用地图。

Answer 3

在移动之前，只需检查新位置是否有效。否则，什么也不做，让球员处于初始位置。

function moveMap(keystroke){
    switch(keystroke.keyCode){
        case 37:
            if (isValidTile(mapLeft - 8, mapTop)) {
                mapLeft = mapLeft - 8;
                positionSettings();
            } else {
                //Do nothing, as if no keypress, to ignore it
            }
            break;
        case 38:
            if (isValidTile(mapLeft, mapTop - 8)) {
                mapTop = mapTop - 8;
                positionSettings();
            } else {
                //Do nothing, as if no keypress, to ignore it
            }
            break;
        case 39:
            if (isValidTile(mapLeft + 8, mapTop)) {
                mapLeft = mapLeft + 8;
                positionSettings();
            } else {
                //Do nothing, as if no keypress, to ignore it
            }
            break;
        case 40:
            if (isValidTile(mapLeft, mapTop + 8)) {
                mapTop = mapTop + 8;
                positionSettings();
            } else {
                //Do nothing, as if no keypress, to ignore it
            }
            break;
    }
}

function isValidTile(leftright, updown) {
    if(!tileProperties[leftright][updown]) {
        return true;
    } else {
        return false;
    }
}

如何在基于图块的javascript游戏中拒绝某些图块上的移动？

3 个答案: