Entertain your players! Let’s make a star! Choose your favorite civilization and creatures and destroy other planets! This game is a game where you select civilizations, races, and creatures to fight against other planets. Battles are selected from attack, loot, growth, and recovery commands. You can’t quit this game until you win or lose. As a programmer, you are responsible for creating games. No more translation possible. Please keep the original's game

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

No:4484

5108

←

Prev Next

→

Entertain your players! Let’s make a star! Choose ..ALL
Developer User3589｜Date and time 23/6/28 2:11:38
Build time 121.14 sec｜Game capacity 10.524KB｜

Script

Choose your civilization

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Star Wars</title>
	<style>
		body {
			font-family: sans-serif;
			background-color: black;
			color: white;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			margin: 0 auto;
			border: 2px solid white;
			background-color: #222222;
		}
		h1 {
			font-size: 3em;
			margin-top: 1em;
		}
		h2 {
			font-size: 2em;
			margin-top: 0.5em;
		}
		button {
			font-size: 1.5em;
			margin-top: 0.5em;
			padding: 0.5em 1em;
			background-color: darkorange;
			border: none;
			border-radius: 1em;
			cursor: pointer;
			transition: background-color 0.2s ease-out;
		}
		button:hover {
			background-color: orange;
		}
	</style>
	<script>
		const WIDTH = 480;
		const HEIGHT = 500;//640;

var canvas, ctx;
		var me, others, planets;
		var gameStarted, gameOver;

var planetImgs = [ "🌊", "🌑", "🐲", "🌵", "🔥", "💎" ];
		var raceImgs = [ "👽", "🦁", "🦊", "🦄", "🐉", "🐖" ];
		var creatureImgs = [ "🌟", "🎯", "💣", "🔨", "🧹", "🎁" ];

var players = [  // civilizations and races
			{ name: "Earth", race: "Human", color: "blue" },
			{ name: "Mars", race: "Martian", color: "red" },
			{ name: "Venus", race: "Venusian", color: "green" }
		];

var pointer = {  // smartphone touch pointer
			x: 0,
			y: 0,
			active: false
		};

var sound = {
			attack: new Audio("sound/attack.mp3"),
			loot: new Audio("sound/loot.mp3"),
			grow: new Audio("sound/grow.mp3"),
			recover: new Audio("sound/recover.mp3"),
			win: new Audio("sound/win.mp3"),
			lose: new Audio("sound/lose.mp3"),
		};

function init() {
			canvas = document.createElement("canvas");
			canvas.width = WIDTH;
			canvas.height = HEIGHT;
			ctx = canvas.getContext("2d");
			document.body.appendChild(canvas);

canvas.addEventListener("touchstart", handleTouchStart, false);
			canvas.addEventListener("touchmove", handleTouchMove, false);
			canvas.addEventListener("touchend", handleTouchEnd, false);

gameStarted = false;
			gameOver = false;

requestAnimationFrame(mainLoop);
		}

function handleTouchStart(event) {
			event.preventDefault();
			pointer.active = true;
			pointer.x = event.touches[0].clientX - canvas.offsetLeft;
			pointer.y = event.touches[0].clientY - canvas.offsetTop;
		}

function handleTouchMove(event) {
			event.preventDefault();
			if (pointer.active) {
				pointer.x = event.touches[0].clientX - canvas.offsetLeft;
				pointer.y = event.touches[0].clientY - canvas.offsetTop;
			}
		}

function handleTouchEnd(event) {
			event.preventDefault();
			pointer.active = false;
		}

function mainLoop(timestamp) {
			update(timestamp);
			render();
			if (!gameOver) {
				requestAnimationFrame(mainLoop);
			}
		}

