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

No:2176

5180

←

Prev Next

→

Iron Kirby
Developer sayaensm｜Date and time 23/6/20 12:29:28
Build time 50.584 sec｜Game capacity 4.004KB｜

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 name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background-color: #f3f3f3;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		
		h1 {
			color: #f2483f;
			font-size: 3em;
			margin-top: 30px;
		}
		
		#canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 0 10px #999;
		}
		
		#score {
			font-size: 2em;
			color: #f2483f;
			margin-top: 10px;
		}
		
		#instruction {
			font-size: 1.5em;
			margin-top: 30px;
			color: #555;
		}
		
		button {
			font-size: 1.5em;
			padding: 10px 30px;
			background-color: #f2483f;
			color: #fff;
			border: none;
			border-radius: 5px;
			margin-top: 30px;
			cursor: pointer;
		}
		
		button:hover {
			background-color: #ff6a65;
		}
	</style>
</head>
<body>
	<h1>鉄のカービィ</h1>
	<canvas id="canvas" width="600" height="600"></canvas>
	<div id="score">0</div>
	<div id="instruction">スマホの画面をタップして、カービィを動かしてください！</div>
	<button id="restartBtn" style="display:none;">もう一度遊ぶ</button>
	
	<script>
		// 鉄のカービィ ゲーム
		// カービィを動かして、敵を避けるゲームです。
		
		// 変数を初期化
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var isGameOver = false;
		var obstacles = [];
		
		// カービィの初期位置
		var player = {
			x: canvas.width/2,
			y: canvas.height-50,
			width: 50,
			height: 50,
			color: "pink"
		};
		
		// 敵オブジェクトの作成
		function Obstacle(x, width, height, color) {
			this.x = x;
			this.y = 0;
			this.width = width;
			this.height = height;
			this.color = color;
		}
		
		// 敵を作成する関数
		function createObstacle() {
			var minWidth = 50;
			var maxWidth = 200;
			var width = Math.floor(Math.random() * (maxWidth - minWidth + 1) + minWidth);
			var x = Math.floor(Math.random() * (canvas.width - width));
			var color = "#000";
			obstacles.push(new Obstacle(x, width, 20, color));
		}
		
		// 描画関数
		function draw() {
			// 背景をリセット
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// カービィを描画
			ctx.fillStyle = player.color;
			ctx.fillRect(player.x, player.y, player.width, player.height);
			
			// 敵を描画
			obstacles.forEach(function(obstacle) {
				ctx.fillStyle = obstacle.color;
				ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
			});
			
			// スコアを描画
			ctx.fillStyle = "#f2483f";
			ctx.font = "bold 30px Arial";
			ctx.fillText("Score: " + score, 20, 50);
		}
		
		// ゲームループ関数
		function gameLoop() {
			// ゲームオーバーならば、リスタートボタンを表示
			if (isGameOver) {
				document.getElementById("restartBtn").style.display = "block";
				return;
			}
			
			// 60fpsでループ
			requestAnimationFrame(gameLoop);
			
			// 敵を作成
			if (Math.random() > 0.95) {
				createObstacle();
			}
			
			// 敵を動かす
			obstacles.forEach(function(obstacle) {
				obstacle.y += 5;
				
				// カービィが敵にぶつかったら、ゲームオーバー
				if (player.x < obstacle.x + obstacle.width &&
					player.x + player.width > obstacle.x &&
					player.y < obstacle.y + obstacle.height &&
					player.y + player.height > obstacle.y) {
					isGameOver = true;
				}
			});
			
			// スコアを加算
			score++;
			
			// 描画
			draw();
		}
		
		// タッチイベント
		canvas.addEventListener("touchstart", function(event) {
			if (isGameOver) {
				return;
			}
			var touchX = event.touches[0].clientX - canvas.offsetLeft;
			player.x = touchX - player.width/2;
		});
		
		// ゲーム開始
		gameLoop();
		
		// リスタートボタン
		document.getElementById("restartBtn").addEventListener("click", function() {
			location.reload();
		});
	</script>
</body>
</html>