inject dropped sprites on next update(), calculate wave start position on drop

psema4 · psema4 · commit 67acbffbdb6a · 2012-11-12T20:46:14.000-05:00
diff --git a/static/index.html b/static/index.html
@@ -88,6 +88,7 @@ <h4>Engine</h4>
                     <ul>
                         <li><label for="engine-ticks">Tick</label><input id="engine-ticks" class="setting" type="number" disabled /></li>
                         <li><label for="engine-level">Level</label><input id="engine-level" class="setting" type="number" disabled /></li>
+                        <li><label for="engine-level">Resume On Drop?</label><input id="engine-level" class="setting" type="checkbox" onchange="game.config.resumeOnDrop = this.checked;" /></li>
                     </ul>
                 </div>
 
diff --git a/static/js/app.js b/static/js/app.js
@@ -141,33 +141,42 @@ window.addEventListener('load', function() {
                     $(sel).style.visibility = 'visible';
 
                     // setup drag operations
-                    // drops on canvas should set sprites x coordinate, y always starts at 0
                     $(sel).addEventListener('dragstart', function(evt) {
-                        //console.log('dragstart on ', this.alt, evt.screenX, evt.screenY, evt);
                         evt.dataTransfer.effectAllowed = 'move';
+                        this.style.opacity = 0.5;
 
+                        // set the drag image (toolbutton scaled to 64x64, use source sprite image data)
+                        var spriteIndex = this.alt.replace(/^tool /, '')
+                          , dragIcon = document.createElement('img')
+                        ;
+
+                        dragIcon.src = game.sprites.queue[spriteIndex].getDataURL();
+                        evt.dataTransfer.setDragImage(dragIcon, 0, 0);
+
+                        // set transfer data - not used
                         var evtData = 'dragData';
-                        //console.log('starting drag with data:', evtData);
                         evt.dataTransfer.setData('text/plain', evtData);
                     }, false);
 
                     $(sel).addEventListener('dragend', function(evt) {
-                        //console.log('dragend on ', this.alt, evt.screenX, evt.screenY, evt);
                         var screenX1 = parseInt(window.getComputedStyle($('#game-screen')).left)
                           , screenY1 = parseInt(window.getComputedStyle($('#game-screen')).top)
                           , screenX2 = screenX1+640
                           , screenY2 = screenY1+480
-                          , x = evt.screenX
-                          , y = evt.screenY
+                          , x = evt.pageX
+                          , y = evt.pageY
                         ;
 
                         if (x > screenX1 && x < screenX2) {
                             if (y > screenY1 && y < screenY2) {
                                 var spriteId = this.alt.replace(/^tool /, '');
-                                game.addWaveToLevel(spriteId, x-screenX1);
+                                // pass in x,y and use y to work out the actual tick and x values (y == time)
+                                game.addWaveToLevel(spriteId, x-screenX1, y-screenY1);
                             }
                         }
 
+                        this.style.opacity = 1.0;
+
                     }, false);
 
                     $('#game-screen').addEventListener('drop', function(evt) {
diff --git a/static/js/game.js b/static/js/game.js
@@ -12,6 +12,7 @@ function GameEngine(opts) {
             width: 640
           , height: 480
         }
+      , config = opts.config || { resumeOnDrop: false }
       , ctx // canvas context
       , stars = []
       , gameData = {}
@@ -350,19 +351,51 @@ try {
       , getLevelData = function() { return gameData.levels[level]; }
       , getLevel = function() { return level; }
 
-      , addWaveToLevel = function(spriteIndex, x) {
+      , addWaveToLevel = function(spriteIndex, x, y) {
+            var wasTicking = checkTicking()
+            if (wasTicking) stopTicking();
+
+            // FIXME: calculations (calcTime, calcX) seem off a bit... almost right
             var time = ticks - engine.levelStartTicks
+              , screenYOffset = parseInt(window.getComputedStyle($('#game-container')).top)
+              , yOffset = (y - screenYOffset) // cancel out screen's y-offset
+              , calcTime = time - yOffset     // figure out tick to generate wave at if y > 0
+              , calcX = x || 0                // figure out what x would have been if y == 0
               , levelData = gameData.levels[level]
-              , waveData = {
-                    sprite: sprites.queue[spriteIndex].getInfo().name
+              , spriteData = sprites.queue[spriteIndex].getInfo()
+              , xDelta = (spriteData.dx * spriteData.speed) * yOffset
+              , yDelta = (spriteData.dy * spriteData.speed) * yOffset
+            ;
+
+            if (calcTime < 0) calcTime = 0;
+            calcX -= xDelta;
+
+            var waveData = {
+                    sprite: spriteData.name
                   , class: 1
-                  , at: time
-                  , x: x
+                  , at: calcTime
+                  , x: calcX
+                  , y: 0
                 }
             ;
 
-            console.log('create waveData', waveData);
+            //console.log('create waveData', waveData, 'using spriteData', spriteData, ' with spriteSpec', levelData.sprites[spriteData.name]);
             levelData.waves.push(waveData);
+
+            // drop specified sprite at x,y
+            var spritesheetName = 'level-'+ level +'-sprites'
+              , sprite = sprites.addSprite(spritesheetName, levelData.sprites[spriteData.name])
+            ;
+
+            sprite.moveTo(x, yOffset);
+
+            // resume ticking if we were previously
+            if (config.resumeOnDrop && wasTicking)
+                startTicking()
+
+            // otherwise tick once to update the display
+            else 
+                update();
         }
 
       , getEngineState = function() { return engine; }
@@ -485,6 +518,7 @@ try {
 
     // public api
     return {
+        // methods
         update: update
       , getCtx: getCtx
       , getTicks: getTicks
@@ -495,13 +529,16 @@ try {
       , loadGame: loadGame
       , getGameData: getGameData
       , nextLevel: nextLevel
-      , getLevelData: getLevelData
+      , getLevelData: getLevelData // should just export engine with other objects below
       , getLevel: getLevel
-      , audio: audio
-      , sprites: sprites
       , getEngineState: getEngineState
       , playerEventStart: playerEventStart
       , playerEventStop: playerEventStop
       , addWaveToLevel: addWaveToLevel
+
+        // objects
+      , audio: audio
+      , sprites: sprites // SpriteManager
+      , config: config
     };
 }
diff --git a/static/js/sprite.js b/static/js/sprite.js
@@ -155,6 +155,8 @@ function Sprite(opts) {
               , value: value
               , x: x
               , y: y
+              , dx: dx
+              , dy: dy
               , w: frames[frame].srcw
               , h: frames[frame].srch
             };
