我看不到我的CreateJS
[英]I can not see my CreateJS
问题描述
I'm trying to make a simple game in CREATEJS. 
我正在尝试用CREATEJS做一个简单的游戏。 It's about being able to move the Superman, kill him by clicking on the kryptonite and a couple of other things. 这是关于能够移动超人，通过单击k石和其他一些东西杀死他的事情。 The problem comes when I open the web and the only thing I see is a blank box. 当我打开网络时，问题来了，我唯一看到的是一个空白框。 I leave the CreateJS and html code. 我离开了CreateJS和html代码。
I need to see if someone is able to enlighten me. 我需要看看是否有人能够启发我。 I read that it is possible that it is necessary to make a preload or something like that. 我读到有可能有必要进行预加载或类似的操作。 I do not know, seriously. 我不知道，认真。
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>
2 个解决方案
解决方案1
0 2018-02-05 14:38:14
You could use either the 'defer' or 'async' attribute inside the 'script' tag, see: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html for more information. 您可以在'script'标签内使用'defer'或'async'属性，有关更多信息，请参见： http : //www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 。
An example of use: 使用示例：
<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>
It is very useful to not that the 'defered' scripts will run in the order they were imported. 避免“延迟”脚本按导入顺序运行非常有用。
For example: 例如：
<!-- This will also block html parsing -->
<script src="/this/will/run/first.js"></script>
<!-- Run after the HTML is parsed -->
<script src="/this/will/run/second.js" defer></script>
<script src="/this/will/run/third.js" defer></script>
<script src="/this/will/run/fourth.js" defer></script>
解决方案2
0 2018-02-05 20:51:08
From what I can tell you are only updating your stage one time (when the first image loads), and then when interactions happen. 据我所知，您仅一次更新阶段（加载第一张图像时），然后进行交互。 Typically games have a stage update every "tick". 通常，游戏每个“滴答”都会有一个阶段更新。 You should at least ensure all your images are loaded before updating. 您至少应确保在更新之前已加载所有图像。 Add this to your init function to see if it helps: 将此添加到您的init函数，以查看是否有帮助：
createjs.Ticker.on("tick", stage);
Additionally, check your console. 此外，检查您的控制台。 As @scagood pointed out, there should be a run-time error as your code has some errors. 正如@scagood指出的那样，应该存在运行时错误，因为您的代码有一些错误。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.