A survival game with monsters where the main character at the beginning of the game gets a tool that can fuse tools with a tool and monsters and a monster and a monster with a tool with pixel graphics and the final boss is the fusion golem and the name of the game is maxiwars.'s game

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

No:2671

4668

←

Prev Next

→

A survival game with monsters where the main chara..ALL
Developer User3408｜Date and time 23/6/22 8:49:50
Build time 82.285 sec｜Game capacity 7.47KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>maxiwars - juego de supervivencia con monstruos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		font-family: Arial, sans-serif;
		background-color: #333;
		color: white;
		margin: 0;
		padding: 0;
	}
	canvas {
		display: block;
		margin: auto;
		background-color: black;
	}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// variables globales
		var canvas, ctx, width, height;
		var player, tools, monsters;
		var maxTools = 20, maxMonsters = 10;
		var golem;
		var mouseX, mouseY;
		var score = 0;
		var gameover = false;

// clase base de objeto en el juego
		class Entity {
			constructor(x, y, w, h, img) {
				this.x = x;
				this.y = y;
				this.width = w;
				this.height = h;
				this.image = img;
				this.dead = false;
			}

update() {
				// por defecto, no hace nada
			}

draw() {
				ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
			}

collides(other) {
				return (
					this.x + this.width > other.x &&
					this.y + this.height > other.y &&
					other.x + other.width > this.x &&
					other.y + other.height > this.y
				);
			}

die() {
				this.dead = true;
			}
		}

// clase de herramienta
		class Tool extends Entity {
			constructor(x, y, img) {
				super(x, y, 32, 32, img);
				this.name = "";
			}

update() {
				// mueve la herramienta hacia el cursor
				this.x += (mouseX - (this.x + this.width / 2)) / 10;
				this.y += (mouseY - (this.y + this.height / 2)) / 10;
				// se sale del canvas?
				if (this.x < 0) this.x = 0;
				if (this.x + this.width > width) this.x = width - this.width;
				if (this.y < 0) this.y = 0;
				if (this.y + this.height > height) this.y = height - this.height;
			}
		}

// clase de monstruo
		class Monster extends Entity {
			constructor(x, y, img) {
				super(x, y, 32, 32, img);
				this.speedX = Math.random() * 3 - 1.5;
				this.speedY = Math.random() * 3 - 1.5;
			}

update() {
				// mueve el monstruo aleatoriamente
				this.x += this.speedX;
				this.y += this.speedY;
				// se sale del canvas?
				if (this.x < 0) {
					this.x = 0;
					this.speedX *= -1;
				}
				if (this.x + this.width > width) {
					this.x = width - this.width;
					this.speedX *= -1;
				}
				if (this.y < 0) {
					this.y = 0;
					this.speedY *= -1;
				}
				if (this.y + this.height > height) {
					this.y = height - this.height;
					this.speedY *= -1;
				}
			}
		}

