A game in which 🐯 runs away 👨 and when caught, ♥ comes out.'s game

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

No:1413

101

←

Prev Next

→

A game in which 🐯 runs away 👨 and when caught, ♥ c..ALL
Developer User3292｜Date and time 23/6/18 15:04:40
Build time 29.403 sec｜Game capacity 3.933KB｜

Script

このゲームは、プレイヤーが👨を操作して、🐯を追いかけながら💕を集めることが目的です。🐯がプレイヤーに近づくにつれて、より速く移動します。🐯に接触するとゲームオーバーです。💕に接触すると、スコアが1点加算されます。また、👨はキーボードの矢印キーで移動できます。このゲームは、スマートフォンでもプレイできるように最適化されており、絵文字を多く使用しています。

←

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>Tiger Chase Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #caffbf;
			font-size: 2rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<p id="score">0</p>

// initialize game
		function init() {
			drawTiger();
			drawMan();
			spawnHeart();
			gameLoopInterval = setInterval(gameLoop, 50);
		}

// main game loop
		function gameLoop() {
			clearCanvas();
			moveMan();
			moveTiger();
			drawTiger();
			drawMan();
			drawHeart();

if (checkCollision(tiger, man)) {
				clearInterval(gameLoopInterval);
				ctx.font = "3rem Arial";
				ctx.fillText("♥", heart.x, heart.y);
			}

if (checkCollision(man, heart)) {
				score++;
				scoreEl.textContent = score;
				spawnHeart();
			}
		}

// clear canvas
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}

// draw tiger
		function drawTiger() {
			ctx.beginPath();
			ctx.arc(tiger.x, tiger.y, tiger.radius, 0, Math.PI * 2);
			ctx.fillStyle = "orange";
			ctx.fill();
			ctx.closePath();
		}

// draw man
		function drawMan() {
			ctx.fillStyle = "black";
			ctx.fillRect(man.x, man.y, man.width, man.height);
		}

// draw heart
		function drawHeart() {
			ctx.beginPath();
			ctx.arc(heart.x, heart.y, heart.radius, 0, Math.PI * 2);
			ctx.fillStyle = "red";
			ctx.fill();
			ctx.closePath();
		}

// move man
		function moveMan() {
			document.onkeydown = function(event) {
				if (event.code === "ArrowUp" && man.y > 0) {
					man.y -= man.speed;
				} else if (event.code === "ArrowDown" && man.y < canvas.height - man.height) {
					man.y += man.speed;
				} else if (event.code === "ArrowLeft" && man.x > 0) {
					man.x -= man.speed;
				} else if (event.code === "ArrowRight" && man.x < canvas.width - man.width) {
					man.x += man.speed;
				}
			};
		}

// move tiger
		function moveTiger() {
			let deltaX = man.x - tiger.x;
			let deltaY = man.y - tiger.y;
			let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

if (distance <= 400) {
				tiger.x += tiger.speed * deltaX / distance;
				tiger.y += tiger.speed * deltaY / distance;
			}
		}

// check collision between objects
		function checkCollision(obj1, obj2) {
			let distance = Math.sqrt(Math.pow(obj1.x - obj2.x, 2) + Math.pow(obj1.y - obj2.y, 2));

if (distance <= obj1.radius + obj2.radius || distance <= obj1.width + obj2.width && distance <= obj1.height + obj2.height) {
				return true;
			}

return false;
		}

// spawn heart at random location
		function spawnHeart() {
			heart.x = Math.floor(Math.random() * (canvas.width - heart.radius * 2) + heart.radius);
			heart.y = Math.floor(Math.random() * (canvas.height - heart.radius * 2) + heart.radius);
		}

// run game
		init();
	</script>
</body>
</html>