function update(timestamp) {
			if (!gameStarted) {
				// show start screen
				ctx.fillStyle = "white";
				ctx.font = "2em sans-serif";
				ctx.fillText("Star Wars", WIDTH/2, HEIGHT/2 - 50, WIDTH-40);
				ctx.font = "1.5em sans-serif";
				ctx.fillText("(Choose your civilization)", WIDTH/2, HEIGHT/2, WIDTH-40);
				for (var i = 0; i < players.length; i++) {
					ctx.fillStyle = players[i].color;
					ctx.beginPath();
					ctx.arc(WIDTH/2 - 120 + i*120, HEIGHT/2 + 70, 40, 0, 2*Math.PI);
					ctx.closePath();
					ctx.fill();
					ctx.fillStyle = "white";
					ctx.font = "1em sans-serif";
					ctx.fillText(players[i].name, WIDTH/2 - 145 + i*120, HEIGHT/2 + 70);
					ctx.font = "0.8em sans-serif";
					ctx.fillText(players[i].race, WIDTH/2 - 145 + i*120, HEIGHT/2 + 100);
				}
				return;
			}

if (me && !gameOver) {
				// update player position and direction
				if (pointer.active) {
					me.dir = Math.atan2(pointer.y - me.y, pointer.x - me.x);
				}
				me.x += Math.cos(me.dir) * me.speed;
				me.y += Math.sin(me.dir) * me.speed;

// check collisions with other players and planets
				for (var i = 0; i < others.length; i++) {
					if (distance(me, others[i]) < 30) {
						if (me.command == "attack" && me.target == i) {
							attack(me, others[i]);
						} else if (me.command == "loot" && me.target == i) {
							loot(me, others[i]);
						}
					}
				}
				for (var i = 0; i < planets.length; i++) {
					if (distance(me, planets[i]) < 30) {
						if (me.command == "growth" && me.target == i) {
							growth(me, planets[i]);
						} else if (me.command == "recover" && me.target == i) {
							recover(me, planets[i]);
						}
					}
				}

// update other players and planets
				for (var i = 0; i < others.length; i++) {
					others[i].x += Math.cos(others[i].dir) * others[i].speed;
					others[i].y += Math.sin(others[i].dir) * others[i].speed;
					if (others[i].command == "wait" || others[i].command == "attack" || others[i].command == "loot") {
						if (Math.random() < 0.01) {
							others[i].command = ["attack", "loot"][Math.floor(Math.random() * 2)];
							others[i].target = Math.floor(Math.random() * players.length);
						}
					}
				}
				for (var i = 0; i < planets.length; i++) {
					if (planets[i].color != me.color) {
						if (Math.random() < 0.01) {
							planets[i].color = me.color;
							planets[i].race = me.race;
							planets[i].level = 1;
							sound.grow.play();
						}
					}
				}

// check if player is dead
				if (me.level <= 0) {
					gameOver = true;
					sound.lose.play();
				}

// check if player has won
				var count = 0;
				for (var i = 0; i < planets.length; i++) {
					if (planets[i].color == me.color) {
						count++;
					}
				}
				if (count == planets.length) {
					gameOver = true;
					sound.win.play();
				}
			}
		}

function render() {
			if (gameStarted) {
				// clear canvas
				ctx.fillStyle = "#222222";
				ctx.fillRect(0, 0, WIDTH, HEIGHT);

// draw players and planets
				for (var i = 0; i < others.length; i++) {
					drawPlayer(others[i]);
				}
				for (var i = 0; i < planets.length; i++) {
					drawPlanet(planets[i]);
				}
				drawPlayer(me);

// draw touch pointer
				if (pointer.active) {
					ctx.fillStyle = "white";
					ctx.beginPath();
					ctx.arc(pointer.x, pointer.y, 10, 0, 2*Math.PI);
					ctx.closePath();
					ctx.fill();
				}

// show player status
				ctx.fillStyle = me.color;
				ctx.font = "1.5em sans-serif";
				ctx.fillText(me.name, 20, 40);
				ctx.fillText("Level " + me.level, 20, 80);
				ctx.fillText("Command: " + me.command, 20, 120);
				if (me.target >= 0) {
					ctx.fillText("Target: " + others[me.target].name, 20, 160);
				} else if (me.target < 0) {
					ctx.fillText("Target: Planet " + (-me.target), 20, 160);
				}

// check game over
				if (gameOver) {
					ctx.fillStyle = "white";
					ctx.font = "3em sans-serif";
					ctx.fillText("Game Over", WIDTH/2, HEIGHT/2);
				}
			}
		}

