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

No:937

135

←

Prev Next

→

Whack a Mole and Crocodile game
Developer User3198｜Date and time 23/6/17 22:51:07
Build time 48.007 sec｜Game capacity 3.945KB｜

Script

モグラとワニを叩くゲーム

得点: 0

このゲームは、30秒間でモグラとワニが出てくる穴を叩いて得点を稼ぐゲームです。モグラ：https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/mole_1f407.png ワニ：https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/crocodile_1f40a.png モグラが出現した場合は1点、ワニが出現した場合は-1点になります。30秒経過するか、ユーザーがAlertを閉じた場合にゲーム終了となり、スコアが表示されます。スマホでもプレイ可能で、可愛い絵文字も多用しています。

←

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>モグラとワニを叩くゲーム</title>
	<style>
		body {
			font-size: 2rem;
			text-align: center;
			background-color: lightblue;
		}

.gameBoard {
			display: inline-flex;
			flex-wrap: wrap;
			max-width: 75%;
			margin: 0 auto;
			justify-content: center;
			align-items: center;
			margin-top: 2rem;
		}

.hole {
			width: 5rem;
			height: 5rem;
			background-color: white;
			border-radius: 50%;
			margin: 1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transform: scale(0.7);
			transition: transform 0.2s;
		}

.hole:hover {
			transform: scale(0.8);
		}

.mole {
			width: 4rem;
			height: 4rem;
			background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/mole_1f407.png");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 50%;
		}

.crocodile {
			width: 4rem;
			height: 4rem;
			background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/crocodile_1f40a.png");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 50%;
		}

.scoreBoard {
			font-size: 2rem;
			margin-top: 2rem;
		}
	</style>
</head>
<body>
	<h1>モグラとワニを叩くゲーム</h1>
	<div class="gameBoard"></div>
	<div class="scoreBoard">得点: <span class="score">0</span></div>
	<script>
		let score = 0;
		const scoreBoard = document.querySelector('.score');
		const holes = document.querySelectorAll('.hole');
		const gameBoard = document.querySelector('.gameBoard');

function randomTime(min, max) {
			return Math.round(Math.random() * (max - min) + min);
		}

function randomHole(holes) {
			const idx = Math.floor(Math.random() * holes.length);
			const hole = holes[idx];
			if (hole.lastHole === idx) {
				return randomHole(holes);
			}
			hole.lastHole = idx;
			return hole;
		}

function peep() {
			const time = randomTime(500, 1000);
			const hole = randomHole(holes);
			let moleOrCrocodile;

if (Math.random() > 0.5) {
				moleOrCrocodile = document.createElement('div');
				moleOrCrocodile.classList.add('mole');
			} else {
				moleOrCrocodile = document.createElement('div');
				moleOrCrocodile.classList.add('crocodile');
			}
			hole.appendChild(moleOrCrocodile);

setTimeout(() => {
				hole.removeChild(moleOrCrocodile);
				if (!hole.classList.contains('clicked')) {
					peep();
				}
			}, time);
		}

function bonk(e) {
			if (!e.isTrusted) return; // cheater!
			score++;
			this.classList.remove('clicked');
			scoreBoard.textContent = score;
		}

holes.forEach(hole => hole.addEventListener('click', bonk));

モグラが出現した場合は1点、ワニが出現した場合は-1点になります。30秒経過するか、ユーザーがAlertを閉じた場合にゲーム終了となり、スコアが表示されます。スマホでもプレイ可能で、可愛い絵文字も多用しています。