// inicializa el juego
		function init() {
			canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
			width = canvas.width = window.innerWidth - 32;
			height = canvas.height = window.innerHeight - 32;

// carga las imágenes
			playerImg = new Image();
			playerImg.src = "img/player.png";
			toolImg = new Image();
			toolImg.src = "img/tool.png";
			monsterImg = new Image();
			monsterImg.src = "img/monster.png";
			golemImg = new Image();
			golemImg.src = "img/golem.png";

// crea el jugador
			player = new Tool(width / 2 - 16, height / 2 - 16, playerImg);

// crea las herramientas y monstruos
			tools = [];
			for (var i = 0; i < maxTools; i++) {
				tools.push(new Tool(
					Math.random() * (width - 32),
					Math.random() * (height - 32),
					toolImg
				));
			}
			monsters = [];
			for (var i = 0; i < maxMonsters; i++) {
				monsters.push(new Monster(
					Math.random() * (width - 32),
					Math.random() * (height - 32),
					monsterImg
				));
			}

// crea el jefe final
			golem = new Entity(
				width / 2 - 64,
				height / 2 - 64,
				128, 128,
				golemImg
			);

// eventos de ratón
			canvas.addEventListener("mousemove", function(event) {
				mouseX = event.clientX - canvas.offsetLeft;
				mouseY = event.clientY - canvas.offsetTop;
			});
			canvas.addEventListener("mousedown", function(event) {
				// fusiona las herramientas y monstruos si colisionan
				for (var i = 0; i < tools.length; i++) {
					if (tools[i].collides(player)) {
						for (var j = 0; j < monsters.length; j++) {
							if (monsters[j].collides(tools[i])) {
								// fusiona herramienta y monstruo
								tools.splice(i, 1);
								monsters.splice(j, 1);
								if (tools.length + monsters.length < maxTools + maxMonsters) {
									if (Math.random() < 0.5) {
										tools.push(new Tool(
											Math.random() * (width - 32),
											Math.random() * (height - 32),
											toolImg
										));
									} else {
										monsters.push(new Monster(
											Math.random() * (width - 32),
											Math.random() * (height - 32),
											monsterImg
										));
									}
								}
								break;
							}
						}
						break;
					}
				}
				// fusiona dos monstruos si colisionan
				for (var i = 0; i < monsters.length; i++) {
					if (monsters[i].collides(player)) {
						for (var j = i + 1; j < monsters.length; j++) {
							if (monsters[j].collides(player)) {
								// fusiona dos monstruos
								monsters.splice(i, 1);
								if (j > i) j--;
								monsters.splice(j, 1);
								if (monsters.length < maxMonsters) {
									monsters.push(new Monster(
										Math.random() * (width - 32),
										Math.random() * (height - 32),
										monsterImg
									));
								}
								break;
							}
						}
						break;
					}
				}
			});

// bucle principal del juego
			setInterval(function() {
				if (!gameover) {
					update();
					draw();
				}
			}, 1000 / 60);
		}

// actualiza el juego
		function update() {
			// actualiza el jugador
			player.update();

// actualiza las herramientas y monstruos
			for (var i = 0; i < tools.length; i++) {
				tools[i].update();
			}
			for (var i = 0; i < monsters.length; i++) {
				monsters[i].update();
			}

// verifica si el jugador choca con un monstruo
			for (var i = 0; i < monsters.length; i++) {
				if (player.collides(monsters[i])) {
					gameover = true;
				}
			}

// verifica si el jugador choca con el golem
			if (!golem.dead && player.collides(golem)) {
				gameover = true;
			}

// verifica si ha llegado la hora del jefe final
			if (tools.length + monsters.length == 0 && !golem.dead) {
				alert("Ha llegado el jefe final: ¡el fusion golem!");
				golem.dead = true;
			}

// verifica si ha ganado el juego
			if (tools.length + monsters.length == 0 && golem.dead && !gameover) {
				alert("¡Felicitaciones! Ha ganado el juego con un puntaje de " + score + ".");
				gameover = true;
			}

// actualiza el puntaje
			score = maxTools - tools.length + maxMonsters - monsters.length;
		}

// dibuja el juego
		function draw() {
			// borra el canvas
			ctx.clearRect(0, 0, width, height);

// dibuja el jugador
			player.draw();

// dibuja las herramientas y monstruos
			for (var i = 0; i < tools.length; i++) {
				tools[i].draw();
			}
			for (var i = 0; i < monsters.length; i++) {
				monsters[i].draw();
			}

// dibuja el golem si está vivo
			if (!golem.dead) {
				golem.draw();
			}

// dibuja el puntaje
			ctx.fillText("Puntaje: " + score, 10, 20);

// dibuja la pantalla de game over si corresponde
			if (gameover) {
				ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
				ctx.fillRect(0, 0, width, height);
				ctx.fillStyle = "white";
				ctx.font = "bold 48px Arial, sans-serif";
				ctx.textAlign = "center";
				ctx.fillText("GAME OVER", width / 2, height / 2);
			}
		}

// inicializa el juego al cargar la página
		window.onload = init;
	</script>
</body>
</html>