HTML5 CreateJS游戏,更新功能不起作用

时间:2014-08-09 02:45:18

标签: html5 html5-canvas createjs

一切似乎都符合这个功能"更新"。我的舞台右下角应该出现一个蓝色的桨(矩形),但它不是。

const ARROW_KEY_LEFT = 37;
const ARROW_KEY_UP = 38;
var stage,padle;
var leftKeyDown,rightKeyDown = false;

function init(){
stage = new
createjs.Stage(document.getElementById("canvas"));
    createjs.Ticker.addEventListener("tick", tick);
    createjs.Ticker.setFPS(60);
    startGame();
};

function startGame(){
padle = new createjs.Shape();
padle.width = 100;
padle.graphics.beginFill("#0000FF").drawRect(0, 0, padle.width, 20);
padle.x = padle.nextX = 0;
padle.y = stage.canvas.height - 20;
stage.addChild(padle);
window.onkeydown = movePadle;
window.onkeyup = stopPadle;

};
function movePadle(e){
e = !e ? window.event : e;
switch (e.keyCode){
    case ARROW_KEY_LEFT:
        leftKeyDown = true;
    break;
    case ARROW_KEY_RIGHT:
        rightKeyDown = true;
    break;
}
};

function stopPadle(e){
e = !e ? window.event : e;
switch (e.keyCode){
    case 37:
        leftKeyDown = false;
    break;
    case 39:
        rightKeyDown = false;
    break;
}
};

这是更新功能,它似乎无法正常运行。任何帮助表示赞赏!

function update(){
var nextX = padle.x;
if (leftKeyDown){
    nextX = padle.x - 10;
    if(nextX < 0){          
        nextX = 0;      
    }
}else if (rightKeyDown){
    nextX = padle.x + 10;
    if(nextX > stage.canvas.width - padle.width){
        alert("right key down");
        nextX = stage.canvas.width - padle.width;
    }
}

function tick(e){
update();
render();
stage.update();
};

http://jsfiddle.net/9nff5kta/

它已经不再适用于jsfiddle

1 个答案:

答案 0 :(得分:0)

我玩了一点,并让它“工作”。由于导出与CreateJS一起使用的方式,JSFiddle不是测试Flash HTML / JS输出的最佳位置。我做了一些小改动,允许它在jsfiddle中工作。

  • 我将JS导入放入资源,因此首先加载
  • 我删除了JavaScript中的“createjs”声明。您将keyboardEvents.js包含在jsfiddle“JavaScript”窗口中,该窗口将其包含在闭包内,而不是全局,因此它会重新创建“createjs”命名空间 - 这使得它无法在您的类中找到CreateJS库。通过删除它,它强制它使用加载的JS库。

http://jsfiddle.net/lannymcnie/9nff5kta/1/ 我相信这是你本地开始的。

一旦这个工作,我在控制台中遇到错误ARROW_KEY_RIGHT未定义。您的代码只有ARROW_KEY_LEFTARROW_KEY_UP。一旦我更改了变量名称,它似乎有效。看看上面修改过的小提琴。

请注意,我刚刚在Chrome中打开了Dev工具,并且错误立即被捕获,因此很清楚发生了什么。 jsfiddle的东西有点难以调试。

干杯。