javascript - 如何在基于图 block 的 javascript 游戏中拒绝某些图 block 上的移动?

标签 javascript

我已经为游戏创建了 map ,现在我想拒绝某些方 block 上的移动。例如,一些方 block 是 Angular 色移动的路径,而其他方 block 是森林、草地或类似 Angular 色无法移动的地方。这是我的 map 代码:

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
}

编辑:

我实际上并没有移动播放器。它后面的 map 在移动,玩家总是在中间。但是这里是代码:

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>

最佳答案

更容易使用的方法是使用字符映射...例如:

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 表示 a墙,* 玩家的初始位置,X 要抢的宝藏,E 导出点(只有当你有宝藏)等等……

然后您可以为每个标志创建一个 map 并将其用于:

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

...

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

关于javascript - 如何在基于图 block 的 javascript 游戏中拒绝某些图 block 上的移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30751548/

相关文章:

javascript - 如果某个字段的字符更多,则 html 页面的标题将 div 调整为向左浮动

javascript - Bootstrap Tags 在输入后自动清除自定义值

javascript - 如何在 Fabric.js 中将另一个对象的相同位置和缩放应用于一个对象?

javascript - HTML 中的随机图像背景

javascript - 检测浏览器关闭事件

javascript - 从顶部和底部偏移固定 div

javascript - Three.js 光线转换和将对象放置在平面上方不起作用

javascript - Knockout - 添加时如何保持模板输入与可观察数组同步?

javascript - Ajax 不将数据发送到 PHP 文件

未选中点击时复选框的 JavaScript 确认