1. 首页
  2. 问答
  3. HTML5，Easel.js游戏问题

HTML5，Easel.js游戏问题

2013-04-18 60 views
1

一直在制作一个画架游戏教程，其中包括一个动画人物穿过屏幕并避免从上方坠落的箱子。我完全按照教程中的代码进行了操作，但没有任何快乐;似乎没有任何加载（包括正确映射的图像）。没有关于语法的错误似乎发生，所以不确定问题是什么。这是一个相当的代码，所以完全理解，如果没有人有时间，但在这种情况下，以防万一;HTML5，Easel.js游戏问题

网站的网页代码（生病后单独的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));

英雄.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));

来源

2013-04-18 user2085143

+0

这将是更容易帮助，如果你链接的教程中，我没有看到一个错误了手，但我也没有画架飕飕。你有没有早期版本，这也适用？ – baordog

+0

我希望我可以，但教程来自杂志。我对画架非常陌生，所以希望我做了很明显的错误！我第一次参加它，所以我恐怕没有更早的版本。我觉得init（）应该在一个单独的文件夹中，但它似乎没有帮助。 – user2085143

回答

3

我注意到，您尝试初始化EaselJS对象没有命名空间：

stage = new Stage(canvas);

但由于0.5.0，你必须使用createjs命名空间（或者你之前映射命名空间窗口做任何事情） 所以，你必须现在做什么都将easelJS类是当你创建一个新的实例这样他们之前添加createjs.：

stage = new createjs.Stage(canvas);

不知道这是EV这是一个开始，希望这会有所帮助。

你可以阅读更多的CreateJS这里namepsacing：https://github.com/CreateJS/EaselJS/blob/master/README_CREATEJS_NAMESPACE.txt

来源

2013-04-19 07:33:52 olsn

+0

尝试但仍然没有运气！如果背景图像和其他图像仍然在加载，或者如果出现错误，将不会加载？ – user2085143

+0

也editied显示输入的“createjs”，并添加了js文件 – user2085143

+0

你可能会把所有的东西放在网上？必须有某种错误......当你看到它运行时检查错误要容易得多。 – olsn

相关问题

 相关问题