User prompt
Add forest to the background, we want at-least 5 different tree types and trees should be placed randomly between our base and the enemy base.
User prompt
Make the background sky colored
User prompt
Add a ground to the game, move up the bases and soldiers a bit to make room for the ground
User prompt
The left side of my base can't be seen and the right side of the enemy base can't be seen. Ensure the entire base is inside the visible world area
User prompt
Clamp the horizontal scrolling movement such that you can't scroll further to the left than players base is in full view and further to the right than enemy base is in full view.
User prompt
Make enemy soldiers spawn at the enemy base
User prompt
The bases are to close together, rather than having the enemy base on the right most edge, move it outside the screen by 4x
User prompt
Consider the mouse offset when scrolling horizontally
User prompt
New soldiers do not seem to be attached to the world.
User prompt
Bases and soldiers should be attached to horizontally scrollable world class. Click and dragging should let the user pan the world left and right.
User prompt
Add a Helth bar class, that renders a horizontally centered health bar. Then add health bars to bases and soldiers bars that renders above.
User prompt
Align soldiers and bases to the bottom of the play area
User prompt
takeDamage should return if the soldier died. If the solider died they should be removed.
User prompt
Only wait in line for soldiers that was spawned before the current soldier.
User prompt
My soldiers should not be able to walk past my other soldiers. Instead they should stop and wait in line, keeping distance to the soldier in-front of them. Enemy soldiers should behave similarly.
User prompt
Soldiers should not be able to pass each other. Our soldiers should stop and fight if they encounter an enemy solider. Enemy soldiers should stop and fight if they encounter one of our soldiers.
User prompt
Increase soldier health points by 20x
Initial prompt
Add player HUD to top right corner, showing my money count and XP count.
===================================================================
--- original.js
+++ change.js
@@ -3,90 +3,103 @@
XS.stageContainer.setBackgroundColor(0x87CEEB);
function game() {
/** Entity Classes **/
- var HealthBar = Container.expand(function() {
+ var Tree = Container.expand(function() {
var self = Container.call(this); //{0}
+ var treeGraphics = XS.getAsset('tree' + Math.ceil(Math.random() * 5), 'Tree Graphics')
+ treeGraphics.anchor.set(.5, 1)
+ self.addChild(treeGraphics)
+ }) //{1}
+
+ var HealthBar = Container.expand(function() {
+ var self = Container.call(this); //{2}
var healthBarGraphics = XS.getAsset('healthBar', 'Health Bar Graphics')
healthBarGraphics.anchor.set(.5, .5)
self.addChild(healthBarGraphics)
this.updateHealth = function(health, maxHealth) {
healthBarGraphics.scale.x = health / maxHealth;
- } //{1}
- }) //{2}
+ } //{3}
+ }) //{4}
var Soldier = Container.expand(function() {
- var self = Container.call(this); //{3}
+ var self = Container.call(this); //{5}
var soldierGraphics = XS.getAsset('soldier', 'Soldier Graphics')
soldierGraphics.anchor.set(.5, .5)
self.addChild(soldierGraphics)
self.health = 2000;
- var healthBar = self.addChild(new HealthBar()); //{4}
+ var healthBar = self.addChild(new HealthBar()); //{6}
healthBar.y = -soldierGraphics.height / 2 - 10;
self.speed = 5;
this.move = function(soldiers, enemies) {
var index = soldiers.indexOf(this);
if (index > 0 && this.intersects(soldiers[index - 1])) {
- return; //{5}
- } //{6}
+ return; //{7}
+ } //{8}
for (var i = 0; i < enemies.length; i++) {
if (this.intersects(enemies[i])) {
- return; //{7}
- } //{8}
- } //{9}
+ return; //{9}
+ } //{10}
+ } //{11}
this.x += self.speed
- } //{10}
+ } //{12}
- this.takeDamage = function(damage) { //{11}
- this.health -= damage; //{12}
+ this.takeDamage = function(damage) { //{13}
+ this.health -= damage; //{14}
healthBar.updateHealth(this.health, 2000);
- if (this.health <= 0) { //{13}
+ if (this.health <= 0) { //{15}
this.destroy();
return true;
- } //{14}
+ } //{16}
return false;
- } //{15}
- }) //{16}
+ } //{17}
+ }) //{18}
var Base = Container.expand(function() {
- var self = Container.call(this); //{17}
+ var self = Container.call(this); //{19}
var baseGraphics = XS.getAsset('base', 'Base Graphics')
baseGraphics.anchor.set(.5, .5)
self.addChild(baseGraphics)
self.health = 1000;
- var healthBar = self.addChild(new HealthBar()); //{18}
+ var healthBar = self.addChild(new HealthBar()); //{20}
healthBar.y = -baseGraphics.height / 2 - 10;
- this.takeDamage = function(damage) { //{19}
- this.health -= damage; //{20}
+ this.takeDamage = function(damage) { //{21}
+ this.health -= damage; //{22}
healthBar.updateHealth(this.health, 1000);
- if (this.health <= 0) { //{21}
+ if (this.health <= 0) { //{23}
XS.showGameOver(restartGame)
- } //{22}
- } //{23}
- }) //{24}
+ } //{24}
+ } //{25}
+ }) //{26}
/** Main Class **/
var Ground = Container.expand(function() {
- var self = Container.call(this); //{25}
+ var self = Container.call(this); //{27}
var groundGraphics = XS.getAsset('ground', 'Ground Graphics')
groundGraphics.anchor.set(.5, .5)
self.addChild(groundGraphics)
- }) //{26}
+ }) //{28}
var World = Container.expand(function() {
- var self = Container.call(this); //{27}
+ var self = Container.call(this); //{29}
var ground = self.addChild(new Ground());
ground.y = 2732 - ground.height / 2;
- }); //{28}
+ for (var i = 0; i < 100; i++) {
+ var tree = self.addChild(new Tree());
+ tree.x = Math.random() * 2048 * 4;
+ tree.y = 2732 - tree.height / 2 - 100;
+ } //{30}
+ }); //{31}
+
var StrategyFRVR = Container.expand(function() {
- var self = Container.call(this); //{29}
+ var self = Container.call(this); //{32}
var world = self.addChild(new World());
var playerBase = world.addChild(new Base());
@@ -103,20 +116,20 @@
var money = 1000;
var xp = 0;
var moneyTxt = new Text2('Money: ' + money, {
- size: 50, //{30}
- font: "'GillSans-Bold',Impact,'Arial Black',Tahoma", //{31}
- fill: "#ffffff" //{32}
- }); //{33}
+ size: 50, //{33}
+ font: "'GillSans-Bold',Impact,'Arial Black',Tahoma", //{34}
+ fill: "#ffffff" //{35}
+ }); //{36}
moneyTxt.anchor.set(1, 0);
XS.gui.topRight.addChild(moneyTxt);
var xpTxt = new Text2('XP: ' + xp, {
- size: 50, //{34}
- font: "'GillSans-Bold',Impact,'Arial Black',Tahoma", //{35}
- fill: "#ffffff" //{36}
- }); //{37}
+ size: 50, //{37}
+ font: "'GillSans-Bold',Impact,'Arial Black',Tahoma", //{38}
+ fill: "#ffffff" //{39}
+ }); //{40}
xpTxt.y = 60;
xpTxt.anchor.set(1, 0);
XS.gui.topRight.addChild(xpTxt);
@@ -131,11 +144,11 @@
if (isPlayer) {
playerSoldiers.push(soldier);
} else {
enemySoldiers.push(soldier);
- } //{38}
- } //{39}
- } //{40}
+ } //{41}
+ } //{42}
+ } //{43}
function handleTick() {
for (var i = 0; i < playerSoldiers.length; i++) {
var soldier = playerSoldiers[i];
@@ -143,50 +156,50 @@
for (var j = 0; j < enemySoldiers.length; j++) {
var enemy = enemySoldiers[j];
if (soldier.intersects(enemy)) {
if (soldier.takeDamage(10)) {
- playerSoldiers.splice(i, 1); //{41}
- i--; //{42}
- } //{43}
+ playerSoldiers.splice(i, 1); //{44}
+ i--; //{45}
+ } //{46}
if (enemy.takeDamage(10)) {
enemySoldiers.splice(j, 1);
j--;
- } //{44}
- } //{45}
- } //{46}
+ } //{47}
+ } //{48}
+ } //{49}
if (soldier.intersects(enemyBase)) {
enemyBase.takeDamage(50);
- playerSoldiers.splice(i, 1); //{47}
- i--; //{48}
- } //{49}
- } //{50}
+ playerSoldiers.splice(i, 1); //{50}
+ i--; //{51}
+ } //{52}
+ } //{53}
for (var i = 0; i < enemySoldiers.length; i++) {
var soldier = enemySoldiers[i];
soldier.move(enemySoldiers, playerSoldiers);
if (soldier.intersects(playerBase)) {
playerBase.takeDamage(50);
enemySoldiers.splice(i, 1);
- i--; //{51}
- } //{52}
- } //{53}
+ i--; //{54}
+ } //{55}
+ } //{56}
if (XS.ticks % 60 == 0) {
spawnSoldier(true);
spawnSoldier(false);
- } //{54}
+ } //{57}
moneyTxt.setText('Money: ' + money);
xpTxt.setText('XP: ' + xp);
- } //{55}
+ } //{58}
XS.on('tick', handleTick)
var dragWorld = null;
var initialMousePos = null;
stage.on('down', function(obj) {
dragWorld = world;
initialMousePos = obj.event.getLocalPosition(self);
- }) //{56}
+ }) //{59}
stage.on('move', function(obj) {
if (dragWorld && initialMousePos) {
var event = obj.event;
@@ -195,35 +208,35 @@
if (newX > 0) {
newX = 0;
} else if (newX < stage.width - 2048 * 4) {
newX = stage.width - 2048 * 4;
- } //{57}
+ } //{60}
dragWorld.x = newX;
initialMousePos = pos;
- } //{58}
- }) //{59}
+ } //{61}
+ }) //{62}
stage.on('up', function(obj) {
dragWorld = null;
initialMousePos = null;
- }) //{60}
+ }) //{63}
function restartGame() {
playerBase.health = 1000;
enemyBase.health = 1000;
money = 1000;
xp = 0;
playerSoldiers = [];
enemySoldiers = [];
- } //{61}
- }); //{62}
+ } //{64}
+ }); //{65}
/** Initialize the 'main class' and attach it to stage **/
var strategyFRVR = new StrategyFRVR()
stage.addChild(strategyFRVR);
function positionElements(obj) {
strategyFRVR.x = (stage.width - 2048) / 2
- } //{63}
+ } //{66}
positionElements();
XS.on('resize', positionElements);
-} //{64}
\ No newline at end of file
+} //{67}
\ No newline at end of file
Single square button with bow and arrow on it. Metal button Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
single background tree, full view. Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Heroic knight walking to the right. Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Enemy zombie knight walking to the left. Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Single square button with soldier helmet on it. Metal button Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Heroic archer walking to the right. Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
Full view Hero stronghold with gate at the right. Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.
single background tree, full view. Game Texture. In-Game asset. 2d. Pixelart. White background. Blank background. Low detail. High contrast.