Mario-like game that can be rewound with the UP button in time.'s game

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

No:1051

285

←

Prev Next

→

Mario-like game that can be rewound with the UP bu..ALL
Developer User3225｜Date and time 23/6/18 0:50:12
Build time 30.391 sec｜Game capacity 2.44KB｜

Script

※注意：画像ファイルは実際のものに差し替えてください。また、このコードは基本機能に過ぎません。もっと複雑なゲームを作る場合は、これをベースにして改良する必要があります。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<！DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>マリオ風ゲーム</title>
	<style>
		#game-board {
			width: 500px;
			height: 300px;
			margin: 0 auto;
			position: relative;
			background: url('background.png') no-repeat;
			background-size: cover;
			border: 1px solid gray;
		}
		
		#player {
			width: 50px;
			height: 50px;
			background: url('mario.png') no-repeat;
			background-size: cover;
			position: absolute;
			bottom: 0;
			left: 15%;
		}
		
		#time {
			position: absolute;
			top: 10px;
			left: 10px;
			font-size: 30px;
		}
		
		.btn {
			width: 50px;
			height: 50px;
			font-size: 30px;
			text-align: center;
			line-height: 50px;
			background-color: gray;
			border-radius: 50%;
			color: white;
			display: inline-block;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div id="game-board">
		<div id="player"></div>
		<div id="time">0</div>
	</div>
	<div>
		<button class="btn" id="up">↑</button>
		<button class="btn" id="left">←</button>
		<button class="btn" id="right">→</button>
	</div>
	
	<script>
		var time = 0;
		
		// 右ボタンクリック時の処理
		document.getElementById('right').addEventListener('click', function() {
			var player = document.getElementById('player');
			var left = parseInt(player.style.left);
			left += 5;
			if (left > 85) {
				left = 85;
			}
			player.style.left = left + '%';
		});

// 左ボタンクリック時の処理
		document.getElementById('left').addEventListener('click', function() {
			var player = document.getElementById('player');
			var left = parseInt(player.style.left);
			left -= 5;
			if (left < 0) {
				left = 0;
			}
			player.style.left = left + '%';
		});

// 上ボタンクリック時の処理
		document.getElementById('up').addEventListener('click', function() {
			time += 1;
			document.getElementById('time').innerHTML = time;
			if (time > 60) {
				alert('ゲームオーバー');
				time = 0;
				document.getElementById('time').innerHTML = time;
			}
			var player = document.getElementById('player');
			var bottom = parseInt(player.style.bottom);
			bottom += 10;
			player.style.bottom = bottom + 'px';
		});
	</script>
</body>
</html>