HTML5 캔버스 게임 버그

Question

저는 대학 프로젝트 용 게임을 디자인 해 왔습니다.지도 편집기를 만드는 것이 재미있을 것이라고 생각했기 때문에 배열이나 SQL에 숫자를 배치하는 대신 시각적 보조 도구를 사용하여지도를 만들 수 있습니다. 데이터 베이스.

하지만 어쨌든 거의 모든 것이 올바르게 작동하고 있습니다. 거의 모든 것 ... 타일과 장소 객체를 바꿀 수있는 유일한 문제는지도의 위치에 따라 배열을 0으로 재설정하여 객체를 지울 때 버그가 발생하여 이상한 오류가 발생한다는 것입니다. 그래서 내가 소수점 함수 I를 고정 할 수없는 잘못 간 어떤 부분 모른다, 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

하지만, 선택 요소의 값 대신에 문자열 "0"을두고 : 당신을 표시해야합니다. 그런 다음

후,이 라인 :

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

가 예기치 않게 true로 평가합니다. 이 주위에 얻을 수있는 몇 가지 방법있다

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

일반적으로, 나는 == 또는 자바 스크립트에서 if(varname)를 사용하여 결코 추천하지 않습니다 것입니다.