html - HTML5、Easel.js ゲームの問題

Question

アニメのキャラクターが画面を横切り、上から木箱が落ちてくるのを避けるイーゼルゲームのチュートリアルに取り組んでいます。チュートリアルのコードに正確に従いましたが、何もロードされていないようです (正しくマップされた画像を含む)。構文に関するエラーは発生していないようですので、何が問題なのかわかりません。これはかなりのコードなので、時間がない場合は完全に理解してください。

サイトページコード (誰かが興味を持っている場合は、個々の 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 ファイルを追加します。Platform.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));

Crate.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));

score 3 · Accepted Answer

名前空間なしで EaselJS オブジェクトを初期化しようとしていることに気付きました。

stage = new Stage(canvas);

しかし、0.5.0以降、createjs-namespaceを使用する必要があります(または、何かを行う前に名前空間をウィンドウにマップします)。したがって、今しなければならないことcreatejs.は、新しいものを作成するときにすべてのeaselJSクラスをそれらの前に追加することですこのようなインスタンス:

stage = new createjs.Stage(canvas);

それがすべてかどうかはわかりませんが、それが始まりです。これがお役に立てば幸いです。

CreateJS ネームスペースの詳細については、https ://github.com/CreateJS/EaselJS/blob/master/README_CREATEJS_NAMESPACE.txt をご覧ください。

html - HTML5、Easel.js ゲームの問題

1 に答える 1

Related

Reference