HTML5画布游戏错误

Question

我一直在为一个大学项目设计一个游戏，我认为首先制作一个地图编辑器会很有趣，这样我最终可以使用视觉辅助工具制作地图，而不是在数组或SQL数据库中放置数字。

但无论如何，几乎所有的东西都在正常工作。几乎所有。。。我可以更改瓷砖和放置对象，唯一的问题是，当我想根据地图上的位置将数组重置为0来清除对象时，它会出错，并给我一个奇怪的错误。

这是我的游戏链接：http://81.98.176.230/silverpolis/game/canvas_test4.php

这是代码，如果你更喜欢看这个，我不知道哪个部分出了问题，所以我不能确定我需要向你展示的功能：

<style>
body{
    background:#333;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    color:#FFF;
}
#page-wrapper{
    margin:auto;
    width:1280px;
}
#interface-wrapper{
    background:#222;
    padding:5px;
}
</style>
<div id="page-wrapper">
    <canvas id="viewport" width="1280" height="760" style="background:#111;"></canvas>
    <div id="interface-wrapper">
        <span>Select Placement Type</span>
        <select id="selectPlacementType">
            <option value="0">Tile</option>
            <option value="1">Object</option>
        </select>
        <span>Select Tile Type</span>
        <select id="selectTileType">
            <option value="0">Grass</option>
            <option value="1">Water</option>
            <option value="2">Lava</option>
            <option value="3">Pavement</option>
        </select>
        <span>Select Object Type</span>
        <select id="selectObjType">
            <option value="0">Clear</option>
            <option value="1">Tree</option>
        </select>
        <input type="button" value="Reset Map" onClick="tileMapPopulate(); objMapPopulate();" />
    </div>
