A game in which 🐻 follows 🐯.'s game

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

No:1271

132

←

Prev Next

→

A game in which 🐻 follows 🐯.
Developer User3292｜Date and time 23/6/18 9:34:38
Build time 34.939 sec｜Game capacity 2.785KB｜

Script

このゲームは、🐻が🐯を追いかけるゲームです。🐻はキーボードで移動し、🐯はランダムに移動します。🐻が🐯に衝突するとゲームオーバーになります。スマホでも操作可能で、絵文字を多用しています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>🐻🐯 Chase Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		canvas {
			width: 100%;
			height: 100%;
			background-color: white;
			display: block;
			image-rendering: pixelated;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

const bear = {
			x: canvas.width / 2 - 25,
			y: canvas.height / 2 - 25,
			width: 50,
			height: 50,
			speed: 5,
			direction: null,
			image: '🐻'
		};

const tiger = {
			x: Math.random() * (canvas.width - 50),
			y: Math.random() * (canvas.height - 50),
			width: 50,
			height: 50,
			speed: 5,
			direction: null,
			image: '🐯'
		};

let isGameOver = false;

function draw() {
			if (!isGameOver) {
				// clear canvas
				ctx.clearRect(0, 0, canvas.width, canvas.height);

// draw bears and tigers
				ctx.fillText(bear.image, bear.x, bear.y);
				ctx.fillText(tiger.image, tiger.x, tiger.y);

// move bear and tiger
				if (bear.direction === 'up') {
					bear.y -= bear.speed;
				} else if (bear.direction === 'down') {
					bear.y += bear.speed;
				} else if (bear.direction === 'left') {
					bear.x -= bear.speed;
				} else if (bear.direction === 'right') {
					bear.x += bear.speed;
				}

if (tiger.direction === 'up') {
					tiger.y -= tiger.speed;
				} else if (tiger.direction === 'down') {
					tiger.y += tiger.speed;
				} else if (tiger.direction === 'left') {
					tiger.x -= tiger.speed;
				} else if (tiger.direction === 'right') {
					tiger.x += tiger.speed;
				}

// check collision
				if (bear.x < tiger.x + tiger.width &&
					bear.x + bear.width > tiger.x &&
					bear.y < tiger.y + tiger.height &&
					bear.y + bear.height > tiger.y) {
					isGameOver = true;
					alert('Game Over!');
				}

// request animation frame
				window.requestAnimationFrame(draw);
			}
		}

// control bear with keyboard
		document.addEventListener('keydown', event => {
			if (event.key === 'ArrowUp') {
				bear.direction = 'up';
			} else if (event.key === 'ArrowDown') {
				bear.direction = 'down';
			} else if (event.key === 'ArrowLeft') {
				bear.direction = 'left';
			} else if (event.key === 'ArrowRight') {
				bear.direction = 'right';
			}
		});

// start game
		draw();
	</script>
</body>
</html>