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

No:1392

201

←

Prev Next

→

A game that feels like Singularity
Developer User3025｜Date and time 23/6/18 13:08:42
Build time 42.734 sec｜Game capacity 3.245KB｜

Script

シンギュラリティを感じるゲーム

遊び方

画面内に現れる「👾」をタップして倒しましょう。タイムリミットはありませんが、ミスすると1点減点されます。

←

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>Singularity Game</title>
	<style>
		body {
			background-color: #F9D5E3;
			font-family: sans-serif;
			text-align: center;
			margin: 0;
		}

h1 {
			font-size: 2.5rem;
			margin-top: 3rem;
		}

h2 {
			font-size: 2rem;
			margin-top: 2rem;
		}

canvas {
			display: block;
			margin: 0 auto;
			margin-top: 3rem;
			border: 2px solid black;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<h1>シンギュラリティを感じるゲーム</h1>
	<h2>遊び方</h2>
	<p>画面内に現れる「👾」をタップして倒しましょう。タイムリミットはありませんが、ミスすると1点減点されます。</p>
	<canvas id="game" width="300" height="500"></canvas>

// エイリアンのオブジェクト
		class Alien {
			constructor(x, y, size, speed) {
				this.x = x;
				this.y = y;
				this.size = size;
				this.speed = speed;
			}

update() {
				this.y += this.speed; // 下に動く
			}

draw() {
				ctx.font = this.size + "px serif";
				ctx.fillText("👾", this.x, this.y);
			}

isClicked(x, y) { // クリックされたかを判定する
				let distance = Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));
				return distance < (this.size / 2);
			}
		}

// ゲームの初期化
		function init() {
			canvas.addEventListener("click", handleClick);
			gameLoop = setInterval(update, 1000 / 60); // 60fpsで更新
			spawnAlien();
		}

// ゲームの更新
		function update() {
			// 背景をクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// エイリアンを更新・描画
			for (let i = 0; i < aliens.length; i++) {
				aliens[i].update();
				aliens[i].draw();

if (aliens[i].y > canvas.height) { // 画面下に出た場合は削除
					aliens.splice(i, 1);
					score -= 1;
				}
			}

// スコア・タイムを表示
			ctx.font = "2rem sans-serif";
			ctx.fillStyle = "#fff";
			ctx.fillText("Score: " + score, 20, 50);
			ctx.fillText("Time: " + time, 200, 50);
			
			if (time <= 0) { // ゲームオーバー処理
				clearInterval(gameLoop);
				canvas.removeEventListener("click", handleClick);
				ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2);
			}
			else {
				time -= 1 / 60; // 1秒間で60回呼ばれるので、1/60ずつ減らす
			}
		}

// エイリアンを生成
		function spawnAlien() {
			aliens.push(new Alien(Math.random() * (canvas.width - 50), 0, 30 + Math.floor(Math.random() * 20), 1 + Math.random()));
			setTimeout(spawnAlien, 400 + Math.floor(Math.random() * 600));
		}

// クリックされた時の処理
		function handleClick(event) {
			let clicked = false;
			for (let i = aliens.length - 1; i >= 0; i--) { // 後ろからループ
				if (aliens[i].isClicked(event.offsetX, event.offsetY)) { // クリックされたエイリアンを探す
					clicked = true;
					score += 1;
					aliens.splice(i, 1);
					break;
				}
			}

if (!clicked) {
				score -= 1;
			}
		}

init();
	</script>
</body>
</html>