Eat a lot of barbecued meat's game

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

No:4320

614

←

Prev Next

→

Eat a lot of barbecued meat
Developer User1006｜Date and time 23/6/27 19:42:02
Build time 27.358 sec｜Game capacity 2.618KB｜

Script

了解しました。私は簡単なシューティングゲームを作成しました。プレイヤーはスマホで操作して、敵を倒して高得点を獲得することが目的です。以下が実装したhtmlファイルになります。JavaScriptはscriptタグで囲んで書きました。

得点: 0

このゲームでは、プレイヤーがマウスを動かすことで左右に動きます。敵は一定の速度で画面上部から降ってきます。プレイヤーはクリックして敵を倒し、スコアが加算されます。絵文字は使用していませんが、スマホでも遊べるように実装しました。また、ゲーム化の要素も含めて実装しています。ご確認いただけますようお願いいたします。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。

私は簡単なシューティングゲームを作成しました。プレイヤーはスマホで操作して、敵を倒して高得点を獲得することが目的です。

以下が実装したhtmlファイルになります。JavaScriptはscriptタグで囲んで書きました。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>シューティングゲーム</title>
	<style>
		#game-board {
			width: 100%;
			height: 90vh;
			background-color: skyblue;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

#player {
			width: 50px;
			height: 50px;
			background-color: red;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

.enemy {
			width: 30px;
			height: 30px;
			background-color: green;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			animation: enemy-fall 3s linear infinite;
		}

@keyframes enemy-fall {
			0% {
				top: -30px;
			}
			100% {
				top: 90%;
			}
		}

.score {
			font-size: 24px;
			color: white;
			margin-top: 20px;
		}

</style>
</head>
<body>
	<div id="game-board">
		<div id="player"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="enemy"></div>
		<div class="score">得点: 0</div>
	</div>

// 敵を倒す
		let enemies = document.querySelectorAll('.enemy');
		let score = 0;
		for (let i = 0; i < enemies.length; i++) {
			enemies[i].addEventListener('click', function() {
				this.style.display = 'none';
				score += 10;
				document.querySelector('.score').innerText = '得点: ' + score;
			});
		}

</script>
</body>
</html>
```

このゲームでは、プレイヤーがマウスを動かすことで左右に動きます。敵は一定の速度で画面上部から降ってきます。プレイヤーはクリックして敵を倒し、スコアが加算されます。

絵文字は使用していませんが、スマホでも遊べるように実装しました。また、ゲーム化の要素も含めて実装しています。

ご確認いただけますようお願いいたします。