AI game creator

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

No:507

413

←

Prev Next

→

World of Tanks
Developer User3004｜Date and time 23/6/15 4:09:42
Build time 39.615 sec｜Game capacity 3.349KB｜

Script

Score: 0

This is a simple game where the player controls a tank at the bottom of the screen using the arrow keys, and tries to shoot down enemy tanks that appear at the top of the screen using the space bar. The player earns points for each enemy tank they shoot down. If an enemy tank reaches the bottom of the screen, the game is over. The game is designed to be played on a smartphone, with touch controls not yet implemented. Emojis are used in the score display to add some personality to the game.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>World of Tanks</title>
</head>

<body>
	<div id="game-container">
		<p id="score">Score: 0</p>
		<div id="tank"></div>
		<div id="enemy"></div>
	</div>

setInterval(() => {
			moveEnemy();
		}, 500);

function moveTankLeft() {
			if (tankPosition > 0) {
				tankPosition -= 20;
				tank.style.left = `${tankPosition}px`;
			}
		}

function moveTankRight() {
			if (tankPosition < 280) {
				tankPosition += 20;
				tank.style.left = `${tankPosition}px`;
			}
		}

function shootProjectile() {
			const projectile = document.createElement("div");
			projectile.classList.add("projectile");
			projectile.style.left = `${tankPosition + 10}px`;
			projectile.style.top = "370px";
			document.body.appendChild(projectile);

let projectilePosition = 370;
			const intervalId = setInterval(() => {
				if (projectilePosition > 0) {
					projectilePosition -= 10;
					projectile.style.top = `${projectilePosition}px`;

if (projectilePosition < enemyPosition + 50 && tankPosition < enemyPosition + 50) {
						clearInterval(intervalId);
						document.body.removeChild(projectile);
						enemyPosition = 0;
						enemy.style.top = `${enemyPosition}px`;
						gameScore++;
						score.textContent = `Score: ${gameScore}`;
					}
				} else {
					clearInterval(intervalId);
					document.body.removeChild(projectile);
				}
			}, 30);
		}

function moveEnemy() {
			if (enemyPosition < 370) {
				enemyPosition += 50;
				enemy.style.top = `${enemyPosition}px`;

if (enemyPosition === 370) {
					alert(`Game Over! Your score is ${gameScore}.`);
					tankPosition = 0;
					enemyPosition = 0;
					gameScore = 0;
					score.textContent = `Score: ${gameScore}`;
					tank.style.left = `${tankPosition}px`;
					enemy.style.top = `${enemyPosition}px`;
				}
			}
		}
	</script>

#tank {
			width: 50px;
			height: 50px;
			background-color: yellow;
			position: absolute;
			bottom: 0;
			left: 0;
		}

#enemy {
			width: 50px;
			height: 50px;
			background-color: red;
			position: absolute;
			top: 0;
			right: 0;
		}

.projectile {
			width: 5px;
			height: 20px;
			background-color: blue;
			position: absolute;
		}
	</style>
</body>

</html>