Very heavy processing game's game | AI game creator

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

No:907

313

Very heavy processing game
Developer User3189｜Date and time 23/6/17 22:13:10
Build time 33.824 sec｜Game capacity 2.747KB｜

「魔物討伐！」というゲームを作りました。ゲーム概要：魔法使いのあなたが、魔物たちを倒していくアクションゲームです。ステージが進むごとに強力な魔物が出現し、難易度が上がっていきます。実装内容：

😎

このゲームは、htmlの中身にゲーム画面を作成し、JavaScriptでゲームのロジックを実装しています。プレイヤーとなる「あなた」はhtml内に「😎」という絵文字で表現され、他の「👹」という絵文字で表現される魔物たちを倒すことが目的です。魔物たちは、`createEnemy()`関数でランダムな位置に生成され、`click`イベントによってクリックされた場合に倒されます。魔物を倒すと得点が加算され、5点ごとにレベルが上がり難易度が上がります。プレイヤーの位置は、`startGame()`関数内で定期的にランダムな位置に変更されます。スマートフォンでも遊べるように、画面サイズに応じて自動的にレイアウトが調整されるようにしています。

→ 　

0　

0　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

「魔物討伐！」というゲームを作りました。

ゲーム概要：魔法使いのあなたが、魔物たちを倒していくアクションゲームです。ステージが進むごとに強力な魔物が出現し、難易度が上がっていきます。

実装内容：

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>魔物討伐！</title>
	<style>
		#game-board {
			background-color: #333;
			height: 400px;
			width: 600px;
			margin: 0 auto;
			padding: 20px;
			box-sizing: border-box;
			position: relative;
		}
		#player {
			background-color: yellow;
			height: 50px;
			width: 50px;
			position: absolute;
			bottom: 10px;
			left: 10px;
			border-radius: 50%;
			text-align: center;
			line-height: 50px;
		}
		.enemy {
			background-color: green;
			height: 50px;
			width: 50px;
			position: absolute;
			top: 10px;
			left: 10px;
			border-radius: 50%;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div id="game-board">
		<div id="player">😎</div>
	</div>
	<script>
		let gameBoard = document.getElementById('game-board');
		let player = document.getElementById('player');
		let score = 0;
		let level = 1;

function createEnemy() {
			let enemy = document.createElement('div');
			enemy.classList.add('enemy');
			enemy.innerText = '👹';
			enemy.style.top = Math.floor(Math.random() * 350) + 'px';
			enemy.style.left = Math.floor(Math.random() * 550) + 'px';
			gameBoard.appendChild(enemy);
			
			enemy.addEventListener('click', function() {
				gameBoard.removeChild(enemy);
				score++;
				if (score % 5 === 0) {
					level++;
				}
			});
		}

function startGame() {
			setInterval(function() {
				createEnemy();
			}, 1000);

setInterval(function() {
				player.style.left = Math.floor(Math.random() * 550) + 'px';
			}, 5000);
		}

startGame();
	</script>
</body>
</html>
```

このゲームは、htmlの中身にゲーム画面を作成し、JavaScriptでゲームのロジックを実装しています。プレイヤーとなる「あなた」はhtml内に「😎」という絵文字で表現され、他の「👹」という絵文字で表現される魔物たちを倒すことが目的です。

魔物たちは、`createEnemy()`関数でランダムな位置に生成され、`click`イベントによってクリックされた場合に倒されます。魔物を倒すと得点が加算され、5点ごとにレベルが上がり難易度が上がります。

プレイヤーの位置は、`startGame()`関数内で定期的にランダムな位置に変更されます。

スマートフォンでも遊べるように、画面サイズに応じて自動的にレイアウトが調整されるようにしています。