User prompt
Move down exit door by 400px
User prompt
Move up exit door by 50px
User prompt
Move the exit door to the background class instance
User prompt
Create a class for the games background
User prompt
Move up background element by an additional 10 pixels
User prompt
Move up background elements in the exit door by 50px
User prompt
Rename the newElement in exit door to backgroundElement
User prompt
Add a new element behind the doorGraphics in the exitdoor
User prompt
Move up exit gate by 20px
User prompt
Move up exit door by 100px
User prompt
set exit door asset anchor point to .5,1
User prompt
Move up exit door by 500px
User prompt
don't z-index sort the door, but ensure it always renders above the background layer
User prompt
Add exit door element to the game. The element should render with a higher z index than the background at all times
User prompt
Set fade in ticks to 50 when calling fadein
User prompt
Fade in twice as fast
User prompt
Rewrite the fate in logic to use ticks and be called from the move method
User prompt
We want enemies to be animated in when they spawn, add an animation method to the enemy class to make that happen. Then fade in enemies when they spawn.
User prompt
Fix Bug: 'ReferenceError: Can't find variable: spawnIndicators' in this line: 'for (var i = 0; i < spawnIndicators.length; i++) {' Line Number: 158
User prompt
Keep track of spawn indicators, prevent two spawn indicators from being to close to each other
User prompt
Fix the scope issue where the timeout in spawn enemies only spawn the first enemy
User prompt
Move the enemy spawn logic to a new method. Such that it can be re-used
User prompt
Enemies should not spawn right away. Instead a spawn circle should be shown where the enemy spawn. After 3 seconds the enemies should spawn at those positions
User prompt
Make shadows have .3 opacity
User prompt
Make shadows have anchor point .5,.8
var ExitDoor = Container.expand(function () { var self = Container.call(this); var backgroundElement = XS.getAsset('newElement', 'New Element', .5, 1); backgroundElement.y -= 60; self.addChild(backgroundElement); var doorGraphics = XS.getAsset('exitDoor', 'Exit Door', .5, 1); self.addChild(doorGraphics); }); var EnemySpawnIndicator = Container.expand(function () { var self = Container.call(this); var spawnIndicatorGraphics = XS.getAsset('spawnIndicator', 'Enemy Spawn Indicator', .5, .5); spawnIndicatorGraphics.alpha = 0.5; self.addChild(spawnIndicatorGraphics); }); var ExplosionParticle = Container.expand(function () { var self = Container.call(this); var particleGraphics = XS.getAsset('particle', 'Explosion particle', .5, .5); particleGraphics.scale.set(Math.random() * .5 + .5); particleGraphics.y -= 150; particleGraphics.blendMode = 3; self.addChild(particleGraphics); self.move = function () { self.x += self.dx; self.y += self.dy; self.alpha -= 0.02; particleGraphics.scale.x *= 0.98; particleGraphics.scale.y *= 0.98; self.dx *= 0.98; self.dy *= 0.98; if (self.alpha <= 0) { self.destroy(); } }; }); var HealthBar = Container.expand(function () { var self = Container.call(this); var healthBarGraphics = XS.getAsset('healthBar', 'Health Bar', .5, 1); self.addChild(healthBarGraphics); self.setTint = function (tint) { healthBarGraphics.tint = tint; }; self.setTint(0x00FF00); self.updateHealth = function (health) { self.scale.x = health / 100; }; }); var TargetIndicator = Container.expand(function () { var self = Container.call(this); var targetGraphics = XS.getAsset('target', 'Target Indicator', .5, .5); targetGraphics.alpha = 0.5; targetGraphics.y -= 30; self.addChild(targetGraphics); }); var Player = Container.expand(function () { var self = Container.call(this); self.health = 100; self.findNearestEnemy = function (enemies) { var nearestEnemy = null; var nearestDistance = Infinity; for (var i = 0; i < enemies.length; i++) { var dx = enemies[i].x - self.x; var dy = enemies[i].y - self.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < nearestDistance) { nearestDistance = distance; nearestEnemy = enemies[i]; } } return nearestEnemy; }; var playerShadow = XS.getAsset('playerShadow', 'Player shadow', .5, .8); playerShadow.alpha = 0.3; self.addChild(playerShadow); var playerGraphics = XS.getAsset('player', 'Player character', .5, 1); self.addChild(playerGraphics); var healthBar = new HealthBar(); healthBar.y = -playerGraphics.height; self.addChild(healthBar); self.healthBar = healthBar; self.targetX = 2048 / 2; self.targetY = 2732 / 2; self.speed = 5; self.lastShot = 0; self.move = function () { var dx = self.targetX - self.x; var dy = self.targetY - self.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance > self.speed) { self.x += dx / distance * self.speed; self.y += dy / distance * self.speed; self.healthBar.updateHealth(self.health); return true; } self.healthBar.updateHealth(self.health); return false; }; self.setTarget = function (x, y) { self.targetX = x; self.targetY = y; }; self.shoot = function (enemies) { var bullet = new Bullet(); bullet.x = self.x; bullet.y = self.y; var nearestEnemy = self.findNearestEnemy(enemies); if (nearestEnemy) { var dx = nearestEnemy.x - self.x; var dy = nearestEnemy.y - self.y; var distance = Math.sqrt(dx * dx + dy * dy); bullet.dx = dx / distance; bullet.dy = dy / distance; } return bullet; }; }); var Enemy = Container.expand(function () { var self = Container.call(this); self.alpha = 0; self.fadeRedTint = function () { if (self.fadeOutRedTint > 0) { enemyGraphics.tint = 0xff0000 + (0xffffff - 0xff0000) * (10 - self.fadeOutRedTint) / 10; if (--self.fadeOutRedTint <= 0) { enemyGraphics.tint = 0xFFFFFF; } } }; self.health = 100; self.animateIn = function () { self.fadeInTicks = 50; }; var enemyShadow = XS.getAsset('enemyShadow', 'Enemy shadow', .5, .8); enemyShadow.alpha = 0.3; self.addChild(enemyShadow); var enemyGraphics = XS.getAsset('enemy', 'Enemy character', .5, 1); self.addChild(enemyGraphics); var healthBar = new HealthBar(); healthBar.setTint(0xFF0000); healthBar.y = -enemyGraphics.height; self.addChild(healthBar); self.healthBar = healthBar; self.healthBar.updateHealth(self.health); self.move = function () { self.fadeRedTint(); if (self.fadeInTicks > 0) { self.alpha += 0.02; self.fadeInTicks--; } }; self.flashRed = function () { self.children[0].tint = 0xFF0000; self.fadeOutRedTint = 10; }; }); var Bullet = Container.expand(function () { var self = Container.call(this); var bulletGraphics = XS.getAsset('bullet', 'Bullet', .5, .5); bulletGraphics.y -= 150; bulletGraphics.blendMode = 1; self.addChild(bulletGraphics); self.move = function () { self.dx *= 1.02; self.dy *= 1.02; self.x += self.dx * 4; self.y += self.dy * 4; if (self.x < 150 || self.x > 2048 - 150 || self.y < 700 || self.y > 2732 - 150) { return true; } return false; }; }); var Background = Container.expand(function () { var self = Container.call(this); var backgroundGraphics = XS.getAsset('background', 'Background', .5, .5); backgroundGraphics.x = 2048 / 2; backgroundGraphics.y = 2732 / 2; self.addChild(backgroundGraphics); var exitDoor = self.addChildAt(new ExitDoor(), 1); exitDoor.x = 2048 / 2; exitDoor.y = 2732 / 2 - 670 + 400; }); var Game = Container.expand(function () { var self = Container.call(this); var spawnIndicators = []; self.isTooClose = function (x, y) { for (var i = 0; i < spawnIndicators.length; i++) { var dx = spawnIndicators[i].x - x; var dy = spawnIndicators[i].y - y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < 200) { return true; } } return false; }; self.spawnEnemies = function (count) { for (var i = 0; i < count; i++) { var x, y; do { x = Math.random() * (2048 - 300) + 150; y = Math.random() * (2732 - 850) + 700; } while (self.isTooClose(x, y)); var spawnIndicator = self.addChild(new EnemySpawnIndicator()); spawnIndicator.x = x; spawnIndicator.y = y; spawnIndicators.push(spawnIndicator); (function (spawnIndicator) { XS.setTimeout(function () { var enemy = self.addChild(new Enemy()); enemy.x = spawnIndicator.x; enemy.y = spawnIndicator.y; enemies.push(enemy); spawnIndicator.destroy(); enemy.animateIn(); var index = spawnIndicators.indexOf(spawnIndicator); if (index > -1) { spawnIndicators.splice(index, 1); } }, 3000); })(spawnIndicator); } }; self.createExplosion = function (x, y) { for (var j = 0; j < 10; j++) { var particle = new ExplosionParticle(); particle.x = x; particle.y = y; particle.dx = (Math.random() - 0.5) * 10; particle.dy = (Math.random() - 0.5) * 7; self.addChild(particle); particles.push(particle); } }; var particles = []; self.sortGameObjects = function () { self.children.sort(function (a, b) { if (a === background || b === background) return 0; if (a === targetIndicator) return -1; if (b === targetIndicator) return 1; return a.y - b.y; }); }; var background = self.addChild(new Background()); var targetIndicator = new TargetIndicator(); var player = self.addChild(new Player()); player.x = 2048 / 2; player.y = 2732 - player.height; player.setTarget(player.x, player.y); targetIndicator.x = player.x; targetIndicator.y = player.y; self.addChild(targetIndicator); var enemies = []; self.spawnEnemies(5); var bullets = []; XS.on('tick', function () { player.move(0, 0); var dx = player.targetX - player.x; var dy = player.targetY - player.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < player.speed && XS.ticks - player.lastShot >= 60) { player.lastShot = XS.ticks; var bullet = player.shoot(enemies); bullets.push(bullet); self.addChild(bullet); } if (distance < player.speed) { targetIndicator.visible = false; } for (var i = 0; i < enemies.length; i++) { enemies[i].move(); } for (var i = bullets.length - 1; i >= 0; i--) { if (bullets[i].move()) { self.createExplosion(bullets[i].x, bullets[i].y); bullets[i].destroy(); bullets.splice(i, 1); } else { bullets[i].move(); for (var j = 0; j < enemies.length; j++) { if (bullets[i].intersects(enemies[j])) { enemies[j].health -= 10; enemies[j].healthBar.updateHealth(enemies[j].health); enemies[j].flashRed(); if (enemies[j].health <= 0) { enemies[j].destroy(); enemies.splice(j, 1); } self.createExplosion(bullets[i].x, bullets[i].y); bullets[i].destroy(); bullets.splice(i, 1); break; } } } } for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].alpha <= 0) { particles[i].destroy(); particles.splice(i, 1); } else { particles[i].move(); } } self.sortGameObjects(); }); stage.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); pos.x = Math.max(Math.min(pos.x, 2048 - 150), 150); pos.y = Math.max(Math.min(pos.y, 2732 - 150), 700); player.setTarget(pos.x, pos.y); targetIndicator.x = pos.x; targetIndicator.y = pos.y; targetIndicator.visible = true; }); });
===================================================================
--- original.js
+++ change.js
@@ -175,9 +175,9 @@
backgroundGraphics.y = 2732 / 2;
self.addChild(backgroundGraphics);
var exitDoor = self.addChildAt(new ExitDoor(), 1);
exitDoor.x = 2048 / 2;
- exitDoor.y = 2732 / 2 - 670;
+ exitDoor.y = 2732 / 2 - 670 + 400;
});
var Game = Container.expand(function () {
var self = Container.call(this);
var spawnIndicators = [];
giant wall Pixel art, 16 bit, isometric, SNES, top-down, no background, white background, low resolution, symmetrical
Single Short round Isometric dungeon column, simple, few stones, single column, no floor, dark room, Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Multi color chaotic noise, primary colors Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Round purple magic fireball. White core Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
enemy goblin , Pixel art, 16 bit, isometric, SNES, top-down, no background, white background, low resolution, symmetrical, seen from front. No staff.
Single fire particle Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
https://i.imgur.com/R3ZLguO.jpg Dungeon, Empty open floor, dark, fullscreen, Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. high detail. High contrast. --ar 2:3
single wizard, hooded Pixel art, 16 bit, isometric, SNES, top-down, no background, white background, low resolution, symmetrical, seen from front.
round bomb. fuse on fire Single Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Multi color chaotic noise, primary colors. Rays from the center. Darker center Single Game Texture. In-Game asset. 2d. Pixelart. Low detail. High contrast.