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

No:1871

829

←

Prev Next

→

Game with a cat and a dog chasing each other
Developer User3426｜Date and time 23/6/19 10:25:57
Build time 37.382 sec｜Game capacity 3.021KB｜

Script

Cats and dogs chasing each other

Brief description: The player can be either a cat or a dog. When the game start button is pressed、A cat and a dog run from the left and right and start chasing each other. When the cat reaches the far right, the cat wins.、When the dog reaches the left edge, the dog wins. If you want to play again, click、Press the Start button.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>猫と犬の追いかけっこ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		html, body {
			margin: 0;
			padding: 0;
			background-color: #ffcc66;
			font-size: 24pt;
			text-align: center;
		}
		
		#startButton {
			background-color: #66ccff;
			color: #ffffff;
			font-size: 18pt;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
		}
		
		#gameArea {
			position: relative;
			height: 400px;
			margin-top: 20px;
		}
		
		#cat {
			position: absolute;
			left: 0;
			top: 0;
			width: 100px;
			height: 100px;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/118/cat-face_1f431.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
		}
		
		#dog {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100px;
			height: 100px;
			background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/118/dog-face_1f436.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
		}
	</style>
	<script>
		var cat = document.getElementById('cat');
		var dog = document.getElementById('dog');
		var gameArea = document.getElementById('gameArea');
		var gameStarted = false;
		
		document.getElementById('startButton').addEventListener('click', function() {
			gameStarted = true;
			document.getElementById('startButton').style.display = 'none';
			moveCat();
			moveDog();
		});
		
		function moveCat() {
			if (!gameStarted) return;
			cat.style.left = parseInt(cat.style.left) + 2 + 'px';
			if (parseInt(cat.style.left) > gameArea.offsetWidth - cat.offsetWidth) {
				alert('猫の勝ち！');
				gameStarted = false;
				document.getElementById('startButton').style.display = 'block';
				cat.style.left = '0';
				dog.style.right = '0';
			} else {
				setTimeout(moveCat, 10);
			}
		}
		
		function moveDog() {
			if (!gameStarted) return;
			dog.style.right = parseInt(dog.style.right) + 2 + 'px';
			if (parseInt(dog.style.right) > gameArea.offsetWidth - dog.offsetWidth) {
				alert('犬の勝ち！');
				gameStarted = false;
				document.getElementById('startButton').style.display = 'block';
				cat.style.left = '0';
				dog.style.right = '0';
			} else {
				setTimeout(moveDog, 10);
			}
		}
	</script>
</head>
<body>
	<h1>猫と犬の追いかけっこ</h1>
	<button id="startButton">スタート</button>
	<div id="gameArea">
		<div id="cat"></div>
		<div id="dog"></div>
	</div>
</body>
</html>

簡単な説明：プレイヤーは猫と犬のどちらかになります。ゲームスタートボタンを押すと、猫と犬が左右から走ってきて追いかけっこを始めます。猫が右端に到達すると猫の勝ち、犬が左端に到達すると犬の勝ちとなります。再度プレイしたい場合は、スタートボタンを押してください。