Bullet Barrage Shooting Game's game

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

No:697

286

←

Prev Next

→

Bullet Barrage Shooting Game
Developer User3087｜Date and time 23/6/17 13:40:24
Build time 58.33 sec｜Game capacity 4.563KB｜

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>
	* {
		margin: 0;
		padding: 0;
	}
	
	canvas {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background-color: #fff;
	}
	
	#move-left {
		position: absolute;
		left: 10px;
		bottom: 10px;
		font-size: 50px;
	}
	
	#move-right {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 50px;
	}

#shoot {
		position: absolute;
		right: 50%;
		bottom: 10px;
		font-size: 50px;
		transform: translateX(50%);
	}

</style>
</head>
<body>

// ゲーム画面の設定
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

// プレイヤーの設定
var player = {
	x: canvas.width/2 - 50,
	y: canvas.height - 100,
	width: 100,
	height: 100,
	speed: 10,
	shootTimer: 0,
	shootInterval: 10,
	score: 0
};

// 敵の設定
var enemies = [];

function Enemy(x, y, width, height, speed) {
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.speed = speed;
}

// 弾幕の設定
var bullets = [];

function Bullet(x, y, radius, speed) {
	this.x = x;
	this.y = y;
	this.radius = radius;
	this.speed = speed;
}

// ユーザーの操作
var leftBtn = document.getElementById("move-left");
var rightBtn = document.getElementById("move-right");
var shootBtn = document.getElementById("shoot");

leftBtn.addEventListener("touchstart", function() {
	player.x -= player.speed;
});

rightBtn.addEventListener("touchstart", function() {
	player.x += player.speed;
});

shootBtn.addEventListener("touchstart", function() {
	if (player.shootTimer == 0) {
		bullets.push(new Bullet(player.x + player.width/2, player.y, 5, -10));
		player.shootTimer = player.shootInterval;
	}
});

// 敵の生成
setInterval(function() {
	var enemy = new Enemy(Math.random()*(canvas.width-100), -100, 100, 100, Math.random()*5+2);
	enemies.push(enemy);
}, 1000);

// ゲームループ
var gameLoop = setInterval(function() {

// 背景をクリア
	ctx.clearRect(0, 0, canvas.width, canvas.height);

// 弾幕の処理
	for (var i=0; i<bullets.length; i++) {
		// 弾が画面から外れた場合、配列から削除
		if (bullets[i].y < -bullets[i].radius) {
			bullets.splice(i, 1);
		} else {
			// 弾を描画
			ctx.beginPath();
			ctx.fillStyle = "red";
			ctx.arc(bullets[i].x, bullets[i].y, bullets[i].radius, 0, Math.PI*2);
			ctx.fill();
			// 弾を移動
			bullets[i].y += bullets[i].speed;
		}
	}

// プレイヤーの処理
	ctx.fillStyle = "black";
	ctx.fillRect(player.x, player.y, player.width, player.height);

// プレイヤーが弾を発射できるようにする
	if (player.shootTimer > 0) {
		player.shootTimer--;
	}

// 敵の処理
	for (var i=0; i<enemies.length; i++) {
		// 敵を描画
		ctx.beginPath();
		ctx.fillStyle = "blue";
		ctx.rect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
		ctx.fill();
		// 敵を移動
		enemies[i].y += enemies[i].speed;
		// プレイヤーと衝突した場合、ゲームオーバー
		if (enemies[i].y+enemies[i].height > player.y && enemies[i].x+enemies[i].width > player.x && enemies[i].x < player.x+player.width) {
			clearInterval(gameLoop);
			alert("ゲームオーバー！\nスコア："+player.score);
			location.reload();
		}
		// 弾と衝突した場合、敵を削除して得点を加算
		for (var j=0; j<bullets.length; j++) {
			if (enemies[i] && bullets[j] && bullets[j].y-bullets[j].radius < enemies[i].y+enemies[i].height && bullets[j].x+bullets[j].radius > enemies[i].x && bullets[j].x-bullets[j].radius < enemies[i].x+enemies[i].width) {
				enemies.splice(i, 1);
				player.score += 10;
			}
		}
	}

// スコアを表示
	ctx.font = "30px sans-serif";
	ctx.textAlign = "left";
	ctx.fillText("スコア："+player.score, 10, 50);

}, 30);

</script>

</body>
</html>