AI game creator

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

No:346

296

←

Prev Next

→

penmanship
Developer User2983｜Date and time 23/6/12 18:09:36
Build time 37.5 sec｜Game capacity 3.177KB｜

Script

にちょうしん！以下はスマホで遊べるシンプルなジャンプゲームのサンプルプログラムです。

このゲームは画面中央下にあるプレイヤーを操作し、タップまたはクリックでジャンプして障害物を避けながら距離を競うゲームです。障害物は一定間隔で画面上部から出現し、プレイヤーが接触するとゲームオーバーとなります。スマホで操作しやすいよう、タップでジャンプするようにしています。また、スマホならではの絵文字を使用したタイトルにしています。以上、サンプルプログラムとなります。ご参考までにどうぞ！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

にちょうしん！

以下はスマホで遊べるシンプルなジャンプゲームのサンプルプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>ジャンプゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #3d3d3d;
		}
		#player {
			width: 50px;
			height: 50px;
			background-color: #f0ad4e;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
		}
		.block {
			width: 50px;
			height: 50px;
			background-color: #5bc0de;
			position: absolute;
			bottom: 50px;
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<script>
		var player = document.getElementById("player");
		var blocks = [];
		var score = 0;

function jump() {
			player.classList.add("jump");
			setTimeout(function() {
				player.classList.remove("jump");
			}, 500);
		}

document.addEventListener("touchstart", jump);
		document.addEventListener("click", jump);

setInterval(function() {
			var block = document.createElement("div");
			block.classList.add("block");
			var left = Math.floor(Math.random() * (window.innerWidth - 50));
			block.style.left = left + "px";
			document.body.appendChild(block);
			blocks.push(block);
		}, 1000);

setInterval(function() {
			for (var i = 0; i < blocks.length; i++) {
				var block = blocks[i];
				var top = block.offsetTop;
				if (top > window.innerHeight - 50) {
					blocks.splice(i, 1);
					document.body.removeChild(block);
					score++;
					document.title = "スコア: " + score;
				} else {
					block.style.top = top + 10 + "px";
				}
			}
			var playerTop = player.offsetTop - 10;
			if (playerTop <= 0) {
				alert("ゲームオーバー！\nスコア: " + score);
				location.reload();
			}
			for (var i = 0; i < blocks.length; i++) {
				var block = blocks[i];
				var blockLeft = block.offsetLeft;
				var blockRight = block.offsetLeft + block.offsetWidth;
				var blockTop = block.offsetTop;
				var blockBottom = block.offsetTop + block.offsetHeight;
				var playerLeft = player.offsetLeft;
				var playerRight = player.offsetLeft + player.offsetWidth;
				var playerTop = player.offsetTop;
				var playerBottom = player.offsetTop + player.offsetHeight;
				if (playerRight >= blockLeft && playerLeft <= blockRight && playerBottom >= blockTop && playerTop <= blockBottom) {
					alert("ゲームオーバー！\nスコア: " + score);
					location.reload();
				}
			}
		}, 100);
	</script>
</body>
</html>

以上、サンプルプログラムとなります。ご参考までにどうぞ！