HTML5キャンバスゲームバグ

Question

私は大学のプロジェクト用のゲームをデザインしていました。マップエディタを最初に作って、配列やSQLに数値を入れるのではなく、データベース。

とにかく、ほとんどすべてが正しく動作しています。ほぼすべて...私はタイルやオブジェクトを置き換えることができますが、唯一の問題は、マップ上の位置に応じて配列を0にリセットしてオブジェクトをクリアしたいときにバグが発生し、私に奇妙なエラーが発生することです。ここで

は私のゲームへのリンクです：http://81.98.176.230/silverpolis/game/canvas_test4.php

そして、ここでは、あなたの代わりにこれを見てすることを好む場合、私はので、私は機能Iを指してピンすることはできません間違っているどの部分かわからないコードでありますお見せする必要があります。

<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){ 

が予期せず、真と評価されます。あなたがこの問題を回避できたいくつかの方法があります

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

：==を使用している場合にのみ適用され"0"の「falsyness」ということを覚えておいてください

if(drawObj == true){ 

は、しかし、私はこの、以前の操作を行う方が良いことだと思います上：

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

一般的なルールとして、私は==またはJavaScriptでif(varname)を使用して決してお勧めしませんと思います。