AI game creator

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

No:12

305

←

Prev Next

→

Mario and Goomba
Developer User1006｜Date and time 23/4/19 22:57:33
Build time unknown sec｜Game capacity 1.663KB｜

Script

を使った、簡単なジャンプアクションゲームです。プレイヤーはマリオを操作し、クリボーを避けながらステージを進んでいきます。ゲームはスマートフォンのタッチ操作のみで進行します。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Mario Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		#game-container {
			width: 100%;
			height: 100vh;
			background-color: #fff;
			position: relative;
		}
		#player {
			width: 50px;
			height: 50px;
			background-color: #f00;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		#enemy {
			width: 50px;
			height: 50px;
			background-color: #0f0;
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
<body>
<div id="game-container">
	<div id="player"></div>
	<div id="enemy"></div>
</div>
<script>
	var player = document.getElementById("player");
	var enemy = document.getElementById("enemy");

// タッチイベント
	player.addEventListener("touchstart", function(e) {
		//e.preventDefault(); // デフォルト動作をキャンセル
		if (player.classList.contains("jump")) {
			return;
		}
		player.classList.add("jump");

// ジャンプ動作
		setTimeout(function() {
			player.classList.remove("jump");
		}, 1000);
	});

// 敵の動作
	setInterval(function() {
		var enemyPosition = enemy.getBoundingClientRect();
		var playerPosition = player.getBoundingClientRect();

if (enemyPosition.left <= playerPosition.right) {
			alert("Game Over");
			location.reload();
		}
	}, 10);
</script>
</body>
</html>