[英]I can not see my CreateJS
我正在嘗試用CREATEJS做一個簡單的游戲。 這是關於能夠移動超人，通過單擊k石和其他一些東西殺死他的事情。 當我打開網絡時，問題來了，我唯一看到的是一個空白框。 我離開了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>
您可以在'script'標簽內使用'defer'或'async'屬性，有關更多信息，請參見： http : //www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 。
使用示例：
<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>
避免“延遲”腳本按導入順序運行非常有用。
例如：
<!-- 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>
據我所知，您僅一次更新階段（加載第一張圖像時），然后進行交互。 通常，游戲每個“滴答”都會有一個階段更新。 您至少應確保在更新之前已加載所有圖像。 將此添加到您的init函數，以查看是否有幫助：
createjs.Ticker.on("tick", stage);
此外，檢查您的控制台。 正如@scagood指出的那樣，應該存在運行時錯誤，因為您的代碼有一些錯誤。
如何將easyljs鏈接到我的html文件並且createjs未定義？
[英]How can I link easeljs to my html file & createjs is not defined?
如何使用其他JavaScript文件中的新類訪問我的createjs導出的js文件？
[英]How can i access my createjs exported js file using a new class in a other javascript file?
我在 web 頁面上的下拉框中看不到選項，但可以在元素中看到它
[英]I can't see the options in my drop down box on web page but can see it in element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.