Feathercrown Feathercrown - 6 months ago 13
HTML Question

Element not updating with the current player action

I have another problem with my game (the same one from this question). The p element is not updating with the current player action. Here is the 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;
}


I would appreciate any help. Thanks in advance!

Answer

Explanation:

You're using the following key handlers:

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

If you try to print out some debug info you can see that nothing is ever happening:

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

This is because, as per the documentation for the events onkeydown and onkeyup, they have to be spelled with all lowercase.

Hence the fix is to lowercase it:

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

Fixed JSFiddle

Note:

As I mentioned in the comments

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

won't set player.currentAction. You need to use =:

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