A game where kirby must pass through a realm made of slimes and slime monsters and can absorb the slime monsters and transform into slime kirby.'s game

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

No:1295

382

←

Prev Next

→

A game where kirby must pass through a realm made ..ALL
Developer User3280｜Date and time 23/6/18 10:02:39
Build time 30.153 sec｜Game capacity 2.812KB｜

Script

←

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>Slime Kirby</title>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			background-color: #a6d9f5;
			text-align: center;
		}
		canvas {
			display: block;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="480" height="320"></canvas>
	<script type="text/javascript">
		// variable declaration
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var kirby = {
			x: 30,
			y: canvas.height/2 - 30,
			width: 60,
			height: 60,
			move: function(dx, dy) {
				this.x += dx;
				this.y += dy;
				if (this.x < 0) {
					this.x = 0;
				} else if (this.x > canvas.width - this.width) {
					this.x = canvas.width - this.width;
				}
				if (this.y < 0) {
					this.y = 0;
				} else if (this.y > canvas.height - this.height) {
					this.y = canvas.height - this.height;
				}
			}
		};
		var slime = {
			x: canvas.width,
			y: Math.random() * canvas.height,
			width: 60,
			height: 60,
			speed: 2,
			move: function() {
				this.x -= this.speed;
				if (this.x < -this.width) {
					this.x = canvas.width;
					this.y = Math.random() * canvas.height;
				}
			}
		};
		var score = 0;
		var font = "40px Arial";

// game loop
		function loop() {
			// clear canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// draw kirby
			ctx.fillStyle = "#f00";
			ctx.fillRect(kirby.x, kirby.y, kirby.width, kirby.height);
			
			// draw slime
			ctx.fillStyle = "#0f0";
			ctx.fillRect(slime.x, slime.y, slime.width, slime.height);

// move kirby
			if (isTouching("ArrowLeft")) {
				kirby.move(-5, 0);
			}
			if (isTouching("ArrowRight")) {
				kirby.move(5, 0);
			}
			if (isTouching("ArrowUp")) {
				kirby.move(0, -5);
			}
			if (isTouching("ArrowDown")) {
				kirby.move(0, 5);
			}

// check collision
			if (isColliding(kirby, slime)) {
				score++;
				slime.x = canvas.width;
				slime.y = Math.random() * canvas.height;
			}

// move slime
			slime.move();

// draw score
			ctx.font = font;
			ctx.fillStyle = "#fff";
			ctx.fillText("Score: " + score, canvas.width/2, 50);

// continue game loop
			requestAnimationFrame(loop);
		}

// key event listeners
		document.addEventListener("keydown", function(event) {
			if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
				event.preventDefault();
			}
		});
		function isTouching(key) {
			return (event.key === key);
		}

// collision detection
		function isColliding(kirby, slime) {
			return (kirby.x < slime.x + slime.width && kirby.x + kirby.width > slime.x && kirby.y < slime.y + slime.height && kirby.y + kirby.height > slime.y);
		}

// start game
		requestAnimationFrame(loop);
	</script>
</body>
</html>