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

No:1231

157

←

Prev Next

→

A game where mario and sonic cooperate to use a pr..ALL
Developer User3280｜Date and time 23/6/18 8:57:58
Build time 85.69 sec｜Game capacity 7.138KB｜

Script

Mario y Sonic vs. el Monstruo Oscuro

Usa las flechas del teclado para moverte y la barra espaciadora para lanzar la pokeball.

←

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>Mario y Sonic vs. el Monstruo Oscuro</title>
		<style>
			canvas {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<div style="text-align: center;">
			<h1>Mario y Sonic vs. el Monstruo Oscuro</h1>
			<canvas id="canvas" width="400" height="300"></canvas>
			<p>Usa las flechas del teclado para moverte y la barra espaciadora para lanzar la pokeball.</p>
		</div>
		
		<script>
			// Constants
			const canvas = document.getElementById("canvas");
			const ctx = canvas.getContext("2d");
			const marioImage = new Image();
			marioImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/mario_1f3ae.png";
			const sonicImage = new Image();
			sonicImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/sonic-the-hedgehog_1f9df.png";
			const pokeballImage = new Image();
			pokeballImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/pokeball_1f4e6.png";
			const waterMonsterImage = new Image();
			waterMonsterImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/water-wave_1f30a.png";
			const fireMonsterImage = new Image();
			fireMonsterImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/fire_1f525.png";
			const earthMonsterImage = new Image();
			earthMonsterImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/earth-globe-americas_1f30e.png";
			const darkMonsterImage = new Image();
			darkMonsterImage.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/281/black-large-square_2b1b.png";
			
			// Game variables
			let mario = { x: 0, y: canvas.height / 2, speed: 5 };
			let sonic = { x: canvas.width - 53, y: canvas.height / 2, speed: 5 };
			let pokeball = { x: 0, y: 0, speed: 10, thrown: false };
			let waterMonster = { x: 0, y: 0, speed: 3, captured: false };
			let fireMonster = { x: canvas.width / 2, y: 0, speed: 4, captured: false };
			let earthMonster = { x: 0, y: canvas.height / 2, speed: 6, captured: false };
			let darkMonsters = [];
			for (let i = 0; i < 10; i++) {
				darkMonsters.push({ x: canvas.width - 25, y: Math.floor(Math.random() * (canvas.height - 25)), speed: Math.floor(Math.random() * 2) + 1 });
			}
			
			// Functions
			function draw() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				
				// Draw Mario, Sonic, and pokeball
				ctx.drawImage(marioImage, mario.x, mario.y, 50, 50);
				ctx.drawImage(sonicImage, sonic.x, sonic.y, 50, 50);
				if (pokeball.thrown) {
					ctx.drawImage(pokeballImage, pokeball.x, pokeball.y, 25, 25);
				}
				
				// Draw monsters
				if (!waterMonster.captured) {
					ctx.drawImage(waterMonsterImage, waterMonster.x, waterMonster.y, 25, 25);
				}
				if (!fireMonster.captured) {
					ctx.drawImage(fireMonsterImage, fireMonster.x, fireMonster.y, 25, 25);
				}
				if (!earthMonster.captured) {
					ctx.drawImage(earthMonsterImage, earthMonster.x, earthMonster.y, 25, 25);
				}
				for (let i = 0; i < darkMonsters.length; i++) {
					ctx.drawImage(darkMonsterImage, darkMonsters[i].x, darkMonsters[i].y, 25, 25);
				}
			}
			
			function update() {
				// Move Mario and Sonic
				if (mario.x + mario.speed > 0 && mario.x + mario.speed < canvas.width / 2 - 50) {
					mario.x += mario.speed;
				}
				if (sonic.x - sonic.speed > canvas.width / 2 && sonic.x - sonic.speed < canvas.width - 50) {
					sonic.x -= sonic.speed;
				}
				
				// Move pokeball if thrown
				if (pokeball.thrown) {
					pokeball.x += pokeball.speed;
					
					// Check for capture
					if (!waterMonster.captured && pokeball.x + 25 >= waterMonster.x && pokeball.x <= waterMonster.x + 25 && pokeball.y + 25 >= waterMonster.y && pokeball.y <= waterMonster.y + 25) {
						waterMonster.captured = true;
						pokeball.thrown = false;
					}
					else if (!fireMonster.captured && pokeball.x + 25 >= fireMonster.x && pokeball.x <= fireMonster.x + 25 && pokeball.y + 25 >= fireMonster.y && pokeball.y <= fireMonster.y + 25) {
						fireMonster.captured = true;
						pokeball.thrown = false;
					}
					else if (!earthMonster.captured && pokeball.x + 25 >= earthMonster.x && pokeball.x <= earthMonster.x + 25 && pokeball.y + 25 >= earthMonster.y && pokeball.y <= earthMonster.y + 25) {
						earthMonster.captured = true;
						pokeball.thrown = false;
					}
					else if (pokeball.x + 25 >= canvas.width - 25) {
						pokeball.thrown = false;
					}
				}
				
				// Move monsters
				if (!waterMonster.captured) {
					if (waterMonster.y + waterMonster.speed > canvas.height - 25 || waterMonster.y + waterMonster.speed < 0) {
						waterMonster.speed *= -1;
					}
					waterMonster.y += waterMonster.speed;
				}
				if (!fireMonster.captured) {
					if (fireMonster.x + fireMonster.speed > canvas.width - 25 || fireMonster.x + fireMonster.speed < canvas.width / 2) {
						fireMonster.speed *= -1;
					}
					fireMonster.x += fireMonster.speed;
				}
				if (!earthMonster.captured) {
					if (earthMonster.y + earthMonster.speed > canvas.height - 25 || earthMonster.y + earthMonster.speed < canvas.height / 2) {
						earthMonster.speed *= -1;
					}
					earthMonster.y += earthMonster.speed;
				}
				for (let i = 0; i < darkMonsters.length; i++) {
					if (darkMonsters[i].y + darkMonsters[i].speed > canvas.height - 25 || darkMonsters[i].y + darkMonsters[i].speed < 0) {
						darkMonsters[i].speed *= -1;
					}
					darkMonsters[i].y += darkMonsters[i].speed;
					
					// Check for collision with Mario or Sonic
					if (mario.x + 50 >= darkMonsters[i].x && mario.x <= darkMonsters[i].x + 25 && mario.y + 50 >= darkMonsters[i].y && mario.y <= darkMonsters[i].y + 25) {
						alert("¡Un monstruo oscuro te ha atrapado! Game Over.");
						document.location.reload();
					}
					if (sonic.x + 50 >= darkMonsters[i].x && sonic.x <= darkMonsters[i].x + 25 && sonic.y + 50 >= darkMonsters[i].y && sonic.y <= darkMonsters[i].y + 25) {
						alert("¡Un monstruo oscuro te ha atrapado! Game Over.");
						document.location.reload();
					}
				}
			}
			
			function keyDownHandler(event) {
				if (event.keyCode == 32 && !pokeball.thrown) { // Space bar
					pokeball.x = mario.x + 25;
					pokeball.y = mario.y;
					pokeball.thrown = true;
				}
				else if (event.keyCode == 38) { // Up arrow
					if (mario.y - mario.speed > 0) {
						mario.y -= mario.speed;
					}
				}
				else if (event.keyCode == 40) { // Down arrow
					if (mario.y + mario.speed < canvas.height - 50) {
						mario.y += mario.speed;
					}
				}
				else if (event.keyCode == 37) { // Left arrow
					if (mario.x - mario.speed > 0) {
						mario.x -= mario.speed;
					}
				}
				else if (event.keyCode == 39) { // Right arrow
					if (mario.x + mario.speed < canvas.width / 2 - 50) {
						mario.x += mario.speed;
					}
				}
			}
			
			setInterval(function() {
				draw();
				update();
			}, 20);
			
			document.addEventListener("keydown", keyDownHandler, false);
		</script>
	</body>
</html>