자바 스크립트 부울 문제

Question

그래서 자바 스크립트에서 게임을 만드는거야 내가 디버깅 모드를 만들려고하지만 변수 debugVariable을 만들 때 그것은 어떻게 든 참으로 읽는 부울

var debugVariable = new Boolean(); 

로 설정하고있어 , 내가 무엇을 하던지. 우선 여기에 코드의 전체 블록이

var debugVariable = new Boolean(); 
function debuggCheckBox() 
{ 
    if(debugVariable){ debugVariable = false;} 
    else {debugVariable = true;} 
} 

function testNumber1() 
{ 
    var num1 = Math.floor(Math.random() * 11); 
    var num2 = Math.floor(Math.random() * 3); 
    var link = "GAME 2"; 
    var answer = prompt('LEVEL 1: What is ' + num1 + " * " + num2 +"?"); 
    if (!answer || answer == ""){ 
     testNumber1(); 
    } 
    else if (num1 * num2 == answer) 
    { 
     alert('Correct'); 
    } 
    else if (num1 * num2 != answer) 
    { 
     alert('Incorrect'); 
     testNumber1(); 
    } 
} 
testNumber1(); 
function testNumber2() 
{ 
    var num1 = Math.floor(Math.random() * 21); 
    var num2 = Math.floor(Math.random() * 13); 
    var answer = prompt('LEVEL 2: What is ' + num1 + " * " + num2 +"?"); 
    if (num1 * num2 == answer) 
    { 
     alert('Correct'); 
     ++monstersCaught; 
     reset(); 
     ++level; 
    } 
    else if (num1 * num2 != answer) 
    { 
     alert('Incorrect'); 
     testNumber2(); 
    } 
} 
function testNumber3() 
{ 
    var num1 = Math.floor(Math.random() * 31); 
    var num2 = Math.floor(Math.random() * 23); 
    var answer = prompt('LEVEL 3: What is ' + num1 + " * " + num2 +"?"); 
    if (num1 * num2 == answer) 
    { 
     alert('Correct'); 
     ++monstersCaught; 
     ++level; 
     reset(); 
    } 
    else if (num1 * num2 != answer) 
    { 
     alert('Incorrect'); 
     testNumber3(); 
    } 
} 

//checking if canvas is supported 
function checkCanvasSupported(){ 
    var element = document.createElement('canvas'); 
    return !!(element.getContext && element.getContext('2d')); 
} 
//if canvas not supported then alert user 
if (!checkCanvasSupported()){ 
    alert('Sorry cavas isn\'t supported by your internet browser!'); 
} 

// Create the canvas 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 480; 
document.body.appendChild(canvas); 

// Background image 
var bgReady = false; 
var bgImage = new Image(); 
bgImage.onload = function() { 
    bgReady = true; 
}; 
bgImage.src = "images/background.png"; 

// Hero image 
var heroReady = false; 
var heroImage = new Image(); 
heroImage.onload = function() { 
    heroReady = true; 
}; 
heroImage.src = "images/hero.png"; 

// Monster image 
var monsterReady = false; 
var monsterImage = new Image(); 
monsterImage.onload = function() { 
    monsterReady = true; 
}; 
monsterImage.src = "images/monster.png"; 

// Game objects 
var hero = { 
    speed: 256 // movement in pixels per second 
}; 
var monster = {}; 
var monster1 = {}; 
var monster2 = {}; 
var monstersCaught = 0; 
var level = 1; 

// Handle keyboard controls 
var keysDown = {}; 

addEventListener("keydown", function (e) { 
    keysDown[e.keyCode] = true; 
}, false); 

addEventListener("keyup", function (e) { 
    delete keysDown[e.keyCode]; 
}, false); 

// Reset the game when the player catches a monster 
var reset = function() { 
    hero.x = canvas.width/2; 
    hero.y = canvas.height/2; 
}; 

var reset0 = function() { 
    hero.x = canvas.width/2; 
    hero.y = canvas.height/2; 
    // Throw the monster somewhere on the screen randomly 
    monster.x = 32 + (Math.random() * (canvas.width - 64)); 
    monster.y = 32 + (Math.random() * (canvas.height - 64)); 
} 

var reset1 = function() { 
    hero.x = canvas.width/2; 
    hero.y = canvas.height/2; 

    // Throw the monster somewhere on the screen randomly 
    monster1.x = 32 + (Math.random() * (canvas.width - 64)); 
    monster1.y = 32 + (Math.random() * (canvas.height - 64)); 
}; 

var reset2 = function() { 
    hero.x = canvas.width/2; 
    hero.y = canvas.height/2; 

    // Throw the monster somewhere on the screen randomly 
    monster2.x = 32 + (Math.random() * (canvas.width - 64)); 
    monster2.y = 32 + (Math.random() * (canvas.height - 64)); 
}; 

