AI game creator

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

No:3377

1494

←

Prev Next

→

system
Developer User3655｜Date and time 23/6/24 18:23:25
Build time 34.283 sec｜Game capacity 3.416KB｜

Script

ticなアプリではなく、楽しめるものを作ってください！

このアプリは「ボールをクリックしてスコアを稼ごう！」というシンプルなゲームです。スタートボタンを押すと、ボールがランダムな場所からジャンプして移動し始めます。プレイヤーはボールをクリックしてスコアを稼いでいきます。ボールは画面端に到達すると、またランダムな場所から出現し、移動を続けます。リセットボタンを押すと、スコアがリセットされ、ゲームが再度スタートするようになっています。このアプリは、スマホでも遊びやすいように作られています。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

ticなアプリではなく、楽しめるものを作ってください！

<!DOCTYPE html>
<html>
<head>
	<title>ミニゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #89bdff;
		}
		#game {
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		#startBtn, #resetBtn {
			font-size: 30px;
			padding: 10px 20px;
			background-color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin: 10px;
		}
		#score {
			font-size: 50px;
			color: #fff;
			margin: 30px;
		}
		.ball {
			border-radius: 50%;
			width: 50px;
			height: 50px;
			background-color: #ffeb3b;
			position: absolute;
			left: -50px;
			top: -50px;
			animation: move 3s infinite;
		}
		@keyframes move {
			0% {
				left: -50px;
				top: -50px;
			}
			25% {
				left: calc(100vw - 100px);
			}
			50% {
				top: calc(100vh - 100px);
			}
			75% {
				left: 0;
			}
			100% {
				top: 0;
			}
		}
	</style>
</head>
<body>
	<div id="game">
		<button id="startBtn">スタート</button>
		<div id="score">0</div>
	</div>

document.getElementById("startBtn").addEventListener("click", startGame);
		document.getElementById("resetBtn").addEventListener("click", resetGame);

function startGame() {
			if (!isPlaying) {
				isPlaying = true;
				document.getElementById("startBtn").style.display = "none";
				document.getElementById("score").style.display = "block";
				document.getElementById("game").appendChild(createBall());
				document.addEventListener("click", updateScore);
			}
		}

function resetGame() {
			if (isPlaying) {
				isPlaying = false;
				score = 0;
				document.getElementById("score").innerText = score;
				document.getElementById("score").style.display = "none";
				document.getElementById("startBtn").style.display = "block";
				document.querySelectorAll(".ball").forEach(ball => ball.remove());
				document.removeEventListener("click", updateScore);
			}
		}

function updateScore(event) {
			if (event.target.classList.contains("ball")) {
				score++;
				document.getElementById("score").innerText = score;
				event.target.remove();
				document.getElementById("game").appendChild(createBall());
			}
		}

function createBall() {
			const ball = document.createElement("div");
			ball.classList.add("ball");
			ball.style.left = Math.floor(Math.random() * (window.innerWidth - 50)) + "px";
			ball.style.top = Math.floor(Math.random() * (window.innerHeight - 50)) + "px";
			return ball;
		}
	</script>
</body>
</html>