</div>
<script type="text/javascript">
    // Start the game
    window.onload = init;
    // Set cavas properties
    var c = document.getElementById("viewport");
    var ctx = c.getContext("2d");
    var cWidth = 1280;
    var cHeight = 760;
    // Setup sprite initialisation
    var spriteDir = "./lib/icons/own_icons/";
    var spritesLoaded = 0;
    var spriteLoadTimer;
    // Set map tile properties
    var tileWidth = 80;
    var tileHeight = 40;
    var tileMap = new Array();
    tileTypes = Array("grass.png", "water.png", "lava.png", "pavement.png");
    tileSprite = new Array();
    // Set object tile properties
    var objWidth = 80;
    var objHeight = 80;
    var objMap = new Array();
    objTypes = Array("tree.png");
    objSprite = new Array();
    // Set special tile properties
    spcTypes = Array("hover.png", "logo.png");
    spcSprite = new Array();
    // Populate a preset map size to the array
    var tileMapSizeX = 20;
    var tileMapSizeY = 20;
    function tileMapPopulate(){
        for(i = 0; i < tileMapSizeX; i++){
            tileMap[i] = new Array();
            for(j = 0; j < tileMapSizeY; j++){
                tileMap[i].push(0);
            }
        }
    }
    function objMapPopulate(){
        for(i = 0; i < tileMapSizeX; i++){
            objMap[i] = new Array();
            for(j = 0; j < tileMapSizeY; j++){
                objMap[i].push(0);
            }
        }
    }
    // Set map offsets for map positioning
    var mapOffsetX = 500;
    var mapOffsetY = 50;
    // Setup mouse properties
    var mouseX;
    var mouseY;
    // Loads all sprites from tileTypes[]
    function spriteLoad(){
        for(i = 0; i < tileTypes.length; i++){
            tileSprite[i] = new Image();
            tileSprite[i].src = spriteDir + tileTypes[i];
            tileSprite[i].onload = function(){
                spritesLoaded++;
            }
        }
        for(i = 0; i < objTypes.length; i++){
            objSprite[i] = new Image();
            objSprite[i].src = spriteDir + objTypes[i];
            objSprite[i].onload = function(){
                spritesLoaded++;
            }
        }
        for(i = 0; i < spcTypes.length; i++){
            spcSprite[i] = new Image();
            spcSprite[i].src = spriteDir + spcTypes[i];
            spcSprite[i].onload = function(){
                spritesLoaded++;
            }
        }
    }
    // Checks if all sprites have loaded
    function spriteLoadCheck(){
        if(spritesLoaded == tileTypes.length + objTypes.length + spcTypes.length){
            clearInterval(spriteLoadTimer);
            spriteLoadTimer = setInterval(gameUpdate, 50);
        }
    }
    // Draws the map tiles
    function drawMap(){
        for(i = 0; i < tileMap.length; i++){
            for(j = 0; j < tileMap[i].length; j++){
                var drawTile = tileMap[i][j];
                var drawObj = objMap[i][j];
                var tileXPos = (i - j) * tileHeight + mapOffsetX;
                var tileYPos = (i + j) * tileHeight / 2 + mapOffsetY;
                ctx.drawImage(tileSprite[drawTile], tileXPos, tileYPos);
                if(drawObj){
                    ctx.drawImage(objSprite[drawObj - 1], tileXPos, tileYPos - (objSprite[drawObj - 1].height / 2));
                }
                if(i == mouseX && j == mouseY){
                    ctx.drawImage(spcSprite[0], tileXPos, tileYPos);
                }
            }
        }
    }
    // Set map scrolling variables
    var mapOffsetXScroll;
    var mapOffsetYScroll;
    var mapOffsetScrollBorder = 20;
    var mapOffsetScrollSpeed = 10;
    // Check if the mouse has moved onto or off the edge of the canvas and draw indicators
    function mapScroller(){
        ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
        if(mapOffsetXScroll == 'left'){
            mapOffsetX += mapOffsetScrollSpeed;
            ctx.fillRect(mapOffsetScrollBorder, mapOffsetScrollBorder, mapOffsetScrollBorder * 2, cHeight - (mapOffsetScrollBorder * 2));
        }
        if(mapOffsetXScroll == 'right'){
            mapOffsetX -= mapOffsetScrollSpeed;
            ctx.fillRect(cWidth - (mapOffsetScrollBorder * 3), mapOffsetScrollBorder, mapOffsetScrollBorder * 2, cHeight - (mapOffsetScrollBorder * 2))
        }
        if(mapOffsetYScroll == 'up'){
            mapOffsetY += mapOffsetScrollSpeed;
            ctx.fillRect(mapOffsetScrollBorder, mapOffsetScrollBorder, cWidth - (mapOffsetScrollBorder * 2), mapOffsetScrollBorder * 2)
        }
        if(mapOffsetYScroll == 'down'){
            mapOffsetY -= mapOffsetScrollSpeed;
            ctx.fillRect(mapOffsetScrollBorder, cHeight - (mapOffsetScrollBorder * 3), cWidth - (mapOffsetScrollBorder * 2), mapOffsetScrollBorder * 2)
        }
    }
    // Get the mouse coordinates in relation to the map and checks if mouse is on edge of the canvas for scrolling
    function mouseCheck(e){
        var x = e.pageX;
        var y = e.pageY;
        // Move the map if the screen goes towards the egdes
        if((x < c.offsetLeft + (mapOffsetScrollBorder * 3)) && (x > c.offsetLeft + mapOffsetScrollBorder)){
            mapOffsetXScroll = 'left';
        }
        else if((x > c.offsetLeft + cWidth - (mapOffsetScrollBorder * 3)) && (x < c.offsetLeft + cWidth - mapOffsetScrollBorder)){
            mapOffsetXScroll = 'right';
        }
        else
        {
            mapOffsetXScroll = 0;
        }
        if((y < c.offsetTop + (mapOffsetScrollBorder * 3)) && (y > c.offsetTop + mapOffsetScrollBorder)){
            mapOffsetYScroll = 'up';
        }
        else if((y > c.offsetTop + cHeight - (mapOffsetScrollBorder * 3)) && (y < c.offsetTop + cHeight - mapOffsetScrollBorder)){
            mapOffsetYScroll = 'down';
        }
        else
        {
            mapOffsetYScroll = 0;
        }
        // Compensate for isometric tiling
        mouseY = (2 * (y - c.offsetTop - mapOffsetY) - x + c.offsetLeft + mapOffsetX) / 2;
        mouseX = x + mouseY - mapOffsetX - tileHeight - c.offsetLeft;
        mouseY = Math.round(mouseY / tileHeight);
        mouseX = Math.round(mouseX / tileHeight);
    }
    // Changes the tile that mouse is over
    function mouseClick(e){
        var placementType = document.getElementById('selectPlacementType').value;
        var tileType = document.getElementById('selectTileType').value;
        var objType = document.getElementById('selectObjType').value;
        // Check that the mouse is exactly over a tile and not off the map
        if(placementType == 0){
            for(i = 0; i < tileMap.length; i++){
                for(j = 0; j < tileMap[i].length; j++){
                    if(i == mouseX && j == mouseY){
                        tileMap[mouseX][mouseY] = tileType;
                    }
                }
            }
        }
        // Check that the mouse is exactly over a tile and not off the map
        if(placementType == 1){
            for(i = 0; i < objMap.length; i++){
                for(j = 0; j < objMap[i].length; j++){
                    if(i == mouseX && j == mouseY){
                        objMap[mouseX][mouseY] = objType;
                    }
                }
            }
        }
    }
    // Paints onto the canvas
    function drawCanvas(){
        drawMap();
    }
    // Update game elements every 50 milliseconds
    function gameUpdate(){
        ctx.clearRect(0, 0, cWidth, cHeight);
        drawCanvas();
        mapScroller();
        drawDebugText();
    }
    // Setup debugging text
    function drawDebugText(){
        ctx.font = "10pt Courier New";
        ctx.fillStyle = "#FFF";
        ctx.fillText(mouseX + ',' + mouseY, 0, 10);
    }
    // Setup intital load events
    function init(){
        tileMapPopulate();
        objMapPopulate();
        spriteLoad();
        spriteLoadTimer = setInterval(spriteLoadCheck, 100);
        c.addEventListener("mousemove", mouseCheck, false);
        c.addEventListener("mouseup", mouseClick, false);
    }
</script>

Answer 1

您在map数组中使用数字，但select元素的值会将字符串"0"放入其中。

然后，这行：

 var drawObj = objMap[i][j];
 ...
 if(drawObj){

出乎意料地评估为true。请记住，"0"的"虚假性"仅适用于使用==:时

 if(0)  // true
 if("0") // true
 if("0" == true) // false
 if("0" == false) // true

有几种方法可以解决这个问题：

  if(drawObj == true){

但我认为最好早点这样做：

  objMap[mouseX][mouseY] = parseInt(objType,10);

一般来说，我建议不要在Javascript中使用==或if(varname)。