자바 스크립트 배열 값

Question

Checkclick 함수에서 유형 수가 초과되면 레일 유형을 0으로 되돌리려하지만 레일 유형의 수를 초과합니다. 직선 레일과 마찬가지로 수직 형 제로 타입과 수평 형 제로 타입이 있습니다. 곡선 레일에는 4 가지 유형이 있습니다. 레일을 클릭하면 유형이 증가하여 렌더 파트에서 변수 t 값이 변경되고 레일 모양이 변경됩니다.

//create canvas 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 1024; 
canvas.height = 640; 
document.body.appendChild(canvas); 
function init() { 
    setInterval(main(), 100); 
} 
var mouse_x; 
var mouse_y; 
canvas.addEventListener("mousemove", checkPos); 
canvas.addEventListener("mouseup", checkClick); 
function checkPos (mouseEvent) { 
    if (mouseEvent.pageX || mouseEvent.pageY == 0) { 
     mouse_x = mouseEvent.pageX - this.offsetLeft; 
     mouse_y = mouseEvent.pageY - this.offsetTop; 
    } 
    else if (mouseEvent.offsetX || mouseEvent.offsetY == 0) { 
     mouse_x = mouseEvent.offsetX; 
     mouse_y = mouseEvent.offsetY; 
    } 
} 
//this part is the problem 
function checkClick (mouseEvent) { 
    for (i = 0; i < all_rails.length; i++) { 
     if (mouse_x < all_rails[i].x + 32 && mouse_x > all_rails[i].x && mouse_y > all_rails[i].y && mouse_y < all_rails[i].y + 32) { 
      if (all_rails[i] !== 0) { 
       all_rails[i].type++; 
       if (all_rails[i] == 1 && all_rails[i].type > 1) { 
        all_rails[i].type = 0; 
       } 
       else if (all_rails[i] == 2 && all_rails[i].type > 3) { 
        all_rails[i].type = 0; 
       } 
      } 
     } 
    } 
} 
var bgImage = new Image(); 
bgImage.src = "image/bg.png"; 
var stationImage = new Image(); 
stationImage.src = "image/station.png" var s_r = new Array(); 
s_r[0] = new Image(); 
s_r[1] = new Image(); 
s_r[0].src = "image/s_rail0.png"; 
s_r[1].src = "image/s_rail1.png"; 
var c_r = new Array(); 
c_r[0] = new Image(); 
c_r[1] = new Image(); 
c_r[2] = new Image(); 
c_r[3] = new Image(); 
c_r[0].src = "image/c_rail0.png"; 
c_r[1].src = "image/c_rail1.png"; 
c_r[2].src = "image/c_rail2.png"; 
c_r[3].src = "image/c_rail3.png"; 
//start of rail 
//function that makes a rail 
function s_rail() { 
    //straight rails 
    this.x = column * 32; 
    this.y = row * 32; 
    this.type = s_type(); 
    // type 0 up down type 1 left right 
} 
function c_rail() { 
    //curved rails 
    this.x = column * 32; 
    this.y = row * 32; 
    this.type = c_type(); 
    //type 0 right down type 1 left down type 2 up right type 3 up left 
} 
//draw the rails 
s_rail.prototype.draw = function() { 
    var t = this.type; 
    ctx.drawImage(s_r[t], this.x, this.y); 
} 
c_rail.prototype.draw = function() { 
    var t = this.type; 
    ctx.drawImage(c_r[t], this.x, this.y); 
} 
//type randomize 
function s_type() { 
    if (Math.random() < 0.5) { 
     return 0; 
    } 
    else { 
     return 1; 
    } 
} 
function c_type() { 
    if (Math.random() <= 0.25) { 
     return 0; 
    } 
    else if (Math.random() > 0.25 && Math.random() <= 0.5) { 
     return 1; 
    } 
    else if (Math.random() > 0.5 && Math.random() <= 0.75) { 
     return 2; 
    } 
    else { 
     return 3; 
    } 
} 
//give the rails its position and type 
var all_rails = [0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1,]; 
var n = 0; 
//the index of rails 
var row = 0; 
var column; 
function make_rail() { 
    for (n; n < 640; n++) { 
     column = n % 32; 
     if (column == 0 && n !== 0) { 
      row++; 
     } 
     if (all_rails[n] == 1) { 
      all_rails[n] = new s_rail(); 
     } 
     else if (all_rails[n] == 2) { 
      all_rails[n] = new c_rail(); 
     } 
    } 
} 
//end of rails 
function render() { 
    ctx.drawImage(bgImage, 0, 0); 
    ctx.drawImage(stationImage, 0, 0); 
    ctx.drawImage(stationImage, 0, 576); 
    //render the rails fail 
    for (a = 0; a < all_rails.length; a++) { 
     if (all_rails[a] !== 0) { 
      all_rails[a].draw(); 
     } 
    } 
} 
function main() { 
    make_rail(); 
    render(); 
    requestAnimationFrame(main); 
} 
var w = window; 
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; 
init(); 

Answer 1

당신의 설명은 이해하기 어렵다고 생각합니다.

var all_rails = [0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1,]; 

하지만 make_rail 당신이 객체 s_rail 또는 오브젝트 c_rail를 할당 :이 유형을 증가 후 조건이

function checkClick (mouseEvent) { 
    for (i = 0; i < all_rails.length; i++) { 
     if (mouse_x < all_rails[i].x + 32 && mouse_x > all_rails[i].x && mouse_y >   all_rails[i].y && mouse_y < all_rails[i].y + 32) { 
      if (all_rails[i] !== 0) { 
       /* 
        Always happens, all_rails[i] is an object, not the number 0 
       */ 
       all_rails[i].type++; // Always increment 
       if (all_rails[i] == 1 && all_rails[i].type > 1) { 
        /* 
         Never happens, all_rails[i] is an object, not a value 1 
        */ 
        all_rails[i].type = 0; // Never resets 
       } 
       else if (all_rails[i] == 2 && all_rails[i].type > 3) { 
        /* 
         Never happens, all_rails[i] is an object, not a value 2 
        */ 
        all_rails[i].type = 0; // Never resets 
       } 
      } 
     } 
    } 
} 

을 충족하지 않습니다 그래서 당신은 같은 all_rails 선언, 숫자로 객체를 비교하는 모든 항목에 대해 초기 숫자 값을 무시합니다. 사용할 수있는 수정 사항은 초기 all_rails [n] 값 (권장되지 않음)으로 평가되거나 초기 숫자 값을 보유하는 새 속성을 추가하여 c_rail 및 s_rail에 인수로 전달하는 c_rail 및 s_rail 개체에 사용자 지정 valueOf를 추가하는 것입니다 그런 다음 checkClick 함수를 수정하여 객체 자체가 아니라 all_rails [i]의 속성을 비교합니다.

(나는 또한 당신이 실제 코드를 실행하기 전에 먼저 자바 스크립트에서 모든 것을 선언하는 것이 좋습니다 것입니다. 또한 생성자의 첫 글자를 대문자로 사용하고 카멜 케이스를 사용하는) 그는`모든처럼 어디