AI game creator

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

No:50073

179

←

Prev Next

→

Logo animation
Developer User21218｜Date and time 24/3/7 15:02:43
Build time 1.195 sec｜Game capacity 0.129KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

Choose your civilization

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!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>