1

一直在制作一个画架游戏教程，该教程涉及一个动画角色穿过屏幕并避免板条箱从上方掉落。我完全按照教程中的代码进行了操作，但没有任何乐趣；似乎没有加载任何内容（包括正确映射的图像）。似乎没有出现关于语法的错误，所以不确定问题是什么。这是一段相当多的代码，所以如果没有人有时间，完全可以理解，但以防万一；

网站页面代码（如果有人感兴趣，我会发布单独的 JavaScript 文件代码；

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style> 
body {
    background-color: #000;
}
</style>

<script src="lib/easeljs-0.6.0.min.js"></script>
<script src="JS/Platform.js"></script>
<script src="JS/Hero.js"></script>
<script src="JS/Crate.js"></script>

<script>
var KEYCODE_SPACE = 32, KEYCODE_LEFT = 37, KEYCODE_RIGHT = 39;
var canvas, stage, lfheld, rtheld, platforms, crates, hero, heroCenter, key, door, gameTxt;

var keyDn = false, play=true, dir="right";
var loaded = 0, vy = 0, vx = 0;
var jumping = false, inAir = true, gravity = 2;

var img = new Image();
var bgimg = new Image();
var kimg = new Image();
var dimg = new Image();

var platformW = [300, 100, 180, 260, 260, 100, 100];
var platformX = [40, 220, 320, 580, 700, 760, 760];
var platformY = [460, 380, 300, 250, 550, 350, 450];
document.onkeydown=handleKeyDown;
document.onkeyup=handleKeyUp;

function init(){
    canvas = document.getElementById("canvas"); 
    stage = new createjs.Stage(canvas);
    bgimg.onload = this.handleImageLoad;

    bgimg.src = "img/scene.jpg";

kimg.onload = this.handleImageLoad;

kimg.src="img/key.png";

dimg.onload = this.handleImageLoad;

dimg.src = "img/door.jpg";

img.onload = this.handleImageLoad;

img.src = "img/hero.png";
}

function handleImageLoad(event) {
    loaded+=1;
    if (loaded==4){
        start();
    }
}

function handleKeyDown(e) {
    if(!e){ var e = window.event; }
    switch(e.keycode) {
        case KEYCODE_LEFT: lfHeld = true;
dir="left"; break;
case KEYCODE_RIGHT: rtHeld = true;
dir="right"; break;
case KEYCODE_SPACE: jump(); break;
    }
}


function handleKeyUp(e) {
    if(!e){ var e = window.event; }
    switch(e.keycode) {
        case KEYCODE_LEFT: lfHeld = false;
keyDn=false; hero.gotoAndStop("idle_h"); break;
case KEYCODE_RIGHT: rtHeld = false;
keyDn=false; hero.gotoAndStop("idle"); break;
    }
}




function start(){
    var bg = new createjs.Bitmap(bgimg);
    stage.addChild(bg);
    door = new createjs.Bitmap(dimg);
    door.x = 131;
    door.y = 384;
    stage.addChild(door);
    hero = new Hero(img);
    hero.x = 80;
    hero.y = 450;
    stage.addChild(Hero);

    crates = new Array();
    paltforms = new Array();
    for(i=0; i < platformW.length; i++){
        var platform = new Platform(platformW[i],20);
        platforms.push(platform);
        stage.addChild(platform);
        platform.x = platformX[i];
        platform.y = platformY[i];
    }

for(j=0; j < 5; j++){
    var crate = new Crate();
    crates.push(crate);
    stage.addChild(crate);
    resetCrates(crate);
}
key = new createjs.Bitmap(kimg);
key.x = 900;
key.y = 490;
stage.addChild(key);

Ticker.setFPS(30);
Ticker.addListener(window);
stage.update();
}

function tick() {
    heroCenter = hero.y-40;
    if (play){
        vy+=gravity;
        if (inAir){
            hero.y+=vy;
        }
        if (vy>15){
            vy=15;
        }
for(i=0; i < platforms.length; i++){
    if (hero.y >= platforms[i].y && hero.y<=(platforms[i].y+platforms[i].height) && hero.x>
    platforms[i].x && hero.x<(platforms[i].
    x+platforms[i].width)){;
    hero.y=platforms[i].y;
    vy=0;
    jumping = false;
    inAir = false;
    break;
    }else{
        inAir = true;
    }
}
for(j=0; j < crates.length; j++){
    var ct = crates[j];
    ct.y+=ct.speed;
    ct.rotation+=3;
    if (ct.y>650){
        resetCrates(ct);
    }
    if (collisionHero (ct.x, ct.y, 20)){
        gameOver();}
}
if (collisionHero (key.x+20, key.y+20,
20)){
    key.visible=false;
    door.visible=false;
}
if (collisionHero (door.x+20, door.y+40,
20) && key.visible==false){nextLevel();}
if (lfHeld){vx = -5;}
if (rtHeld){vx = 5;}

if(lfHeld && keyDn==false && inAir==false)
{
    hero.gotoAndPlay("walk_h");
    keyDn=true;
}
if(rtHeld && keyDn==false &&
inAir==false){
    hero.gotoAndPlay("walk");
    keyDn=true;
}
if (dir=="left" && keyDn==false &&
inAir==false){
    hero.gotoAndStop("idle_h");
}
if (dir=="right" && keyDn==false &&
inAir==false){
    hero.gotoAndStop("idle");
}

hero.x+=vx;
vx=vx*0.5;
if (hero.y>610){
    gameOver();
}
    }
    stage.update();
}

