I dont need ranking in a hishashi game! 🤬💢Game's game

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

No:4099

←

Prev Next

→

I dont need ranking in a hishashi game! 🤬💢Game
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/27 12:12:28
Build time 52.859 sec｜Game capacity 4.617KB｜

Script

のジャンルについての指示がないため、私は2Dアクションゲームを作成することに決めました。以下が私が作成したゲームのHTMLコードです。JavaScriptコードはscriptタグ内にあります。

SCORE: 0

GAME OVER

このゲームは、黄色い四角形のプレイヤーを操作して赤い四角形の敵を回避し、スコアを稼ぐ2Dアクションゲームです。左右の矢印キーでプレイヤーを移動させることができます。敵に触れるか、画面下端に到達するとゲームオーバーになり、スコアが表示されます。スコアは、画面上部右側のスコアボードに表示されます。私はこのゲームをスマートフォンでもプレイできるように設計しました。このゲームは簡単なものですが、楽しんでいただければ幸いです。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

のジャンルについての指示がないため、私は2Dアクションゲームを作成することに決めました。

以下が私が作成したゲームのHTMLコードです。JavaScriptコードはscriptタグ内にあります。

```
<!DOCTYPE html>
<html>
<head>
	<title>2Dアクションゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		#game-board {
			width: 100%;
			height: 100vh;
			background-color: #0a0a0a;
			display: flex;
			justify-content: center;
			align-items: center;
		}

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

#enemy1, #enemy2, #enemy3 {
			width: 50px;
			height: 50px;
			background-color: #ff0000;
			position: absolute;
			top: 0;
			left: 0;
		}

#score {
			position: absolute;
			top: 10px;
			right: 10px;
			color: #ffffff;
			font-size: 24px;
			font-weight: bold;
		}

#game-over {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #ffffff;
			font-size: 48px;
			font-weight: bold;
			display: none;
		}
	</style>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', () => {
			const player = document.getElementById('player');
			const enemy1 = document.getElementById('enemy1');
			const enemy2 = document.getElementById('enemy2');
			const enemy3 = document.getElementById('enemy3');
			const score = document.getElementById('score');
			const gameOver = document.getElementById('game-over');
			let playerX = 50;
			let playerY = 0;
			let enemy1X = 0;
			let enemy1Y = 0;
			let enemy2X = 25;
			let enemy2Y = 0;
			let enemy3X = 50;
			let enemy3Y = 0;
			let isGameOver = false;
			let gameLoop;

function update() {
				if (!isGameOver) {
					player.style.transform = `translateX(${playerX}px) translateY(${playerY}px)`;

enemy1Y += 5;
					enemy1.style.transform = `translateX(${enemy1X}px) translateY(${enemy1Y}px)`;
					if (enemy1Y >= window.innerHeight) {
						enemy1Y = 0;
						enemy1X = Math.floor(Math.random() * window.innerWidth);
						score.innerHTML = `SCORE: ${parseInt(score.innerHTML.split(':')[1]) + 1}`;
					}

enemy2Y += 8;
					enemy2.style.transform = `translateX(${enemy2X}px) translateY(${enemy2Y}px)`;
					if (enemy2Y >= window.innerHeight) {
						enemy2Y = 0;
						enemy2X = Math.floor(Math.random() * window.innerWidth);
						score.innerHTML = `SCORE: ${parseInt(score.innerHTML.split(':')[1]) + 1}`;
					}

enemy3Y += 10;
					enemy3.style.transform = `translateX(${enemy3X}px) translateY(${enemy3Y}px)`;
					if (enemy3Y >= window.innerHeight) {
						enemy3Y = 0;
						enemy3X = Math.floor(Math.random() * window.innerWidth);
						score.innerHTML = `SCORE: ${parseInt(score.innerHTML.split(':')[1]) + 1}`;
					}

if ((Math.abs(playerX - enemy1X) <= 50 && Math.abs(playerY - enemy1Y) <= 50) ||
						(Math.abs(playerX - enemy2X) <= 50 && Math.abs(playerY - enemy2Y) <= 50) ||
						(Math.abs(playerX - enemy3X) <= 50 && Math.abs(playerY - enemy3Y) <= 50)) {
						clearInterval(gameLoop);
						isGameOver = true;
						gameOver.style.display = 'block';
					}
				}
			}

gameLoop = setInterval(update, 30);
		});
	</script>
</head>
<body>
	<div id="game-board">
		<div id="player"></div>
		<div id="enemy1"></div>
		<div id="enemy2"></div>
		<div id="enemy3"></div>
		<div id="score">SCORE: 0</div>
		<div id="game-over">GAME OVER</div>
	</div>
</body>
</html>
```

このゲームは簡単なものですが、楽しんでいただければ幸いです。