A game where we are a giant robot controlled by a scientist who must defeat giant monsters and defeat the strongest the godwolf to free the planet but we are frozen by icewolf another monster and the game will be developed in the future where we must k○ll godwolf to finish everything.'s game

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

No:3012

164

←

Prev Next

→

A game where we are a giant robot controlled by a ..ALL
Developer User3408｜Date and time 23/6/23 12:16:04
Build time 84.793 sec｜Game capacity 9.025KB｜

Script

¡Juego de Robot Gigante vs Monstruos!

¡Empezar a jugar!

Puntaje: 0

¡Game over!

Puntaje:

←

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>Robot Gigante vs Monstruos</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #272727;
			overflow: hidden;
			touch-action: none;
			user-select: none;
		}

canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			touch-action: none;
			user-select: none;
			z-index: 0;
		}

#game-message {
			position: absolute;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 30px;
			color: #fff;
			text-align: center;
			z-index: 1;
		}

#start-game {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid #fff;
			padding: 10px 20px;
			border-radius: 5px;
			font-size: 20px;
			color: #fff;
			cursor: pointer;
			z-index: 1;
		}

#score {
			position: absolute;
			top: 20px;
			right: 20px;
			font-size: 30px;
			color: #fff;
			text-align: right;
			z-index: 1;
		}

#health-bar {
			position: absolute;
			top: 60px;
			left: 20px;
			width: 200px;
			height: 30px;
			border: 2px solid #fff;
			border-radius: 5px;
			z-index: 1;
		}

#health-bar-fill {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #ff6b6b;
			border-radius: 5px;
			z-index: 1;
		}

#game-over {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(0, 0, 0, 0.8);
			padding: 20px;
			border-radius: 5px;
			font-size: 30px;
			color: #fff;
			text-align: center;
			display: none;
			z-index: 2;
		}

#play-again {
			border: 2px solid #fff;
			padding: 10px 20px;
			border-radius: 5px;
			font-size: 20px;
			color: #fff;
			cursor: pointer;
			margin-top: 20px;
		}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<div id="game-message">¡Juego de Robot Gigante vs Monstruos!</div>
	<div id="start-game">¡Empezar a jugar!</div>
	<div id="score">Puntaje: 0</div>
	<div id="health-bar">
		<div id="health-bar-fill"></div>
	</div>
	<div id="game-over">
		<p>¡Game over!</p>
		<p>Puntaje: <span id="final-score"></span></p>
		<button id="play-again">¡Volver a jugar!</button>
	</div>

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

let gameStarted = false;
		let gameOver = false;

const player = {
			x: 0,
			y: 0,
			width: 100,
			height: 100,
			speed: 5,
			health: 100,
			damage: 10,
			score: 0,
			sprite: new Image(),
			draw() {
				ctx.drawImage(this.sprite, this.x, this.y, this.width, this.height);
			}
		};

const monsters = [];
		const monsterSprites = [new Image(), new Image(), new Image(), new Image()];

const gameMessage = document.getElementById('game-message');
		const startGameButton = document.getElementById('start-game');
		const scoreDisplay = document.getElementById('score');
		const healthBarFill = document.getElementById('health-bar-fill');
		const gameOverDisplay = document.getElementById('game-over');
		const finalScoreDisplay = document.getElementById('final-score');
		const playAgainButton = document.getElementById('play-again');

function loadAssets() {
			player.sprite.src = 'robot.png';

monsterSprites[0].src = 'monster1.png';
			monsterSprites[1].src = 'monster2.png';
			monsterSprites[2].src = 'monster3.png';
			monsterSprites[3].src = 'godwolf.png';
		}

function spawnMonster() {
			const monster = {
				x: Math.random() * canvas.width,
				y: Math.random() * canvas.height,
				width: 100,
				height: 100,
				speed: Math.random() * 5 + 1,
				health: Math.random() * 20 + 50,
				damage: Math.random() * 5 + 5,
				sprite: monsterSprites[Math.floor(Math.random() * monsterSprites.length)],
				draw() {
					ctx.drawImage(this.sprite, this.x, this.y, this.width, this.height);
				}
			};

monsters.push(monster);
		}

function updatePlayer() {
			if (player.health <= 0) {
				gameOver = true;
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				gameOverDisplay.style.display = 'block';
				finalScoreDisplay.innerText = player.score;
				return;
			}

if (player.score >= 1000) {
				gameOver = true;
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				gameOverDisplay.style.display = 'block';
				finalScoreDisplay.innerText = player.score;
				gameMessage.innerText = "¡Has ganado!";
				return;
			}

if (player.x < 0) {
				player.x = 0;
			} else if (player.x > canvas.width - player.width) {
				player.x = canvas.width - player.width;
			}

if (player.y < 0) {
				player.y = 0;
			} else if (player.y > canvas.height - player.height) {
				player.y = canvas.height - player.height;
			}

healthBarFill.style.width = player.health + '%';
			scoreDisplay.innerText = 'Puntaje: ' + player.score;
		}

