Just the main atmosphere of Grand Theft Auto.'s game | AI game creator

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

No:4449

2233

Just the main atmosphere of Grand Theft Auto.
Developer User1006｜Date and time 23/6/28 1:19:23
Build time 46.807 sec｜Game capacity 4.122KB｜

では、グランドセフトオートの雰囲気を取り入れたゲームを作ってみます。タイトル：スマホ泥棒ゲームの概要：プレイヤーはスマホ泥棒となり、市内の家を狙ってスマホを盗みます。ステージには見張りがいるので、敵に見つからないようにスマホを手に入れましょう。スマホを手に入れることで得点が加算され、制限時間内にどれだけ高得点を取れるかを目指します。実際のプログラム：

0

解説： JavaScriptでゲームの処理を実装しています。HTML/CSSで画面を構築し、JavaScriptで画面操作やゲームロジックを実装しています。盗み出すスマホは絵文字を使って表示しています。ターゲットやプレイヤーを移動させるために、JavaScriptで位置情報を操作しています。ゲーム開始時やゲームオーバー時にアラートダイアログを表示しています。ゲームのスコアは画面左下に表示されます。

→ 　

2　

1　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

では、グランドセフトオートの雰囲気を取り入れたゲームを作ってみます。

タイトル：スマホ泥棒

ゲームの概要：
プレイヤーはスマホ泥棒となり、市内の家を狙ってスマホを盗みます。ステージには見張りがいるので、敵に見つからないようにスマホを手に入れましょう。スマホを手に入れることで得点が加算され、制限時間内にどれだけ高得点を取れるかを目指します。

実際のプログラム：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>スマホ泥棒</title>
	<style>
		/* スタイルシート */
		#game-container {
			width: 300px;
			height: 500px;
			background-color: #eee;
			border: 1px solid #ccc;
			position: relative;
			margin: 0 auto;
			margin-top: 50px;
			border-radius: 10px;
			overflow: hidden;
		}
		#player {
			display: block;
			width: 50px;
			height: 50px;
			background-image: url('🕵️');
			background-size: cover;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		#target {
			display: block;
			width: 40px;
			height: 40px;
			background-image: url('📱');
			background-size: cover;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		#score {
			font-size: 25px;
			position: absolute;
			bottom: 10px;
			left: 10px;
			color: #fff;
			text-shadow: 1px 1px 1px #000;
		}
	</style>
	<script>
		// JavaScript部分
		document.addEventListener('DOMContentLoaded', function() {
			// 変数の定義
			var container = document.getElementById('game-container');
			var player = document.getElementById('player');
			var target = document.getElementById('target');
			var score = document.getElementById('score');
			var currentScore = 0;
			var timerId = null;
			var targetPosition = {
				x: null,
				y: null
			};
		
			// 初期化処理
			init();
		
			// ゲームスタート
			container.addEventListener('click', function() {
				if (timerId === null && currentScore < 100) {
					timerId = setInterval(moveTarget, 1000);
				}
			});
		
			// ゲームオーバー判定
			setInterval(function() {
				if (currentScore >= 100) {
					gameOver('You win!');
				} else if (timerId !== null && targetPosition.y >= (container.clientHeight - target.clientHeight)) {
					gameOver('Game over!');
				}
			}, 100);
		
			// ターゲットを移動する関数
			function moveTarget() {
				var x = Math.floor(Math.random() * (container.clientWidth - target.clientWidth));
				var y = 0;
				targetPosition.x = x;
				targetPosition.y = y;
				target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
			}
		
			// キャラクターを移動する関数
			function movePlayer(x) {
				player.style.transform = 'translateX(' + x + 'px)';
			}
		
			// 初期化処理
			function init() {
				moveTarget();
				container.addEventListener('mousemove', function(e) {
					movePlayer(e.clientX - container.getBoundingClientRect().left - (player.clientWidth / 2));
				});
			}
		
			// ゲームオーバー処理
			function gameOver(message) {
				clearInterval(timerId);
				timerId = null;
				alert(message);
			}
		
			// スコア加算処理
			setInterval(function() {
				if (timerId !== null && targetPosition.y >= (container.clientHeight - target.clientHeight)) {
					currentScore++;
					score.textContent = currentScore;
				}
			}, 100);
		});
	</script>
</head>
<body>
	<div id="game-container">
		<div id="player"></div>
		<div id="target"></div>
		<div id="score">0</div>
	</div>
</body>
</html>

解説：
JavaScriptでゲームの処理を実装しています。HTML/CSSで画面を構築し、JavaScriptで画面操作やゲームロジックを実装しています。盗み出すスマホは絵文字を使って表示しています。ターゲットやプレイヤーを移動させるために、JavaScriptで位置情報を操作しています。ゲーム開始時やゲームオーバー時にアラートダイアログを表示しています。ゲームのスコアは画面左下に表示されます。