function end(){
    play=false;
    var l = crates.length;
    for (var i=0; i<l; i++){
        var c = crates[i];
        resetCrates(c);
    }
    hero.visible=false;
    stage.update();
}

function nextLevel(){
    gameTxt = new createjs.Text("Well Done\n\n",
"36px Arial", "#000");
 gameTxt.text += "Prepare for Level 2";
 gameTxt.textAlign = "center";
 gameTxt.x = canvas.width / 2;
 gameTxt.y = canvas.height / 4;
 stage.addChild(gameTxt);
 end();
}
function gameOver(){
    gameTxt = new createjs.Text("Game Over\n\n",
    "36px Arial", "#000");
    gameTxt.text += "Click to Play Again.";
    gameTxt.textAlign = "center";
    gameTxt.x = canvas.width / 2;
    gameTxt.y = canvas.height / 4;
    stage.addChild(gameTxt);
    end();
    canvas.onclick = handleClick;
}

function handleClick() {
    canvas.onclick = null;
    hero.visible=true;
    hero.x = 80;
    hero.y = 450;
    door.visible=true;
    key.visible=true;
    stage.removeChild(gameTxt);
    play=true;
}
function collisionHero (xPos, yPos,
Radius){
    var distX = xPos - hero.x;
    var distY = yPos - heroCenter;
    var distR = Radius + 20;
    if (distX * distX + distY * distY <=
distR * distR){
    return true;
}
}
function jump(){
    if (jumping == false && inAir == false){
        if (dir=="right"){
            hero.gotoAndStop("jump");
        }else{
            hero.gotoAndStop("jump_h");
        }
        hero.y -=20;
        vy = -25;
        jumping = true;
        keyDn=false;
    }
}
function resetCrates(crt) {
    crt.x = canvas.width * Math.random()|0;
    crt.y = 0 - Math.random()*500;
    crt.speed = (Math.random()*5)+8;
}





</script>

<title>Game</title>
</head>

<body onload="init();">




<canvas id="canvas" width="960px" height="600px"></canvas>



</body>
</html>

添加标题中列出的js文件。平台.js：

     (function(window) {
    function Platform(w,h) {
        this.width = w;
        this.height = h;
        this.initialize();
    }

Platform.prototype = new createjs.Container ();
Platform.prototype.platformBody = null;
Platform.prototype.Container_initialize = Platform.prototype.initialize;

Platform.prototype.initialize = function() {
    this.Container_initialize();
    this.platformBody = new createjs.Shape();
    this.addChild(this.platformBody);
    this.makeShape();
}

Platform.prototype.makeShape = function() {
    var g = this.platformBody.graphics;
    g.drawRect(0,0,this.width,this.height);
}
window.Platform = Platform;
}(window));

Hero.js

(function(window) {
    function Hero(imgHero) {
        this.initialize(imgHero);
    }

Hero.prototype = new createjs.BitmapAnimation();
Hero.prototype.Animation_initialize = Hero.prototype.initialize;
Hero.prototype.initialize = function(imgHero) {
    var spriteSheet = new createjs.SpriteSheet({

images: [imgHero], 
frames: {width: 60, height: 85, regX: 29, regY: 80}, animations: {
    walk: [0, 19, "walk"],
    idle: [20, 20],
    jump: [21, 21] } });

SpriteSheetUtils
.addFlippedFrames(spriteSheet, true, false, 
false);
this.Animation_initialize(spriteSheet);
this.gotoAndStop("idle");
}
window.Hero = Hero;
}(window));

板条箱.js

(function(window) {
    function Crate() {
        this.initialize();
    }

Crate.prototype = new createjs.Container();
Crate.prototype.img = new Image();
Crate.prototype.Container_initialize =
Crate.prototype.initialize;
Crate.prototype.initialize = function() {

this.Container_initialize();
var bmp = new createjs.Bitmap("img/crate.jpg");
bmp.x=-20;
bmp.y=-20;
this.addChild(bmp);}
window.Crate = Crate;
}(window));
4

1 回答 1

3

我注意到您尝试在没有命名空间的情况下初始化 EaselJS 对象：

stage = new Stage(canvas);

但是从 0.5.0 开始，您必须使用 createjs-namespace（或在执行任何操作之前将命名空间映射到窗口）所以您现在需要做的就是createjs.在创建新的画架类时在它们之前添加一个像这样的例子：

stage = new createjs.Stage(canvas);

不知道这是否就是一切，但这是一个开始，希望这会有所帮助。

您可以在此处阅读有关 CreateJS 命名空间的更多信息：https ://github.com/CreateJS/EaselJS/blob/master/README_CREATEJS_NAMESPACE.txt

于 2013-04-19T07:33:52.663 回答