function updateMonsters() {
			for (let i = 0; i < monsters.length; i++) {
				const monster = monsters[i];

const xDiff = player.x - monster.x;
				const yDiff = player.y - monster.y;

const distance = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));

if (distance <= 200) {
					const angle = Math.atan2(yDiff, xDiff);
					const vx = Math.cos(angle) * monster.speed;
					const vy = Math.sin(angle) * monster.speed;

monster.x += vx;
					monster.y += vy;
				}

if (monster.health <= 0) {
					player.score += 100;
					monsters.splice(i, 1);
					continue;
				}

if (monster.x < 0) {
					monster.x = 0;
				} else if (monster.x > canvas.width - monster.width) {
					monster.x = canvas.width - monster.width;
				}

if (monster.y < 0) {
					monster.y = 0;
				} else if (monster.y > canvas.height - monster.height) {
					monster.y = canvas.height - monster.height;
				}

monster.draw();
			}
		}

function checkCollisions() {
			for (let i = 0; i < monsters.length; i++) {
				const monster = monsters[i];

if (collision(player, monster)) {
					player.health -= monster.damage;
				}

for (let j = 0; j < playerProjectiles.length; j++) {
					const projectile = playerProjectiles[j];

if (collision(projectile, monster)) {
						monster.health -= player.damage;
						playerProjectiles.splice(j, 1);
					}
				}
			}
		}

function collision(obj1, obj2) {
			const xDiff = obj1.x + obj1.width / 2 - (obj2.x + obj2.width / 2);
			const yDiff = obj1.y + obj1.height / 2 - (obj2.y + obj2.height / 2);

const distance = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));

if (distance <= obj1.width / 2 + obj2.width / 2) {
				return true;
			} else {
				return false;
			}
		}

let keys = {};

document.addEventListener('keydown', function (e) {
			keys[e.key] = true;
		});

document.addEventListener('keyup', function (e) {
			keys[e.key] = false;
		});

function gameLoop() {
			if (!gameStarted) {
				requestAnimationFrame(gameLoop);
				return;
			}

if (gameOver) {
				return;
			}

ctx.clearRect(0, 0, canvas.width, canvas.height);

if (keys.ArrowUp || keys.w) {
				player.y -= player.speed;
			}

if (keys.ArrowDown || keys.s) {
				player.y += player.speed;
			}

if (keys.ArrowLeft || keys.a) {
				player.x -= player.speed;
			}

if (keys.ArrowRight || keys.d) {
				player.x += player.speed;
			}

if (keys.Space) {
				shoot();
			}

updatePlayer();
			updateMonsters();
			checkCollisions();

player.draw();

requestAnimationFrame(gameLoop);
		}

let playerProjectiles = [];

function shoot() {
			const projectile = {
				x: player.x + player.width / 2,
				y: player.y + player.height / 2,
				radius: 5,
				speed: 10,
				damage: 20,
				draw() {
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
					ctx.fillStyle = '#fff';
					ctx.fill();
					ctx.closePath();
				}
			};

playerProjectiles.push(projectile);
		}

function updatePlayerProjectiles() {
			for (let i = 0; i < playerProjectiles.length; i++) {
				const projectile = playerProjectiles[i];

projectile.x += projectile.speed;

if (projectile.x > canvas.width) {
					playerProjectiles.splice(i, 1);
					continue;
				}

projectile.draw();
			}
		}

function update() {
			if (!gameStarted) {
				return;
			}

if (gameOver) {
				return;
			}

updatePlayerProjectiles();
		}

function startGame() {
			gameStarted = true;
			gameMessage.style.display = 'none';
			startGameButton.style.display = 'none';
			spawnMonsterInterval = setInterval(spawnMonster, 1000);
			requestAnimationFrame(gameLoopInterval = setInterval(gameLoop, 1000 / 60));
			updateInterval = setInterval(update, 1000 / 60);
		}

function playAgain() {
			gameOverDisplay.style.display = 'none';
			player.health = 100;
			player.score = 0;
			player.x = 0;
			player.y = 0;
			monsters.length = 0;
			playerProjectiles.length = 0;
			startGame();
		}

loadAssets();

startGameButton.addEventListener('click', startGame);
		playAgainButton.addEventListener('click', playAgain);
	</script>
</body>

</html>