Upit | Learn about creating the game Block Defense with gen AI
Play
game-community-background
game-pic

6

0

2mo

Playit
Tower defense game where brainpower is your greatest weapon!
#TowerDefense
#StrategyGame
#Academia
#MobileGaming
#KnowledgePoints

Creation History

User prompt

Please fix the bug: 'Cannot set properties of undefined (setting 'visible')' in or related to this line: 'nextWaveBtn.visible = visible;' Line Number: 420

User prompt

we need a button to start the game

Code edit (1 edits merged)

Please save this source code

User prompt

Academia : Tower Defense

Initial prompt

create a basic tower defense game with name `Academia : Tower Defense`. Tower Defense Game: Core LogicThis document outlines the fundamental components and logic flow for a classic Tower Defense game.1. Game Board & PathGrid System: The game area is typically a grid. Some cells are buildable (for towers), and some are part of the enemy path.Enemy Path: A predefined path or series of waypoints that enemies follow from a starting point (spawn) to an end point (base/goal).Enemies should move sequentially from one waypoint to the next.The path can be fixed or, in more complex games, influenced by tower placement (maze-ing).2. TowersAttributes:Cost: Amount of Knowledge Points needed to build.Range: The radius or area within which the tower can attack enemies.Damage: Amount of health points deducted from an enemy per hit.Attack Speed/Rate of Fire: How frequently the tower can attack.Projectile Speed (if applicable): How fast the tower's attack travels.Special Abilities (optional): e.g., splash damage, slowing enemies, area denial.Placement:Players can only place towers on designated buildable tiles.Sufficient Knowledge Points are required.Targeting Logic:First Enemy in Range: Targets the enemy that entered its range earliest and is still within range.Strongest Enemy: Targets the enemy with the highest current health.Weakest Enemy: Targets the enemy with the lowest current health.Closest Enemy: Targets the enemy physically closest to the tower.Towers continuously scan for targets within their range. Once an enemy is out of range or defeated, the tower seeks a new target.Upgrades:Towers can often be upgraded to improve their attributes (damage, range, attack speed) for an additional cost in Knowledge Points.3. Enemies (Creeps)Attributes:Health Points (HP): Amount of damage an enemy can sustain before being defeated.Speed: How fast the enemy moves along the path.Reward: Amount of Knowledge Points awarded to the player upon defeating the enemy.Damage to Base (optional): How much damage the enemy does if it reaches the goal.Resistances/Weaknesses (optional): e.g., resistant to certain damage types, weak to others.Movement:Enemies spawn at the start of the path.They move along the defined waypoints towards the goal.Their speed determines how quickly they traverse the path.Waves:Enemies typically attack in waves.Each wave might consist of a specific number and type of enemies.Waves can increase in difficulty (more enemies, stronger enemies, faster enemies).There's often a delay between waves, allowing the player to prepare.4. Player ResourcesKnowledge Points:Used to build and upgrade towers.Earned by defeating enemies.May also be earned passively over time or by completing waves.Lives/Base Health:The player starts with a certain number of lives or base health.Lives are lost if an enemy reaches the goal.If lives/base health reach zero, the game is over (loss).5. Core Game LoopStart Phase / Build Phase:Player has time to place or upgrade towers using Knowledge Points.Player can manually start the next wave.Wave Active Phase:Enemies spawn and begin moving along the path.Towers Attack:Towers detect enemies within their range.Apply targeting logic to select an enemy.Fire projectiles or deal damage according to their attack speed and damage attributes.Enemy Takes Damage:When hit, an enemy's HP is reduced.If HP reaches zero, the enemy is defeated.Player is awarded Knowledge Points.Enemy object is removed from the game.Enemy Reaches Goal:If an enemy reaches the end of the path:Player loses a life or base health.Enemy object is removed from the game.Wave Cleared:If all enemies in the current wave are defeated, the player might receive a bonus (e.g., extra Knowledge Points).Transition back to the Start Phase for the next wave.Game State Check:Win Condition: Player successfully defends against all waves or a predefined number of waves.Loss Condition: Player's lives/base health reach zero.6. User Interface (UI) / User Experience (UX)Display Information:Current Knowledge Points.Current lives/base health.Current wave number / enemies remaining.Tower stats (when selected or hovered), including cost in Knowledge Points.Enemy stats (optional, when selected or hovered).Controls:Selecting tower types to build.Placing towers on the map.Selecting towers to upgrade or sell (refunding some Knowledge Points).Button to start the next wave.Pause/resume game.Game speed controls (optional).Feedback:Visual cues for tower attacks (projectiles, impact effects).Sound effects for attacks, enemy deaths, enemy reaching goal.Notifications for wave start/end, low lives, etc.Advanced Concepts (Optional)Tower Synergies: Towers that boost each other when placed nearby.Special Enemy Abilities: e.g., healers, flying units (requiring specific anti-air towers), stealth units.Player Abilities: Special powers the player can use (e.g., an airstrike, temporary enemy stun), potentially costing Knowledge Points.Interest System: Earning interest on unspent Knowledge Points.Multiple Paths/Spawn Points.Boss Waves: Extra challenging waves with a single, very powerful enemy.This logical framework should give you a solid foundation for thinking about and potentially developing a tower defense game. Each of these points can be expanded into more detailed mechanics and code modules.

