HTML5 Canvas游戲錯誤

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

您在地圖數組中使用數字，但是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) 。