Element wird nicht mit der aktuellen Spieleraktion aktualisiert

Question

Ich habe ein anderes Problem mit meinem Spiel (das gleiche von diesem question). Das p-Element wird nicht mit der aktuellen Spieleraktion aktualisiert. Hier ist der Code (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; 
} 

Ich würde jede Hilfe zu schätzen wissen. Danke im Voraus!

Answer 1

Erläuterung:

Sie die folgenden Schlüsselhandler verwenden:

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

Wenn Sie versuchen, einige Debug-Informationen auszudrucken, dass nichts geschieht überhaupt sehen kann:

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

Dies ist weil, wie in der Dokumentation für die Ereignisse onkeydown und onkeyup, müssen sie sp sein Elle mit Kleinbuchstaben.

Daraus ergibt sich die Lösung ist es in Kleinbuchstaben:

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

Fixed JSFiddle

Hinweis:

Wie ich in den Kommentaren erwähnt

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

nicht player.currentAction. gesetzt Y Sie müssen = verwenden:

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