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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:1295

386

←

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]現在の売れ筋Kindle本ランキング

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>