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

No:776

240

←

Prev Next

→

Mario look-alike wizard game
Developer User3127｜Date and time 23/6/17 17:21:49
Build time 28.183 sec｜Game capacity 2.022KB｜

Script

魔法使いの冒険

画面をタップしてジャンプ！

*注意: 実行するには、game, wizard, obstacle1, obstacle2用の画像が必要です。アニメーションは簡略化されているので、もっと複雑なものを作ることができます。

←

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>
		body {
			background-color: #d0e9f6;
			font-size: 2em;
			text-align: center;
		}
		#game {
			position: relative;
			width: 800px;
			height: 600px;
			margin: auto;
			background-image: url('bg.png');
			background-size: cover;
			border: 2px solid black;
		}
		#wizard {
			position: absolute;
			left: 50px;
			bottom: 0;
			width: 50px;
			height: 70px;
			background-image: url('wizard.png');
			background-size: contain;
			animation: wizard-move 0.5s infinite;
		}
		#obstacle1 {
			position: absolute;
			left: 200px;
			bottom: 130px;
			width: 50px;
			height: 50px;
			background-image: url('obstacle1.png');
			background-size: contain;
			animation: obstacle1-move 1s linear infinite;
		}
		#obstacle2 {
			position: absolute;
			left: 600px;
			bottom: 210px;
			width: 50px;
			height: 70px;
			background-image: url('obstacle2.png');
			background-size: contain;
			animation: obstacle2-move 1.5s linear infinite;
		}
		@keyframes wizard-move {
			0% { bottom: 0; }
			50% { bottom: 100px; }
			100% { bottom: 0; }
		}
		@keyframes obstacle1-move {
			0% { left: 200px; }
			50% { left: 600px; }
			100% { left: 200px; }
		}
		@keyframes obstacle2-move {
			0% { left: 600px; }
			50% { left: 200px; }
			100% { left: 600px; }
		}
	</style>
</head>
<body>
	<h1>魔法使いの冒険</h1>
	<div id="game">
		<div id="wizard"></div>
		<div id="obstacle1"></div>
		<div id="obstacle2"></div>
	</div>
	<p>画面をタップしてジャンプ！</p>
	<script>
		let wizard = document.getElementById("wizard");
		document.addEventListener("click", function() {
			wizard.style.bottom = "100px";
			setTimeout(function() {
				wizard.style.bottom = "0";
			}, 500);
		});
	</script>
</body>
</html>