要素が現在のプレイヤーのアクションで更新されていません

Question

私のゲームには別の問題があります（これと同じものがquestion）。 p要素は、現在のプレイヤーアクションで更新されていません。ここでは、コード（fiddle）は次のとおりです。

HTML

<canvas id='canvas'>Your browser does not support the canvas element.</canvas> 
<p id='lol'>Action</p> 

CSS

#canvas{ 
    border: 1px solid black; 
} 

はJavaScript

//Get canvas and context 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

//Capture keypresses 
var keys = []; 
document.onKeyDown = function (e) {keys[e.keyCode] = true;}; 
document.onKeyUp = function (e) {keys[e.keyCode] = false;}; 

//Set game variables 
var characters = { 
    charList: [] 
}; 
var player = { 
    character: 'none', 
    currentAction: 'none', 
    health: '100', 
    energy: '100', 
    x: 0, 
    y: 0, 
    dx: 0, 
    dy: 0, 
    facing: 'right' 
}; 

//Character constructor 
function Character (Name, Strength, Speed, Intelligence, Reflexes, Age, Height, Weight, Weapon, UsesMagic, MagicType, Armor, Hair, Eyes, Skin, Clothes, Species, Type, Accessories) { 
    this.name = Name; 
    this.strength = Strength; 
    this.speed = Speed; 
    this.intelligence = Intelligence; 
    this.reflexes = Reflexes; 
    this.age = Age; 
    this.height = Height; 
    this.weight = Weight; 
    this.weapon = Weapon; 
    this.usesMagic = UsesMagic; 
    this.magicType = MagicType; 
    this.armor = Armor; 
    this.hair = Hair; 
    this.eyes = Eyes; 
    this.skin = Skin; 
    this.clothes = Clothes; 
    this.species = Species; 
    this.type = Type; 
    if (Accessories) { 
      this.accessories = Accessories; 
    } 
    characters.charList.push(Name); 
} 

characters.Xantar = new Character('Xantar', 1, 1, 1, 1, 1, 1, 1, 'sword', true, 'derp', [], 'hair is brown\?', 'duh', 'foo', [], 'animale', 'wolf', []); 
alert(characters.Xantar.weapon + ' ' + characters[characters.charList[0]].type); 

//Activate mainloop and get value for pausing purposes 
var mainloopInterval = setInterval(mainloop, 5); 
//Main game loop 
function mainloop(){ 
    //Allow player to do actions 
    if(player.currentAction == 'none' || player.currentAction == 'jump'){ 
     if(keys[38]){ 
      player.currentAction == 'jump'; 
      player.dy = -10; 
     } 
     if(keys[32]){ //space 
      if(keys[65]){ //a 
       if(keys[68]){ //d 
        if(keys[83]){ //s 
         player.currentAction = 'asdAttack'; 
        } else { 
         player.currentAction = 'adAttack'; 
        } 
       } else if(keys[83]){ 
        player.currentAction = 'asAttack'; 
       } else { 
        player.currentAction = 'aAttack'; 
       } 
      } else if(keys[68]){ 
       if(keys[83]){ 
        player.currentAction = 'dsAttack'; 
       } else { 
        player.currentAction = 'dAttack'; 
       } 
      } else if(keys[83]){ 
       player.currentAction = 'sAttack'; 
      } else{ 
       player.currentAction = 'spaceAttack'; 
      } 
     } 
    } else { 
     //Action handling 
    } 
    document.getElementById('lol').innerHTML = player.currentAction; 
} 

私は助けていただきありがとうございます。前もって感謝します！

Answer 1

説明：

document.onKeyDown = function (e) { 
    console.log('down', e.keyCode); // Will never show itself 
    keys[e.keyCode] = true; 
}; 

document.onKeyUp = function (e) { 
    console.log('up', e.keyCode); // Will never show itself 
    keys[e.keyCode] = false; 
}; 

：あなたはその何が今まで起こっていない見ることができますいくつかのデバッグ情報をプリントアウトしようとした場合

document.onKeyDown = function (e) { keys[e.keyCode] = true;}; 
document.onKeyUp = function (e) { keys[e.keyCode] = false;}; 

：あなたは、次のキーのハンドラを使用している

これは、イベントonkeydownとonkeyupのドキュメントに従って、それらはspでなければなりませんすべて小文字で表示されます。

は、そのための修正がそれを小文字にある：

document.onkeydown = function (e) { keys[e.keyCode] = true;}; 
document.onkeyup = function (e) { keys[e.keyCode] = false;}; 
//  ^^ Lowercase them! 

Fixed JSFiddle

注：

を私がコメント

に

if(keys[38]){ 
    player.currentAction == 'jump'; 
    player.dy = -10; 
} 

を述べたように設定されていないでしょうplayer.currentAction. Yあなたは使用する必要があります=：

if(keys[38]){ 
    player.currentAction = 'jump'; 
    //     ^set it instead of comparing it 
    player.dy = -10; 
}