// Update game objects 
var update = function (modifier) { 
    if (38 in keysDown) { // Player holding up 
     hero.y -= hero.speed * modifier; 
     if(hero.y < 0){ 
      reset(); 
     } 
    } 
    if (40 in keysDown) { // Player holding down 
     hero.y += hero.speed * modifier; 
     if(hero.y > canvas.height){ 
     reset(); 

     } 
    } 
    if (37 in keysDown) { // Player holding left 
     hero.x -= hero.speed * modifier; 
     if(hero.x < 0){ 
      reset(); 
     } 
    } 
    if (39 in keysDown) { // Player holding right 
     hero.x += hero.speed * modifier; 
     if(hero.x > canvas.width){ 
      reset(); 
     } 
    } 
    // Are they touching? 
    if (
     hero.x <= (monster.x + 32) 
     && monster.x <= (hero.x + 32) 
     && hero.y <= (monster.y + 32) 
     && monster.y <= (hero.y + 32) 
    ) { 
     ++monstersCaught; 
     reset0(); 
    } 
    else if (
     hero.x <= (monster1.x + 32) 
     && monster1.x <= (hero.x + 32) 
     && hero.y <= (monster1.y + 32) 
     && monster1.y <= (hero.y + 32) 
    ) { 
     ++monstersCaught; 
     reset1(); 
    } 
    else if (
     hero.x <= (monster2.x + 32) 
     && monster2.x <= (hero.x + 32) 
     && hero.y <= (monster2.y + 32) 
     && monster2.y <= (hero.y + 32) 
    ) { 
     ++monstersCaught; 
     reset2(); 
    } 
    if (monstersCaught == 5){ 
     testNumber2(); 
    } 
    else if (monstersCaught == 10){ 
     testNumber3(); 
    } 
}; 

// Draw everything 
var render = function() { 
    if (bgReady) { 
     ctx.drawImage(bgImage, 0, 0); 
    } 

    if (heroReady) { 
     ctx.drawImage(heroImage, hero.x, hero.y); 
    } 

    if (monsterReady) { 
     ctx.drawImage(monsterImage, monster.x, monster.y); 
     ctx.drawImage(monsterImage, monster1.x, monster1.y); 
     ctx.drawImage(monsterImage, monster2.x, monster2.y); 
    } 
    // Score 
    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "left"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Score: " + monstersCaught, 32, 32); 

    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "right"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Level: " + level, 400, 32); 

    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "center"; 
    ctx.textBaseline = "top"; 
    if(debugVariable = true) 
    { 
     var coords = 'Co-ords(' + hero.x + "," + hero.y + ')'; 
    } else { 
     coords = ""; 
    } 
    ctx.fillText(coords , 100, 200); 

    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "center"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Debug: " + debugVariable, 100, 100); 



}; 

// The main game loop 
var main = function() { 
    var now = Date.now(); 
    var delta = now - then; 

    update(delta/1000); 
    render(); 

    then = now; 
}; 

// Let's play this game! 
reset(); 
reset0(); 
reset1(); 
reset2(); 
var then = Date.now(); 
setInterval(main, 1); // Execute as fast as possible 

그리고 여기가 (행 1-6)

var debugVariable = new Boolean(); 
function debuggCheckBox() 
{ 
    if(debugVariable){ debugVariable = false;} 
    else {debugVariable = true;} 
} 

(선 233-270) 문제의 주요 영역입니다입니다

var render = function() { 
    if (bgReady) { 
     ctx.drawImage(bgImage, 0, 0); 
    } 

    if (heroReady) { 
     ctx.drawImage(heroImage, hero.x, hero.y); 
    } 

    if (monsterReady) { 
     ctx.drawImage(monsterImage, monster.x, monster.y); 
     ctx.drawImage(monsterImage, monster1.x, monster1.y); 
     ctx.drawImage(monsterImage, monster2.x, monster2.y); 
    } 
    // Score 
    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "left"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Score: " + monstersCaught, 32, 32); 

    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "right"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Level: " + level, 400, 32); 

    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "center"; 
    ctx.textBaseline = "top"; 
    if(debugVariable = true) 
    { 
     var coords = 'Co-ords(' + hero.x + "," + hero.y + ')'; 
    } else { 
     coords = ""; 
    } 
    ctx.fillText(coords , 100, 200); 

    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Verdana"; 
    ctx.textAlign = "center"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Debug: " + debugVariable, 100, 100); 



}; 

그리고 체크 박스의 HTML 코드. 아무 것도 수행하지 않지만

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Simple Canvas Game</title> 
     <link rel="stylesheet" type="text/css" href="style/style.css" /> 
    </head> 
    <body> 
     <script src="js/game.js"></script> 
     <input type="checkbox" name="debugOnOff" onclick="debugCheckBox()"> 
     <a href="game2.html"> GAME 2</a> 
    </body> 
</html> 

Answer 1

사실 읽는

이유는 valueOf 메소드를 호출 할 필요가 Boolean 객체의 프리미티브 유형에 액세스 할 수 인해 당신은 debugVariable != null 경우 확인하는 코드

의이 블록

var debugVariable = new Boolean(); 
function debuggCheckBox() 
{ 
    if(debugVariable){ debugVariable = false;} 
    else {debugVariable = true;} 
} 

이다.

true 또는 false을 확인하는 대신 debugVariable을 false으로 초기화해야합니다.

var debugVariable = false; 
function debuggCheckBox() 
{ 
    debugVariable = !debugVariable; 
}