AI game creator

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

No:1505

230

←

Prev Next

→

colony drop
Developer User3345｜Date and time 23/6/18 17:44:09
Build time 46.504 sec｜Game capacity 4.014KB｜

Script

操作方法：左右の矢印キーで移動、スペースキーでボムを投下

スコア：0

←

Prev　Next

→ 　

Back　

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

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.0">
	<style>
		body {
			background-color: #f5f5f5;
			text-align: center;
			padding-top: 20px;
			font-size: 24px;
		}
		canvas {
			background-color: #fff;
			margin: auto;
			display: block;
			border: 1px solid #ccc;
		}
		p {
			margin-top: 10px;
			color: #555;
			font-size: 16px;
		}
		button {
			padding: 10px 20px;
			font-size: 20px;
			background-color: #4CAF50;
			color: #fff;
			border: none;
			border-radius: 5px;
			margin: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<p>操作方法：左右の矢印キーで移動、スペースキーでボムを投下</p>
	<button id="startBtn">スタート</button>
	<p id="score">スコア：0</p>
	<script>
		// 初期値
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var shipX = canvas.width/2;
		var bombY = canvas.height;
		var alienX = 50;
		var alienY = 50;
		var score = 0;
		var isPlaying = false;

// キー入力
		var leftPressed = false;
		var rightPressed = false;
		var spacePressed = false;
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		function keyDownHandler(e) {
			if(e.keyCode == 37) {
				leftPressed = true;
			} else if(e.keyCode == 39) {
				rightPressed = true;
			} else if(e.keyCode == 32) {
				spacePressed = true;
			}
		}
		function keyUpHandler(e) {
			if(e.keyCode == 37) {
				leftPressed = false;
			} else if(e.keyCode == 39) {
				rightPressed = false;
			} else if(e.keyCode == 32) {
				spacePressed = false;
			}
		}

// ボムの落下
		var bombSpeed = 5;
		function drawBomb() {
			ctx.beginPath();
			ctx.arc(shipX, bombY, 10, 0, Math.PI*2);
			ctx.fillStyle = "#FF0000";
			ctx.fill();
			ctx.closePath();
			bombY -= bombSpeed;
			if(bombY < 0) {
				resetBomb();
			}
		}
		function resetBomb() {
			bombY = canvas.height;
			score += 10;
			document.getElementById("score").innerHTML = "スコア：" + score;
		}

// エイリアンの移動
		var alienSpeed = 3;
		var alienDir = 1;
		var alienDown = 0;
		function drawAlien() {
			ctx.beginPath();
			ctx.arc(alienX, alienY, 20, 0, Math.PI*2);
			ctx.fillStyle = "#00FF00";
			ctx.fill();
			ctx.closePath();
			alienX += (alienSpeed * alienDir);
			if(alienX < 20 || alienX > canvas.width - 20) {
				alienDir *= -1;
			}
			if(alienDown > 5) {
				alienY += 50;
				alienDown = 0;
			} else {
				alienDown++;
			}
			if(alienY > canvas.height) {
				gameOver();
			}
		}

// 当たり判定
		function checkCollision() {
			var distance = Math.sqrt(Math.pow(alienX - shipX, 2) + Math.pow(alienY - bombY, 2));
			if(distance < 30) {
				resetBomb();
				alienX = 50;
				alienY = 50;
				alienSpeed++;
			}
		}

// ゲームオーバー
		function gameOver() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.font = "40px Arial";
			ctx.fillStyle = "#FF0000";
			ctx.fillText("Game Over!!", canvas.width/2 - 140, canvas.height/2);
			isPlaying = false;
			document.getElementById("startBtn").innerHTML = "リトライ";
			document.getElementById("startBtn").style.display = "block";
		}

// ゲームループ
		function gameLoop() {
			if(!isPlaying) return;
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBomb();
			drawAlien();
			checkCollision();
			if(leftPressed && shipX > 20) {
				shipX -= 5;
			} else if(rightPressed && shipX < canvas.width - 20) {
				shipX += 5;
			}
			if(spacePressed) {
				drawBomb();
			}
			requestAnimationFrame(gameLoop);
		}

// スタートボタン
		document.getElementById("startBtn").addEventListener("click", function() {
			if(!isPlaying) {
				isPlaying = true;
				document.getElementById("startBtn").style.display = "none";
				gameLoop();
			} else {
				location.reload();
			}
		});
	</script>
</body>
</html>