我试图在CREATEJS中制作一个简单的游戏。关于能够移动超人，通过点击氪星石和其他一些东西杀死他。 当我打开网络时，问题出现了，我看到的唯一的东西就是一个空白框。 我留下了CreateJS和HTML代码。
我需要看看是否有人能够启发我。我读到有可能需要进行预加载或类似的事情。我不认真，认真。
var stage;
var startDrag = function(event)
{
// Esta función sirve para que al arrastrar no se haga desde el punto central del grupo,
// sino desde aquel punto donde se hizo click
var grupo = event.currentTarget;
var offset = grupo.globalToLocal(event.stageX, event.stageY);
// Se evitaran problemas si el grupo estuviera escalado
grupo.offsetX = offset.x * grupo.scaleX;
grupo.offsetY = offset.y * grupo.scaleY;
}
var drag = function(event)
{
var grupo = event.currentTarget;
// La nueva posicion se calcula como las coordenadas en pantalla donde se hizo click menos
// el desfase (dentro del grupo) calculado en la funcion startDrag
grupo.x = event.stageX - grupo.offsetX;
grupo.y = event.stageY - grupo.offsetY;
stage.update();
}
var stopDrag = function(event)
{
var grupo = event.currentTarget;
grupo.x = event.stageX - grupo.offsetX;
grupo.y = event.stageY - grupo.offsetY;
stage.update();
}
var kill = function(event){
stage.removeChildAt(1);
stage.update();
}
var borrar = function(event)
{
var objeto = event.currentTarget;
stage.removeChild(heli);
stage.update();
}
function inicializar()
{
var grupo;
stage = new createjs.Stage('escenario
grupo = new createjs.Container();
grupo.x = stage.canvas.width/2;
grupo.y = stage.canvas.height/2;
grupo.addEventListener('mousedown', startDrag); // Escucha la pulsación del botón del ratón
grupo.addEventListener('pressmove', drag); // Escucha movimiento del ratón, después de haber sido pulsado
grupo.addEventListener('mouseup', stopDrag); // Escucha la liberación del botón del ratón
fondo = new Image();
fondo.src = "images/ciudad.jpg";
imagen = new Image();
imagen.src = "images/sp.png";
imagen2 = new Image();
imagen2.src = "images/kriptonita.png";
imagenheli = new Image();
imagenheli.src = "images/helicoptero.png";
fondo.onload = function() {
fondo = new createjs.Bitmap(fondo);
stage.addChild(fondo);
bitmap = new createjs.Bitmap(imagen);
grupo.addChild(bitmap);
grupo.offsetX = 0;
grupo.offsetY = 0;
stage.addChild(grupo);
bitmap2 = new createjs.Bitmap(imagen2);
stage.addChild(bitmap2);
bitmap2.addEventListener('click', kill);
heli = new createjs.Bitmap(imagenheli);
heli.x = 300;
heli.y=20;
stage.addChild(heli);
heli.addEventListener('click', borrar);
stage.update();
}
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>XXI Salón Internacional del Cómic de Jaén</title>
<link href="css/rejilla960fluido.css" rel="stylesheet" type="text/css">
<link href="css/miestilo.css" rel="stylesheet" type="text/css">
<script src="libs/videoplayer.js" type="application/x-javascript"></script>
<script src="libs/createjs-2013.12.12.min.js" type="application/x-javascript"></script>
<script src="libs/create.js" type="application/x-javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i" rel="stylesheet">
</head>
<body onload="inicializar();">
<div id="social" class="container_12">
<ul class="grid_6 push_5">
<li><a href="http://www.facebook.com" id="ifacebook"></a><br>
</li>
<li><a href="http://www.twitter.com" id="itwitter"></a><br>
</li>
<li><a href="http://www.instagram.com" id="ituenti"></a><br>
</li>
</ul>
</div><br>
<br class="clear">
<div class="container_12">
<div class="grid_1">
<img style="height: 100px; width: 100px; margin-left: -2px" src="images/goku.png">
</div>
<center><canvas class="fondo grid_10" id="canvas" width="100%" height="auto"></canvas></center>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img, 0, 0);
}
img.src = 'images/logoprueba.png';
</script>
<div class="grid_1">
<img style="height: 100px; width: 100px; margin-left: -22px;" src="images/vegeta.png">
</div>
</div><br class="clear">
<nav>
<ul id="menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="programacion.html">Programación</a></li>
<li><a href="comics.html">Cómics</a></li>
<li><a href="autores.html">Autores</a>
<ul class="submenu">
<li class="sub"><a href="autor1.html">Laura Falconi</a></li>
<li class="sub"><a href="autor2.html">Quino</a></li>
<li class="sub"><a href="autor3.html">Dante Quintero</a></li>
<li class="sub"><a href="autor4.html">Ivanka Trump</a></li>
<li class="sub"><a href="autor5.html">Paco Roca</a></li>
<li class="sub"><a href="autor6.html">Rafa Fonteriz</a></li>
</ul>
</li>
<li><a href="galeria.html">Galería</a></li>
<li><a href="estadisticas.html">Estadísticas</a></li>
<li><a class="active" href="juegos.html">Juegos</a>
<ul class="submenu">
<li class="sub"><a href="test.html">Cuestionario</a></li>
<li class="sub"><a href="juego.html">Pregunta Estrella</a></li>
</ul>
</li>
<li><a href="jaen.html">Jaén</a>
<ul class="submenu">
<li><a class="sub2" href="monumentos.html">Monumentos</a></li>
<li><a class="sub2" href="gastronomia.html">Gastronomía</a></li>
</ul>
</li>
<li><a href="localizacion.html">Localización</a></li>
</ul>
</nav>
<h1>Salva a la ciudad</h1>
<canvas id="escenario" class="fondo" width="500" height="400">Este navegador no soporta Canvas</canvas>
<center><p class="cita fondo "> Intruscciones: <br>
Puedes mover a Superman. <br>
Puedes destruir a Superman haciendo click en la Kryptonita. <br>
Puedes destruir el helicoptero haciendo click en el.<br>
Puedes destruir la Kryptonita haciendo click en ella, después de haber destruido a Superman. </p></center>
</body>
</html>
答案 0 :(得分：0)
您可以在“script”标记内使用“defer”或“async”属性，有关详细信息，请参阅：http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html。
使用示例：
res.send("Whatever");
不推荐'deferred'脚本按照导入的顺序运行是非常有用的。
例如：
<script src="/path/to/your/script.js"></script>
<!-- Run after the HTML is parsed -->
<script src="/run/after/html/parse.js" defer></script>
<!-- Run once the file has been imported -->
<script src="/run/on/download.js" async></script>
答案 1 :(得分：0)
据我所知，你只是一次更新你的舞台（当第一张图片加载时），然后当互动发生时。通常情况下，每个游戏都会进行一次阶段更新。＃14; tick＆＃34;您应该至少确保在更新之前加载所有图像。将其添加到init函数中以查看它是否有帮助：
createjs.Ticker.on("tick", stage);
此外，请检查您的控制台。正如@scagood指出的那样，应该有一个运行时错误，因为你的代码有一些错误。