Skip to content

Commit 67acbff

Browse files
committedNov 13, 2012
inject dropped sprites on next update(), calculate wave start position on drop
1 parent 6816d01 commit 67acbff

File tree

4 files changed

+65
-16
lines changed

4 files changed

+65
-16
lines changed
 

‎static/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ <h4>Engine</h4>
8888
<ul>
8989
<li><label for="engine-ticks">Tick</label><input id="engine-ticks" class="setting" type="number" disabled /></li>
9090
<li><label for="engine-level">Level</label><input id="engine-level" class="setting" type="number" disabled /></li>
91+
<li><label for="engine-level">Resume On Drop?</label><input id="engine-level" class="setting" type="checkbox" onchange="game.config.resumeOnDrop = this.checked;" /></li>
9192
</ul>
9293
</div>
9394

‎static/js/app.js

+16-7
Original file line numberDiff line numberDiff line change
@@ -141,33 +141,42 @@ window.addEventListener('load', function() {
141141
$(sel).style.visibility = 'visible';
142142

143143
// setup drag operations
144-
// drops on canvas should set sprites x coordinate, y always starts at 0
145144
$(sel).addEventListener('dragstart', function(evt) {
146-
//console.log('dragstart on ', this.alt, evt.screenX, evt.screenY, evt);
147145
evt.dataTransfer.effectAllowed = 'move';
146+
this.style.opacity = 0.5;
148147

148+
// set the drag image (toolbutton scaled to 64x64, use source sprite image data)
149+
var spriteIndex = this.alt.replace(/^tool /, '')
150+
, dragIcon = document.createElement('img')
151+
;
152+
153+
dragIcon.src = game.sprites.queue[spriteIndex].getDataURL();
154+
evt.dataTransfer.setDragImage(dragIcon, 0, 0);
155+
156+
// set transfer data - not used
149157
var evtData = 'dragData';
150-
//console.log('starting drag with data:', evtData);
151158
evt.dataTransfer.setData('text/plain', evtData);
152159
}, false);
153160

154161
$(sel).addEventListener('dragend', function(evt) {
155-
//console.log('dragend on ', this.alt, evt.screenX, evt.screenY, evt);
156162
var screenX1 = parseInt(window.getComputedStyle($('#game-screen')).left)
157163
, screenY1 = parseInt(window.getComputedStyle($('#game-screen')).top)
158164
, screenX2 = screenX1+640
159165
, screenY2 = screenY1+480
160-
, x = evt.screenX
161-
, y = evt.screenY
166+
, x = evt.pageX
167+
, y = evt.pageY
162168
;
163169

164170
if (x > screenX1 && x < screenX2) {
165171
if (y > screenY1 && y < screenY2) {
166172
var spriteId = this.alt.replace(/^tool /, '');
167-
game.addWaveToLevel(spriteId, x-screenX1);
173+
// pass in x,y and use y to work out the actual tick and x values (y == time)
174+
game.addWaveToLevel(spriteId, x-screenX1, y-screenY1);
168175
}
169176
}
170177

178+
this.style.opacity = 1.0;
179+
171180
}, false);
172181

173182
$('#game-screen').addEventListener('drop', function(evt) {

‎static/js/game.js

+46-9
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ function GameEngine(opts) {
1212
width: 640
1313
, height: 480
1414
}
15+
, config = opts.config || { resumeOnDrop: false }
1516
, ctx // canvas context
1617
, stars = []
1718
, gameData = {}
@@ -350,19 +351,51 @@ try {
350351
, getLevelData = function() { return gameData.levels[level]; }
351352
, getLevel = function() { return level; }
352353

353-
, addWaveToLevel = function(spriteIndex, x) {
354+
, addWaveToLevel = function(spriteIndex, x, y) {
355+
var wasTicking = checkTicking()
356+
if (wasTicking) stopTicking();
357+
358+
// FIXME: calculations (calcTime, calcX) seem off a bit... almost right
354359
var time = ticks - engine.levelStartTicks
360+
, screenYOffset = parseInt(window.getComputedStyle($('#game-container')).top)
361+
, yOffset = (y - screenYOffset) // cancel out screen's y-offset
362+
, calcTime = time - yOffset // figure out tick to generate wave at if y > 0
363+
, calcX = x || 0 // figure out what x would have been if y == 0
355364
, levelData = gameData.levels[level]
356-
, waveData = {
357-
sprite: sprites.queue[spriteIndex].getInfo().name
365+
, spriteData = sprites.queue[spriteIndex].getInfo()
366+
, xDelta = (spriteData.dx * spriteData.speed) * yOffset
367+
, yDelta = (spriteData.dy * spriteData.speed) * yOffset
368+
;
369+
370+
if (calcTime < 0) calcTime = 0;
371+
calcX -= xDelta;
372+
373+
var waveData = {
374+
sprite: spriteData.name
358375
, class: 1
359-
, at: time
360-
, x: x
376+
, at: calcTime
377+
, x: calcX
378+
, y: 0
361379
}
362380
;
363381

364-
console.log('create waveData', waveData);
382+
//console.log('create waveData', waveData, 'using spriteData', spriteData, ' with spriteSpec', levelData.sprites[spriteData.name]);
365383
levelData.waves.push(waveData);
384+
385+
// drop specified sprite at x,y
386+
var spritesheetName = 'level-'+ level +'-sprites'
387+
, sprite = sprites.addSprite(spritesheetName, levelData.sprites[spriteData.name])
388+
;
389+
390+
sprite.moveTo(x, yOffset);
391+
392+
// resume ticking if we were previously
393+
if (config.resumeOnDrop && wasTicking)
394+
startTicking()
395+
396+
// otherwise tick once to update the display
397+
else
398+
update();
366399
}
367400

368401
, getEngineState = function() { return engine; }
@@ -485,6 +518,7 @@ try {
485518

486519
// public api
487520
return {
521+
// methods
488522
update: update
489523
, getCtx: getCtx
490524
, getTicks: getTicks
@@ -495,13 +529,16 @@ try {
495529
, loadGame: loadGame
496530
, getGameData: getGameData
497531
, nextLevel: nextLevel
498-
, getLevelData: getLevelData
532+
, getLevelData: getLevelData // should just export engine with other objects below
499533
, getLevel: getLevel
500-
, audio: audio
501-
, sprites: sprites
502534
, getEngineState: getEngineState
503535
, playerEventStart: playerEventStart
504536
, playerEventStop: playerEventStop
505537
, addWaveToLevel: addWaveToLevel
538+
539+
// objects
540+
, audio: audio
541+
, sprites: sprites // SpriteManager
542+
, config: config
506543
};
507544
}

‎static/js/sprite.js

+2
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@ function Sprite(opts) {
155155
, value: value
156156
, x: x
157157
, y: y
158+
, dx: dx
159+
, dy: dy
158160
, w: frames[frame].srcw
159161
, h: frames[frame].srch
160162
};

0 commit comments

Comments
 (0)
Failed to load comments.