元素不会使用当前玩家动作进行更新

时间:2016-05-11 13:40:50

标签: javascript html canvas

我的游戏存在另一个问题(与 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;
}

我将不胜感激任何帮助。提前谢谢!

1 个答案:

答案 0 :(得分:1)

<强>解释

您正在使用以下密钥处理程序:

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

如果您尝试打印出一些调试信息,您可以看到没有发生任何事情:

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

这是因为,根据事件onkeydownonkeyup的文档,它们必须拼写为全部小写。

因此修复是小写它:

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.您需要使用=

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