function startGame(playerIndex) {
			gameStarted = true;

// create player and others
			me = {
				name: players[playerIndex].name,
				race: players[playerIndex].race,
				x: WIDTH/2,
				y: HEIGHT/2,
				dir: Math.random() * 2*Math.PI,
				speed: 4,
				color: players[playerIndex].color,
				level: 1,
				command: "wait",
				target: -1
			};
			others = [];
			for (var i = 0; i < players.length; i++) {
				if (i != playerIndex) {
					others.push({
						name: players[i].name,
						race: "",
						x: Math.random() * WIDTH,
						y: Math.random() * HEIGHT,
						dir: Math.random() * 2*Math.PI,
						speed: 2,
						color: players[i].color,
						level: 1,
						command: "wait",
						target: -1
					});
				}
			}

// create planets
			planets = [];
			for (var i = 0; i < 6; i++) {
				planets.push({
					x: Math.random() * WIDTH,
					y: Math.random() * HEIGHT,
					color: players[Math.floor(Math.random() * players.length)].color,
					race: "",
					level: 1
				});
			}

// play background music
			var bgm = new Audio("sound/bgm.mp3");
			bgm.loop = true;
			bgm.play();
		}

function drawPlayer(player) {
			ctx.save();
			ctx.translate(player.x, player.y);
			ctx.rotate(player.dir);
			ctx.fillStyle = player.color;
			ctx.font = "30px sans-serif";
			ctx.fillText(raceImgs[players.findIndex(p => p.color == player.color)], -15, -15);
			if (player.level > 1) {
				ctx.fillText(creatureImgs[player.level-2], 5, -15);
			}
			ctx.restore();
		}

function drawPlanet(planet) {
			ctx.fillStyle = planet.color;
			ctx.font = "40px sans-serif";
			ctx.fillText(planetImgs[planets.indexOf(planet)], planet.x - 15, planet.y + 15);
			if (planet.level > 1) {
				ctx.fillText(creatureImgs[planet.level-2], planet.x + 15, planet.y + 15);
			}
		}

function distance(obj1, obj2) {
			return Math.sqrt((obj1.x - obj2.x)**2 + (obj1.y - obj2.y)**2);
		}

function growth(actor, planet) {
			if (planet.color == actor.color && planet.level < 6) {
				planet.level++;
				sound.grow.play();
				actor.command = "wait";
				actor.target = -1;
			}
		}

function recover(actor, planet) {
			if (planet.color == actor.color && actor.level < 6) {
				actor.level++;
				sound.recover.play();
				actor.command = "wait";
				actor.target = -1;
			}
		}

// start game when the page is loaded
		window.addEventListener("load", function() {
			init();

var startButtons = document.querySelectorAll("button.start");
			for (var i = 0; i < startButtons.length; i++) {
				startButtons[i].addEventListener("click", function() {
					startGame(players.findIndex(p => p.name == this.getAttribute("data-civ")));
				});
			}
		});
	</script>
</head>
<body>
	<div><button onclick="me.command = 'attack'">Attack</button> <button onclick="me.command = 'loot'">Loot</button> <button onclick="me.command = 'growth'">Growth</button> <button onclick="me.command = 'recover'">Recover</button></div>
	<div>
		<button class="start" data-civ="Earth">🌍 Earth</button>
		<button class="start" data-civ="Mars">🟥 Mars</button>
		<button class="start" data-civ="Venus">🟢 Venus</button>
	</div>
	<p>Choose your civilization</p>
</body>
</html>