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

No:1620

4184

←

Prev Next

→

Much faster game than Salamander
Developer User3025｜Date and time 23/6/18 19:49:03
Build time 52.993 sec｜Game capacity 4.822KB｜

Script

サラマンダーよりずっと速いゲーム

このゲームは、サラマンダーよりも速いペースで進むシューティングゲームです。スペースキーを押してショットを打ち、矢印キーで機体を操作して敵を倒しましょう。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>サラマンダーよりずっと速いゲーム</title>
	<style>
		body {
			background-color: #111;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
			padding-top: 100px;
		}

canvas {
			border: 2px solid #fff;
			background-color: #000;
			display: block;
			margin: auto;
			margin-top: 20px;
		}

button {
			background-color: #fff;
			color: #111;
			border: none;
			padding: 10px 20px;
			cursor: pointer;
			font-size: 20px;
			margin-top: 20px;
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
	<h1>サラマンダーよりずっと速いゲーム</h1>
	<p>このゲームは、サラマンダーよりも速いペースで進むシューティングゲームです。スペースキーを押してショットを打ち、矢印キーで機体を操作して敵を倒しましょう。</p>

let player = {
			x: 180,
			y: 450,
			width: 40,
			height: 40,
			speed: 6
		};

let shots = [];
		let enemies = [];
		let score = 0;
		let intervalId;

function createEnemy() {
			let enemy = {
				x: Math.floor(Math.random() * 360),
				y: 0,
				width: 40,
				height: 40,
				speed: 4,
				exploding: false
			};

enemies.push(enemy);
		}

function updatePlayer() {
			if (keys.ArrowLeft && player.x > 0) {
				player.x -= player.speed;
			}

if (keys.ArrowRight && player.x < canvas.width - player.width) {
				player.x += player.speed;
			}

if (keys.Space) {
				let shot = {
					x: player.x + (player.width / 2) - 2,
					y: player.y - 10,
					width: 4,
					height: 10,
					speed: 10
				};

shots.push(shot);
			}
		}

function updateShots() {
			for (let i = 0; i < shots.length; i++) {
				let shot = shots[i];
				shot.y -= shot.speed;

if (shot.y < 0) {
					shots.splice(i, 1);

} else {
					for (let j = 0; j < enemies.length; j++) {
						let enemy = enemies[j];

if (!enemy.exploding &&
							shot.x + shot.width >= enemy.x &&
							shot.x <= enemy.x + enemy.width &&
							shot.y <= enemy.y + enemy.height &&
							shot.y + shot.height >= enemy.y) {

enemy.exploding = true;
							score += 10;
						}
					}
				}
			}
		}

function updateEnemies() {
			for (let i = 0; i < enemies.length; i++) {
				let enemy = enemies[i];
				enemy.y += enemy.speed;

if (enemy.y > canvas.height) {
					enemies.splice(i, 1);

} else if (enemy.exploding) {
					ctx.fillStyle = "#fff";
					ctx.font = "bold 20px Arial";
					ctx.fillText("+" + score, enemy.x + 10, enemy.y);
					scoreText.innerHTML = "Score: " + score;
					scoreText.style.fontSize = "36px";
					enemy.y += enemy.speed;
					if (enemy.y > canvas.height) {
						enemies.splice(i, 1);
					}

} else {
					ctx.fillStyle = "red";
					ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
				}
			}
		}

function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "yellow";
			ctx.fillRect(player.x, player.y, player.width, player.height);

for (let i = 0; i < shots.length; i++) {
				let shot = shots[i];
				ctx.fillStyle = "#fff";
				ctx.fillRect(shot.x, shot.y, shot.width, shot.height);
			}

updateShots();
			updateEnemies();
			updatePlayer();
		}

let keys = {};
		document.addEventListener("keydown", function(event) {
			keys[event.code] = true;
		});

document.addEventListener("keyup", function(event) {
			keys[event.code] = false;
		});

function startGame() {
			score = 0;
			enemies = [];
			shots = [];
			intervalId = setInterval(createEnemy, 1000 / 3);

scoreText = document.createElement("p");
			scoreText.innerHTML = "Score: " + score;
			scoreText.style.fontSize = "24px";
			scoreText.style.color = "white";
			scoreText.style.position = "absolute";
			scoreText.style.top = "50px";
			scoreText.style.right = "20px";
			document.body.appendChild(scoreText);

document.getElementById("gameCanvas").style.border = "none";
			document.getElementById("gameCanvas").style.marginTop = "0";

document.getElementById("gameCanvas").addEventListener("click", function() {
				document.getElementById("gameCanvas").requestPointerLock();
			});

document.addEventListener("mousemove", function(event) {
				if (document.pointerLockElement === document.getElementById("gameCanvas")) {
					player.x += event.movementX;

if (player.x < 0) {
						player.x = 0;
					}

if (player.x > canvas.width - player.width) {
						player.x = canvas.width - player.width;
					}
				}
			});

intervalId = setInterval(draw, 1000 / 60);
		}
	</script>
</body>
</html>