AI game creator

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

No:4129

1748

←

Prev Next

→

meal
Developer sayaensm｜Date and time 23/6/27 12:43:34
Build time 35.824 sec｜Game capacity 3.378KB｜

Script

わかりました。以下はJavaScriptを含む1枚のhtmlファイルで実装した簡単なゲームです。主人公のキャラクターを操作して、コインを集めながらゴールにたどり着くゲームです。スマホでも遊べるように設計してあり、絵文字も使っています。

😎

🏁

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Coin Collecting Game</title>
	<style>
		body {
			background-color: #00bfff;
			margin: 0;
			padding: 0;
			overflow: hidden;
			font-size: 30px;
			text-align: center;
			font-weight: bold;
		}
		#player {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: yellow;
			border-radius: 50%;
			font-size: 20px;
			line-height: 50px;
			text-align: center;
		}
		.coin {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #ffd700;
			border-radius: 50%;
		}
		#goal {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: green;
			border-radius: 50%;
		}
		p {
			position: absolute;
			top: 0;
			right: 0;
			margin: 10px;
			font-size: 20px;
			font-weight: normal;
		}
	</style>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
	<div id="player">😎</div>
	<div id="goal">🏁</div>
	<p>Score: <span id="score">0</span></p>
	<script>
		var player = document.getElementById("player");
		var goal = document.getElementById("goal");
		var score = document.getElementById("score");
		var coins = [];
		var scoreVal = 0;

// generate random number between min and max (inclusive)
		function randomNum(min, max) {
			return Math.floor(Math.random() * (max - min + 1) ) + min;
		}

// generate coins in random positions
		function generateCoins(num) {
			for(var i = 0; i < num; i++) {
				var coin = document.createElement("div");
				coin.className = "coin";
				coin.style.top = randomNum(100, window.innerHeight - 100) + "px";
				coin.style.left = randomNum(100, window.innerWidth - 100) + "px";
				document.body.appendChild(coin);
				coins.push(coin);
			}
		}

// update score and remove coin when player collects it
		function collectCoin(index) {
			scoreVal++;
			score.textContent = scoreVal;
			coins[index].remove();
			coins.splice(index, 1);
		}

// check if player has reached goal
		function checkGoal() {
			var playerRect = player.getBoundingClientRect();
			var goalRect = goal.getBoundingClientRect();
			return playerRect.left < goalRect.right && playerRect.right > goalRect.left
				&& playerRect.top < goalRect.bottom && playerRect.bottom > goalRect.top;
		}

// move player with touch drag
		document.body.addEventListener("touchmove", function(event) {
			event.preventDefault();
			var touch = event.targetTouches[0];
			player.style.top = touch.pageY - 25 + "px";
			player.style.left = touch.pageX - 25 + "px";
			// check for coin collection
			for(var i = 0; i < coins.length; i++) {
				var coinRect = coins[i].getBoundingClientRect();
				if(player.style.top < coinRect.bottom && player.style.bottom > coinRect.top
					&& player.style.left < coinRect.right && player.style.right > coinRect.left) {
					collectCoin(i);
				}
			}
			// check for goal reached
			if(checkGoal()) {
				alert("You win! Score: " + scoreVal);
				location.reload();
			}
		});

// start the game
		generateCoins(10);
	</script>
</body>
</html>