===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,529 @@
-/****
+/**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+
+/**** 
+* Classes
+****/ 
+// BuildTile class (for tower placement)
+var BuildTile = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach tile asset (box, light gray)
+	var tileAsset = self.attachAsset('buildTile', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.occupied = false;
+	self.tower = null;
+	// For highlighting
+	self.highlight = function (on) {
+		tileAsset.tint = on ? 0x2ecc40 : 0xbdc3c7;
+	};
+	return self;
+});
+// Bullet class
+var Bullet = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach bullet asset (small yellow box)
+	var bulletAsset = self.attachAsset('bullet', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.target = null;
+	self.damage = 5;
+	self.speed = 24;
+	self.update = function () {
+		if (!self.target || self.target.health <= 0 || self.target.reachedBase) {
+			self.destroyed = true;
+			return;
+		}
+		var dx = self.target.x - self.x;
+		var dy = self.target.y - self.y;
+		var dist = Math.sqrt(dx * dx + dy * dy);
+		if (dist < 32) {
+			// Hit
+			self.target.takeDamage(self.damage);
+			self.destroyed = true;
+			return;
+		}
+		var moveDist = Math.min(self.speed, dist);
+		self.x += dx / dist * moveDist;
+		self.y += dy / dist * moveDist;
+	};
+	return self;
+});
+// Enemy (Creep) class
+var Enemy = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach enemy asset (ellipse, purple)
+	var enemyAsset = self.attachAsset('enemy', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	// Enemy stats
+	self.maxHealth = 10 + (currentWave - 1) * 5;
+	self.health = self.maxHealth;
+	self.speed = 2 + (currentWave - 1) * 0.2; // Slightly faster each wave
+	self.reward = 5 + (currentWave - 1) * 2;
+	// Path progress
+	self.pathIndex = 0;
+	self.pathProgress = 0;
+	// For hit flash
+	self.isFlashing = false;
+	// Move along path
+	self.update = function () {
+		if (self.pathIndex >= path.length - 1) return;
+		var from = path[self.pathIndex];
+		var to = path[self.pathIndex + 1];
+		var dx = to.x - from.x;
+		var dy = to.y - from.y;
+		var dist = Math.sqrt(dx * dx + dy * dy);
+		if (dist === 0) {
+			self.pathIndex++;
+			self.pathProgress = 0;
+			return;
+		}
+		var moveDist = self.speed;
+		self.pathProgress += moveDist;
+		if (self.pathProgress >= dist) {
+			self.pathIndex++;
+			self.pathProgress = 0;
+			if (self.pathIndex >= path.length - 1) {
+				// Reached end
+				self.x = to.x;
+				self.y = to.y;
+				self.reachedBase = true;
+				return;
+			}
+		}
+		var t = self.pathProgress / dist;
+		self.x = from.x + dx * t;
+		self.y = from.y + dy * t;
+	};
+	// Take damage
+	self.takeDamage = function (dmg) {
+		self.health -= dmg;
+		if (!self.isFlashing) {
+			self.isFlashing = true;
+			tween(enemyAsset, {
+				tint: 0xffffff
+			}, {
+				duration: 80,
+				onFinish: function onFinish() {
+					tween(enemyAsset, {
+						tint: 0x8e44ad
+					}, {
+						duration: 120,
+						onFinish: function onFinish() {
+							self.isFlashing = false;
+						}
+					});
+				}
+			});
+		}
+	};
+	return self;
+});
+// Tower class
+var Tower = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach tower asset (box, blue)
+	var towerAsset = self.attachAsset('tower', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	// Tower stats
+	self.level = 1;
+	self.range = 320;
+	self.damage = 5;
+	self.fireRate = 60; // frames per shot
+	self.cooldown = 0;
+	// For upgrade flash
+	self.isFlashing = false;
+	// Show range circle (for placement)
+	self.rangeCircle = self.attachAsset('rangeCircle', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		alpha: 0.15
+	});
+	self.rangeCircle.width = self.range * 2;
+	self.rangeCircle.height = self.range * 2;
+	self.rangeCircle.visible = false;
+	// Upgrade tower
+	self.upgrade = function () {
+		if (self.level >= 3) return false;
+		self.level++;
+		self.damage += 5;
+		self.range += 40;
+		self.fireRate = Math.max(30, self.fireRate - 10);
+		self.rangeCircle.width = self.range * 2;
+		self.rangeCircle.height = self.range * 2;
+		// Flash for upgrade
+		if (!self.isFlashing) {
+			self.isFlashing = true;
+			tween(towerAsset, {
+				tint: 0xffff00
+			}, {
+				duration: 120,
+				onFinish: function onFinish() {
+					tween(towerAsset, {
+						tint: 0x3498db
+					}, {
+						duration: 180,
+						onFinish: function onFinish() {
+							self.isFlashing = false;
+						}
+					});
+				}
+			});
+		}
+		return true;
+	};
+	// Tower attack logic
+	self.update = function () {
+		if (self.cooldown > 0) {
+			self.cooldown--;
+			return;
+		}
+		// Find nearest enemy in range
+		var nearest = null;
+		var minDist = 99999;
+		for (var i = 0; i < enemies.length; i++) {
+			var e = enemies[i];
+			var dx = e.x - self.x;
+			var dy = e.y - self.y;
+			var dist = Math.sqrt(dx * dx + dy * dy);
+			if (dist <= self.range && dist < minDist) {
+				nearest = e;
+				minDist = dist;
+			}
+		}
+		if (nearest) {
+			// Shoot
+			var b = new Bullet();
+			b.x = self.x;
+			b.y = self.y;
+			b.target = nearest;
+			b.damage = self.damage;
+			b.speed = 24;
+			b.lastX = b.x;
+			b.lastY = b.y;
+			bullets.push(b);
+			game.addChild(b);
+			self.cooldown = self.fireRate;
+		}
+	};
+	return self;
+});
+
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000
-});
\ No newline at end of file
+	backgroundColor: 0xf5f6fa
+});
+
+/**** 
+* Game Code
+****/ 
+// Path definition (array of {x, y}), from top left to bottom right
+var path = [{
+	x: 180,
+	y: 300
+}, {
+	x: 180,
+	y: 1200
+}, {
+	x: 800,
+	y: 1200
+}, {
+	x: 800,
+	y: 2000
+}, {
+	x: 1800,
+	y: 2000
+}, {
+	x: 1800,
+	y: 2600
+}];
+// Buildable tile positions (not on path)
+var buildTilePositions = [{
+	x: 500,
+	y: 600
+}, {
+	x: 1100,
+	y: 800
+}, {
+	x: 400,
+	y: 1600
+}, {
+	x: 1200,
+	y: 1500
+}, {
+	x: 1700,
+	y: 1000
+}, {
+	x: 1500,
+	y: 2200
+}, {
+	x: 900,
+	y: 2100
+}];
+// Global game state
+var enemies = [];
+var towers = [];
+var bullets = [];
+var buildTiles = [];
+var baseHealth = 10;
+var knowledgePoints = 30;
+var currentWave = 1;
+var maxWaves = 10;
+var waveInProgress = false;
+var waveTimer = null;
+var spawnIndex = 0;
+var spawnDelay = 40; // frames between spawns
+var enemiesToSpawn = 0;
+var selectedTile = null;
+// Asset initialization
+// Draw path (for visual reference)
+for (var i = 0; i < path.length - 1; i++) {
+	var from = path[i];
+	var to = path[i + 1];
+	var dx = to.x - from.x;
+	var dy = to.y - from.y;
+	var dist = Math.sqrt(dx * dx + dy * dy);
+	var steps = Math.floor(dist / 40);
+	for (var s = 0; s <= steps; s++) {
+		var t = s / steps;
+		var px = from.x + dx * t;
+		var py = from.y + dy * t;
+		var node = LK.getAsset('pathDot', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			width: 32,
+			height: 32,
+			color: 0x7f8c8d,
+			shape: 'ellipse'
+		});
+		node.x = px;
+		node.y = py;
+		game.addChild(node);
+	}
+}
+// Place buildable tiles
+for (var i = 0; i < buildTilePositions.length; i++) {
+	var pos = buildTilePositions[i];
+	var tile = new BuildTile();
+	tile.x = pos.x;
+	tile.y = pos.y;
+	buildTiles.push(tile);
+	game.addChild(tile);
+}
+// Base indicator (ellipse, red)
+var baseNode = LK.getAsset('base', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	width: 160,
+	height: 160,
+	color: 0xe74c3c,
+	shape: 'ellipse'
+});
+baseNode.x = path[path.length - 1].x;
+baseNode.y = path[path.length - 1].y;
+game.addChild(baseNode);
+// GUI: Knowledge Points
+var kpTxt = new Text2('KP: ' + knowledgePoints, {
+	size: 90,
+	fill: 0x222222
+});
+kpTxt.anchor.set(0.5, 0);
+LK.gui.top.addChild(kpTxt);
+// GUI: Base Health
+var healthTxt = new Text2('Base: ' + baseHealth, {
+	size: 90,
+	fill: 0xE74C3C
+});
+healthTxt.anchor.set(0.5, 0);
+LK.gui.topRight.addChild(healthTxt);
+// GUI: Wave
+var waveTxt = new Text2('Wave: ' + currentWave + '/' + maxWaves, {
+	size: 90,
+	fill: 0x2980B9
+});
+waveTxt.anchor.set(0.5, 0);
+LK.gui.top.addChild(waveTxt);
+// GUI: Next Wave Button
+var nextWaveBtn = new Text2('▶ Next Wave', {
+	size: 90,
+	fill: 0x27AE60
+});
+nextWaveBtn.anchor.set(0.5, 0);
+LK.gui.bottom.addChild(nextWaveBtn);
+// Show/hide next wave button
+function setNextWaveBtnVisible(visible) {
+	nextWaveBtn.visible = visible;
+}
+setNextWaveBtnVisible(true);
+// Start next wave
+function startWave() {
+	if (waveInProgress || currentWave > maxWaves) return;
+	waveInProgress = true;
+	setNextWaveBtnVisible(false);
+	enemiesToSpawn = 6 + currentWave * 2;
+	spawnIndex = 0;
+}
+// Next wave button event
+nextWaveBtn.down = function (x, y, obj) {
+	if (!waveInProgress && currentWave <= maxWaves) {
+		startWave();
+	}
+};
+// Build/upgrade tower on tile
+function tryBuildOrUpgrade(tile) {
+	if (tile.occupied) {
+		// Try upgrade
+		if (tile.tower.level < 3) {
+			var upgradeCost = 20 + tile.tower.level * 15;
+			if (knowledgePoints >= upgradeCost) {
+				knowledgePoints -= upgradeCost;
+				tile.tower.upgrade();
+				kpTxt.setText('KP: ' + knowledgePoints);
+			}
+		}
+	} else {
+		// Build new tower
+		var buildCost = 20;
+		if (knowledgePoints >= buildCost) {
+			knowledgePoints -= buildCost;
+			var tower = new Tower();
+			tower.x = tile.x;
+			tower.y = tile.y;
+			towers.push(tower);
+			game.addChild(tower);
+			tile.occupied = true;
+			tile.tower = tower;
+			kpTxt.setText('KP: ' + knowledgePoints);
+		}
+	}
+}
+// Highlight build tiles on touch
+game.down = function (x, y, obj) {
+	// Convert to game coordinates
+	for (var i = 0; i < buildTiles.length; i++) {
+		var tile = buildTiles[i];
+		var dx = x - tile.x;
+		var dy = y - tile.y;
+		if (dx * dx + dy * dy < 70 * 70) {
+			// Select this tile
+			if (selectedTile && selectedTile !== tile) {
+				selectedTile.highlight(false);
+				if (selectedTile.tower) selectedTile.tower.rangeCircle.visible = false;
+			}
+			selectedTile = tile;
+			tile.highlight(true);
+			if (tile.tower) {
+				tile.tower.rangeCircle.visible = true;
+			} else {
+				// Show a temp range circle for new tower
+				if (!tile.tempRange) {
+					tile.tempRange = LK.getAsset('rangeCircle', {
+						anchorX: 0.5,
+						anchorY: 0.5,
+						alpha: 0.12
+					});
+					tile.tempRange.width = 640;
+					tile.tempRange.height = 640;
+					tile.tempRange.x = tile.x;
+					tile.tempRange.y = tile.y;
+					game.addChild(tile.tempRange);
+				}
+				tile.tempRange.visible = true;
+			}
+			return;
+		}
+	}
+	// If tap on selected tile, build/upgrade
+	if (selectedTile) {
+		var dx = x - selectedTile.x;
+		var dy = y - selectedTile.y;
+		if (dx * dx + dy * dy < 70 * 70) {
+			tryBuildOrUpgrade(selectedTile);
+		}
+		// Hide highlight and range
+		selectedTile.highlight(false);
+		if (selectedTile.tower) selectedTile.tower.rangeCircle.visible = false;
+		if (selectedTile.tempRange) selectedTile.tempRange.visible = false;
+		selectedTile = null;
+	}
+};
+// Remove highlight/range on up
+game.up = function (x, y, obj) {
+	if (selectedTile) {
+		selectedTile.highlight(false);
+		if (selectedTile.tower) selectedTile.tower.rangeCircle.visible = false;
+		if (selectedTile.tempRange) selectedTile.tempRange.visible = false;
+		selectedTile = null;
+	}
+};
+// Main game update
+game.update = function () {
+	// Spawn enemies for wave
+	if (waveInProgress && enemiesToSpawn > 0 && LK.ticks % spawnDelay === 0) {
+		var enemy = new Enemy();
+		enemy.x = path[0].x;
+		enemy.y = path[0].y;
+		enemy.pathIndex = 0;
+		enemy.pathProgress = 0;
+		enemies.push(enemy);
+		game.addChild(enemy);
+		enemiesToSpawn--;
+	}
+	// Update enemies
+	for (var i = enemies.length - 1; i >= 0; i--) {
+		var e = enemies[i];
+		e.update();
+		if (e.health <= 0) {
+			// Enemy defeated
+			knowledgePoints += e.reward;
+			kpTxt.setText('KP: ' + knowledgePoints);
+			e.destroy();
+			enemies.splice(i, 1);
+		} else if (e.reachedBase) {
+			// Enemy reached base
+			baseHealth--;
+			healthTxt.setText('Base: ' + baseHealth);
+			e.destroy();
+			enemies.splice(i, 1);
+			LK.effects.flashScreen(0xe74c3c, 400);
+			if (baseHealth <= 0) {
+				LK.showGameOver();
+				return;
+			}
+		}
+	}
+	// Update towers
+	for (var i = 0; i < towers.length; i++) {
+		towers[i].update();
+	}
+	// Update bullets
+	for (var i = bullets.length - 1; i >= 0; i--) {
+		var b = bullets[i];
+		b.update();
+		if (b.destroyed) {
+			b.destroy();
+			bullets.splice(i, 1);
+		}
+	}
+	// End wave if all enemies defeated and none left to spawn
+	if (waveInProgress && enemies.length === 0 && enemiesToSpawn === 0) {
+		waveInProgress = false;
+		currentWave++;
+		if (currentWave > maxWaves) {
+			LK.showYouWin();
+			return;
+		}
+		waveTxt.setText('Wave: ' + currentWave + '/' + maxWaves);
+		setNextWaveBtnVisible(true);
+	}
+};
\ No newline at end of file
Showing 51 to 55 of 55
123

Used plugins

@upit/tween
Home
Discover
Play
Profile