AI game creator

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

No:1550

647

←

Prev Next

→

Kirin Smash
Developer sayaensm｜Date and time 23/6/18 18:27:57
Build time 17.605 sec｜Game capacity 1.49KB｜

Script

キリンスマッシュ

画面をタップしてキリンを倒せ！

上記は、JavaScriptを含むキリンスマッシュというゲームを1枚のHTMLファイルとして実装した例です。プレイヤーは、画面をタップしてキリンを倒すことが目的です。キリンの位置はランダムに変更されます。スコアはタップするたびに加算され、10の倍数になるたびにアラートが表示されます。絵文字を多用することで、プレイヤーに楽しいゲーム体験を提供しています。スマートフォンでも操作可能です。

←

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>キリンスマッシュ</title>
	<style>
		body {
			background-color: #1abc9c;
			text-align: center;
			font-size: 30px;
		}
		#kirin {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<div>キリンスマッシュ</div>
	<div>画面をタップしてキリンを倒せ！</div>
	<img id="kirin" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/giraffe_1f992.png" alt="キリン">
	<script>
		var kirinElem = document.getElementById('kirin');
		var score = 0;
		
		kirinElem.addEventListener('click', function() {
			score++;
			kirinElem.style.top = Math.floor(Math.random()*80) + '%';
			kirinElem.style.left = Math.floor(Math.random()*80) + '%';
			if (score % 10 === 0) {
				alert('スコアが' + score + 'になりました！');
			}
		});
	</script>
</body>
</html>