A Cube Tower Defense's game

Click here for free DL of the app version that can save data.

No:12937

←

Prev Next

→

A Cube Tower Defense
Developer User5637｜Date and time 23/8/25 6:48:51
Build time 27.347 sec｜Game capacity 2.767KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>Cube Tower Defense</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="600" height="400"></canvas>

// Definição da velocidade dos inimigos e torres
		const enemySpeed = 2;
		const towerSpeed = 5;

// Dimensões do canvas
		const canvasWidth = document.getElementById("gameCanvas").width;
		const canvasHeight = document.getElementById("gameCanvas").height;

// Definição dos pictogramas dos inimigos e torres
		const enemyImage = new Image();
		enemyImage.src = "enemy.png";

const towerImage = new Image();
		towerImage.src = "tower.png";

// Criando os objetos inimigos
		const enemies = [
			{ x: 60, y: 50 },
			{ x: 140, y: 50 },
			{ x: 340, y: 350 },
			{ x: 420, y: 350 }
		];

// Criando as torres
		let towers = [];

// Inicializando o canvas
		const canvas = document.getElementById("gameCanvas");
		const ctx = canvas.getContext("2d");

// Função para desenhar o jogo
		function drawGame() {
			// Limpar o canvas
			ctx.clearRect(0, 0, canvasWidth, canvasHeight);

// Desenhar os inimigos
			for (let i = 0; i < enemies.length; i++) {
				ctx.drawImage(enemyImage, enemies[i].x, enemies[i].y, cubeSize, cubeSize);
			}

// Desenhar as torres
			for (let i = 0; i < towers.length; i++) {
				ctx.drawImage(towerImage, towers[i].x, towers[i].y, cubeSize, cubeSize);
			}

// Movimentar os inimigos
			for (let i = 0; i < enemies.length; i++) {
				enemies[i].x += enemySpeed;

// Verificar se os inimigos chegaram na base
				if (enemies[i].x >= canvasWidth) {
					alert("Game Over!");
					resetGame();
				}
			}

// Movimentar as torres
			for (let i = 0; i < towers.length; i++) {
				towers[i].y -= towerSpeed;
			}

// Chamar a função novamente para simular um loop de jogo contínuo
			requestAnimationFrame(drawGame);
		}

// Função para criar uma nova torre ao clicar no canvas
		function createTower(event) {
			const mouseX = event.clientX - canvas.getBoundingClientRect().left;
			const mouseY = event.clientY - canvas.getBoundingClientRect().top;

// Verificar se o click está dentro do canvas
			if (
				mouseX >= 0 &&
				mouseX <= canvasWidth - cubeSize &&
				mouseY >= 0 &&
				mouseY <= canvasHeight - cubeSize
			) {
				// Criar uma nova torre na posição do click
				towers.push({ x: mouseX, y: mouseY });
			}
		}

// Função para reiniciar o jogo
		function resetGame() {
			enemies.forEach((enemy) => (enemy.x = 60));
			towers = [];
		}

// Evento de clique no canvas para criar torres
		canvas.addEventListener("click", createTower);

// Iniciar o jogo
		drawGame();
	</script>
</body>
</html>