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

No:4026

883

←

Prev Next

→

I dont want to go to work.
Developer もちきなこ｜Date and time 23/6/27 2:19:16
Build time 38.03 sec｜Game capacity 3.209KB｜

Script

了解しました。以下は私が作ったゲームの例です。【スマホ用ゲーム「タッチゴール」】 ※本当に実際に遊べるゲームとして実装しています。

タッチゴール

目標はゴールをできるだけ多くタッチすること！

現在のスコア: 0点

残り時間: 15秒

このゲームは、「タッチゴール」という名前で、画面に表示される9つのボックスのうち、1つだけが「goal」として設定されており、それを指でタッチすることでスコアが加算されます。ただし、残りの8つは「other」として設定されており、これをタッチした場合にはスコアが減算されます。プレイ時間は15秒で、時間が経過すると自動的に終了します。スマホの画面に最適化されており、ボタンをタップすることでゲームを開始できます。

←

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">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>タッチゴール</title>
		<style>
			body {font-size: 3em; text-align: center;}
			.box {display: inline-block; width: 2em; height: 2em; margin: 0.5em;}
			.goal {background-color: gold; border-radius: 50%;}
			.other {background-color: gray;}
		</style>
		<script>
			let score = 0;
			let timeLeft = 15;
			let timer = null;
			
			function start() {
				document.getElementById("message").textContent = "";
				document.getElementById("score").textContent = score;
				document.getElementById("timeLeft").textContent = timeLeft;
				timer = setInterval(countDown, 1000);
			}
			
			function countDown() {
				timeLeft--;
				document.getElementById("timeLeft").textContent = timeLeft;
				if (timeLeft === 0) {
					clearInterval(timer);
					document.getElementById("message").textContent = "終了！今回のスコアは" + score + "点でした。";
				}
			}
			
			function touch(box) {
				if(box.classList.contains("goal")) {
					score++;
					document.getElementById("score").textContent = score;
				} else {
					score--;
					document.getElementById("score").textContent = score;
				}
				change(box);
			}
			
			function change(box) {
				if(Math.random() < 0.5) {
					box.classList.remove("goal");
					box.classList.add("other");
				} else {
					box.classList.remove("other");
					box.classList.add("goal");
				}
			}
			
			window.addEventListener("load", function() {
				let boxes = document.getElementsByClassName("box");
				for(let i = 0; i < boxes.length; i++) {
					boxes[i].addEventListener("click", function() {
						touch(boxes[i]);
					});
					change(boxes[i]);
				}
			});
		</script>
	</head>
	<body>
		<h1>タッチゴール</h1>
		<h2>目標はゴールをできるだけ多くタッチすること！</h2>
		<p>現在のスコア: <span id="score">0</span>点</p>
		<p>残り時間: <span id="timeLeft">15</span>秒</p>
		<div id="message"></div>
		<div>
			<div class="box goal"></div>
			<div class="box other"></div>
			<div class="box other"></div>
			<div class="box other"></div>
			<div class="box other"></div>
			<div class="box other"></div>
			<div class="box other"></div>
			<div class="box other"></div>
			<div class="box other"></div>
		</div>
		<button onclick="start()">スタート！</button>
	</body>
</html>