Mario game's game | AI game creator

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

No:16421

85

Mario game
Developer User7287｜Date and time 23/9/18 3:05:47
Build time 24.48 sec｜Game capacity 2.426KB｜

Score: 0

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<title>Mario Game</title>
	<style>
		#game-board {
			width: 300px;
			height: 400px;
			border: 2px solid black;
			position: relative;
			overflow: hidden;
		}
		#player {
			width: 30px;
			height: 30px;
			background-color: red;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.enemy {
			width: 30px;
			height: 30px;
			background-color: blue;
			position: absolute;
			top: 0;
		}
		.score {
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="game-board">
		<div id="player"></div>
	</div>
	<p class="score">Score: <span id="score">0</span></p>

<script>
		let player = document.getElementById('player');
		let gameBoard = document.getElementById('game-board');
		let scoreElement = document.getElementById('score');
		let score = 0;
		let isJumping = false;
		let gravity = 0.9;
		let playerBottomPosition = 0;
		let playerSpeed = 2;
		let enemiesInterval = 3000;
		
		function jump() {
			if (isJumping) return;
			player.style.animation = 'playerJump 0.5s';
			isJumping = true;
		
			let upTimerId = setInterval(() => {
				if (playerBottomPosition >= 250) {
					clearInterval(upTimerId);
		
					let downTimerId = setInterval(() => {
						if (playerBottomPosition <= 0) {
							clearInterval(downTimerId);
							player.style.animation = 'none';
							isJumping = false;
						}
						playerBottomPosition -= playerSpeed;
						player.style.bottom = playerBottomPosition + 'px';
					}, 20);
				}
				playerBottomPosition += playerSpeed * 2;
				player.style.bottom = playerBottomPosition + 'px';
			}, 20);
		}
		
		function generateEnemy() {
			let enemyPosition = 400;
			let randomTime = Math.random() * enemiesInterval;
			let enemy = document.createElement('div');
		
			enemy.classList.add('enemy');
			gameBoard.appendChild(enemy);
			enemy.style.left = enemyPosition + 'px';
		
			let moveEnemyTimerId = setInterval(() => {
				if (enemyPosition > 0 && enemyPosition < 30 && playerBottomPosition < 30) {
					clearInterval(moveEnemyTimerId);
					alert('Game Over!');
				}
				enemyPosition -= 4;
				enemy.style.left = enemyPosition + 'px';
			}, 20);
		
			if (!gameOver) setTimeout(generateEnemy, randomTime);
		}
		
		let generateEnemyId = setTimeout(generateEnemy, enemiesInterval);
		
		function incrementScore() {
			score += 1;
			scoreElement.innerText = score;
		}
		
		player.addEventListener('click', jump);
		
	</script>
</body>
</html>