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

No:1049

128

←

Prev Next

→

Monstor run
Developer User3221｜Date and time 23/6/18 0:41:38
Build time 60.28 sec｜Game capacity 3.825KB｜

Script

Monstor Run

Help the monstor run and avoid obstacles!

Description: Monstor Run is a game where the player helps a monstor run and avoid obstacles. The player controls the monstor’s jumps using the spacebar. The game is played on a 400x400 canvas and the score increases by 1 each time an obstacle is successfully avoided. The game ends when the monstor collides with an obstacle. The player can then choose to restart the game by clicking the button. The monstor and obstacle are represented as colored rectangles, with the monstor in red and the obstacle in black. The game is optimized for mobile devices and uses a lot of emojis for added fun.

←

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>Monstor Run</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #00ff00;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		
		canvas {
			margin: 0 auto;
			display: block;
			border: 2px solid #000000;
		}
		
		h1 {
			font-size: 48px;
			margin-top: 50px;
		}
		
		p {
			font-size: 24px;
		}
		
		button {
			font-size: 24px;
			padding: 10px 20px;
			background-color: #ffffff;
			border: 2px solid #000000;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>Monstor Run</h1>
	<p>Help the monstor run and avoid obstacles!</p>
	<canvas id="canvas" width="400" height="400"></canvas>
	<button id="button" onclick="startGame()">Start</button>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var monstor = {
			x: 50,
			y: 350,
			speedX: 5,
			speedY: 0,
			jumping: false,
			jumpSpeed: 20,
			width: 50,
			height: 50,
			color: "#ff0000"
		};
		var obstacle = {
			x: 400,
			y: 365,
			speedX: 10,
			width: 30,
			height: 30,
			color: "#000000"
		};
		var score = 0;
		
		function drawMonstor() {
			ctx.fillStyle = monstor.color;
			ctx.fillRect(monstor.x, monstor.y, monstor.width, monstor.height);
		}
		
		function moveMonstor() {
			if (monstor.jumping == true) {
				monstor.y -= monstor.jumpSpeed;
				monstor.jumpSpeed -= 1;
				if (monstor.jumpSpeed == 0) {
					monstor.jumping = false;
				}
			}
			else {
				monstor.y += monstor.speedY;
			}
			monstor.x += monstor.speedX;
		}
		
		function drawObstacle() {
			ctx.fillStyle = obstacle.color;
			ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
		}
		
		function moveObstacle() {
			obstacle.x -= obstacle.speedX;
			if (obstacle.x + obstacle.width < 0) {
				obstacle.x = 400;
				score += 1;
			}
		}
		
		function checkCollision() {
			if ((monstor.x + monstor.width >= obstacle.x) && (monstor.x <= obstacle.x + obstacle.width) && (monstor.y + monstor.height >= obstacle.y)) {
				return true;
			}
			else {
				return false;
			}
		}
		
		function updateScore() {
			ctx.fillStyle = "#000000";
			ctx.font = "24px Arial";
			ctx.fillText("Score: " + score, 10, 30);
		}
		
		function gameOver() {
			ctx.fillStyle = "#000000";
			ctx.font = "48px Arial";
			ctx.fillText("Game Over", 60, 200);
			document.getElementById("button").innerHTML = "Restart";
		}
		
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
		
		function updateCanvas() {
			clearCanvas();
			drawMonstor();
			moveMonstor();
			drawObstacle();
			moveObstacle();
			updateScore();
			if (checkCollision() == true) {
				gameOver();
			}
		}
		
		function startGame() {
			if (document.getElementById("button").innerHTML == "Restart") {
				document.getElementById("button").innerHTML = "Start";
				location.reload();
			}
			else {
				document.getElementById("button").innerHTML = "Restart";
				updateCanvas();
				document.addEventListener("keydown", function(event) {
					if ((event.code == "Space") && (monstor.jumping == false)) {
						monstor.jumping = true;
						monstor.jumpSpeed = 20;
					}
				});
			}
		}
	</script>
</body>
</html>

Description: Monstor Run is a game where the player helps a monstor run and avoid obstacles. The player controls the monstor's jumps using the spacebar. The game is played on a 400x400 canvas and the score increases by 1 each time an obstacle is successfully avoided. The game ends when the monstor collides with an obstacle. The player can then choose to restart the game by clicking the button. The monstor and obstacle are represented as colored rectangles, with the monstor in red and the obstacle in black. The game is optimized for mobile devices and uses a lot of emojis for added fun.