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

No:1747

4007

←

Prev Next

→

invader
Developer User3400｜Date and time 23/6/19 0:02:15
Build time 65.963 sec｜Game capacity 5.479KB｜

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>
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body style="text-align:center;">
	<h1>インベーダー</h1>
	<p>地球を守れ！</p>
	<canvas id="canvas" width="300" height="400"></canvas>
	<br>
	<button id="startBtn">スタート！</button>
	<br>
	<p>操作方法: 左右キーで移動、スペースキーで攻撃</p>
	<script>
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		
		// ゲーム設定
        let ROWS = 5;
        let COLS = 10;
        let ALIEN_SIZE = 20;
        let ALIEN_GAP = 10;
        let ALIEN_SPEED = 1;
        let ALIEN_POINTS = [30, 20, 20, 10, 10];
        let SHIP_SIZE = 20;
        let SHIP_SPEED = 5;
        let BULLET_SIZE = 5;
        let BULLET_SPEED = 10;
        let BULLET_MAX = 3;
        let GAME_WIDTH = canvas.width;
        let GAME_HEIGHT = canvas.height;
		
		// ゲーム変数
		let aliens = [];
		let ship = {};
		let bullets = [];
		let score = 0;
		let gameOver = true;
		
		// インベーダーを作成する
        function createAliens() {
            for (let i = 0; i < ROWS; i++) {
                aliens[i] = [];
                for (let j = 0; j < COLS; j++) {
                    let alien = {
                        x: j * (ALIEN_SIZE + ALIEN_GAP) + ALIEN_GAP,
                        y: i * (ALIEN_SIZE + ALIEN_GAP) + ALIEN_GAP + 50,
                        width: ALIEN_SIZE,
                        height: ALIEN_SIZE,
                        points: ALIEN_POINTS[i],
                        image: "👽"
                    };
                    aliens[i][j] = alien;
                }
            }
        }
        
        // 船を作成する
        function createShip() {
            ship = {
                x: GAME_WIDTH / 2,
                y: GAME_HEIGHT - 50,
                width: SHIP_SIZE,
                height: SHIP_SIZE,
                image: "🚀"
            };
        }
		
		// キーイベントを処理する
		document.addEventListener("keydown", function(event) {
			if (!gameOver) {
				// 左右キー
				if (event.keyCode == 37) {
					ship.x -= SHIP_SPEED;
				} else if (event.keyCode == 39) {
					ship.x += SHIP_SPEED;
				}
				// スペースキー
				if (event.keyCode == 32 && bullets.length < BULLET_MAX) {
					bullets.push({
						x: ship.x + SHIP_SIZE / 2,
						y: ship.y,
						width: BULLET_SIZE,
						height: BULLET_SIZE,
						image: "💥"
					});
				}
			}
		});
		
		// ゲーム開始
		document.getElementById("startBtn").onclick = function() {
			if (gameOver) {
				score = 0;
				gameOver = false;
				createAliens();
				createShip();
				update();
			}
		};
		
		// 描画する
		function draw() {
			// 背景を描画
			ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
			
			// エイリアンを描画
			for (let i = 0; i < ROWS; i++) {
				for (let j = 0; j < COLS; j++) {
					if (aliens[i] != null&&aliens[i][j] != null) {
						ctx.fillText(aliens[i][j].image, aliens[i][j].x, aliens[i][j].y);
					}
				}
			}
			
			// 船を描画
			ctx.fillText(ship.image, ship.x, ship.y);
			
			// 弾を描画
			for (let i = 0; i < bullets.length; i++) {
				ctx.fillText(bullets[i].image, bullets[i].x, bullets[i].y);
			}
			
			// スコアを描画
			ctx.fillText("スコア: " + score, 10, 20);
			
			// ゲームオーバーを描画
			if (gameOver) {
				ctx.fillText("ゲームオーバー", GAME_WIDTH / 2 - 50, GAME_HEIGHT / 2 - 20);
			}
		}
		
let isRev=1;
		// 更新する
		function update() {
let lastPos = 0;
			// エイリアンの移動
			for (let i = 0; i < ROWS; i++) {
				for (let j = 0; j < COLS; j++) {
					if (aliens[i][j] != null) {
						aliens[i][j].x += ALIEN_SPEED*isRev;
lastPos = aliens[i][j].x;

// もし地球に到達したら
						if (aliens[i][j].y + ALIEN_SIZE >= ship.y) {
							gameOver = true;
						}
					}
				}
			}

//console.warn("lastPos="+lastPos);

if(lastPos >400){
isRev = -1;
}
else if(lastPos <200){
isRev = 1
}

// 弾の移動
			for (let i = 0; i < bullets.length; i++) {
				bullets[i].y -= BULLET_SPEED;
				// もしエイリアンに命中したら
				for (let j = 0; j < ROWS; j++) {
					for (let k = 0; k < COLS; k++) {
						if (aliens[j][k] != null && bullets[i] != null && bullets[i].x + BULLET_SIZE / 2 >= aliens[j][k].x && bullets[i].x + BULLET_SIZE / 2 <= aliens[j][k].x + ALIEN_SIZE && bullets[i].y <= aliens[j][k].y + ALIEN_SIZE) {
							score += aliens[j][k].points;
							aliens[j][k] = null;
							bullets[i] = null;
						}
					}
				}
				// 弾を消す
				if (bullets[i] != null && bullets[i].y < 0) {
					bullets[i] = null;
				}
			}
			bullets = bullets.filter(function(bullet) {
				return bullet != null;
			});
			
			// ゲームオーバー判定
			let gameClear = true;
			for (let i = 0; i < ROWS; i++) {
				for (let j = 0; j < COLS; j++) {
					if (aliens[i][j] != null) {
						gameClear = false;
					}
				}
			}
			if (gameClear) {
				gameOver = true;
			}
			
			// 再描画
			draw();
			
			// 更新
			if (!gameOver) {
				window.requestAnimationFrame(update);
			}
		}
		
		// 初期表示
		draw();
	</script>
</body>
</html>