逃げてステージアップ - javascript　ゲーム制作（Blue）

前のエピソード――テトリス

ゴールを一瞬だけ触るとステージの一気に上昇を防げる。再スタートを一回押してね

<!DOCTYPE html>

<head>

<title>パズルアドベンチャー</title>

<style>

body { font-family: Arial, sans-serif; text-align: center; background: #eee; }

#gameCanvas { border: 1px solid #000; display: block; margin: 20px auto; }

#message { font-size: 20px; margin: 20px; }

.button { padding: 10px; margin: 5px; }

</style>

</head>

<body>

<h1>パズルアドベンチャー</h1>

<div id="message">ステージ 1: ゴールを目指せ！</div>

<button class="button" onclick="startGame()">再スタート</button>

const canvas = document.getElementById("gameCanvas");

const ctx = canvas.getContext("2d");

const gridSize = 30;

const rows = 20; // 行数を増やす

const cols = 20; // 列数を増やす

let player;

let goal;

let obstacles = [];

let enemies = [];

let stage = 1;

let gameStarted = false;

function startGame() {

player = { x: 0, y: 0 };

goal = { x: cols - 1, y: rows - 1 };

obstacles = generateObstacles();

enemies = generateEnemies();

gameStarted = true;

document.getElementById("message").innerText = `ステージ ${stage}: ゴールを目指せ！`;

draw();

setInterval(updateEnemies, 500); // 敵の動きを更新

}

function generateObstacles() {

const obstacleCount = Math.floor(stage * 2) + 5; // ステージに応じて障害物の数を増やす

const tempObstacles = [];

while (tempObstacles.length < obstacleCount) {

const x = Math.floor(Math.random() * cols);

const y = Math.floor(Math.random() * rows);

if ((x !== player.x || y !== player.y) && (x !== goal.x || y !== goal.y)) {

tempObstacles.push({ x, y });

}

return tempObstacles;

}

function generateEnemies() {

const enemyCount = Math.floor(stage / 2) + 2; // ステージに応じて敵の数を増やす

const tempEnemies = [];

for (let i = 0; i < enemyCount; i++) {

let x, y;

do {

x = Math.floor(Math.random() * cols);

y = Math.floor(Math.random() * rows);

} while ((x === player.x && y === player.y) || (x === goal.x && y === goal.y));

tempEnemies.push({ x, y });

}

return tempEnemies;

}

function updateEnemies() {

enemies.forEach(enemy => {

const direction = Math.floor(Math.random() * 4);

switch (direction) {

case 0: // 上

if (isValidMove(enemy.x, enemy.y - 1)) enemy.y--;

break;

case 1: // 下

if (isValidMove(enemy.x, enemy.y + 1)) enemy.y++;

break;

case 2: // 左

if (isValidMove(enemy.x - 1, enemy.y)) enemy.x--;

break;

case 3: // 右

if (isValidMove(enemy.x + 1, enemy.y)) enemy.x++;

break;

}

});

draw();

checkCollisions();

}

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawGrid();

drawPlayer();

drawGoal();

drawObstacles();

drawEnemies();

checkWin();

}

function drawGrid() {

ctx.fillStyle = "#ddd";

for (let i = 0; i < rows; i++) {

for (let j = 0; j < cols; j++) {

ctx.strokeRect(j * gridSize, i * gridSize, gridSize, gridSize);

}

function drawPlayer() {

ctx.fillStyle = "#0DC2FF";

ctx.fillRect(player.x * gridSize, player.y * gridSize, gridSize, gridSize);

}

function drawGoal() {

ctx.fillStyle = "#FF0D35";

ctx.fillRect(goal.x * gridSize, goal.y * gridSize, gridSize, gridSize);

}

function drawObstacles() {

ctx.fillStyle = "#555";

obstacles.forEach(obstacle => {

ctx.fillRect(obstacle.x * gridSize, obstacle.y * gridSize, gridSize, gridSize);

});

}

function drawEnemies() {

ctx.fillStyle = "#FFDD00";

enemies.forEach(enemy => {

ctx.fillRect(enemy.x * gridSize, enemy.y * gridSize, gridSize, gridSize);

});

}

function checkWin() {

if (player.x === goal.x && player.y === goal.y) {

stage++; // ステージを1つ上げる

document.getElementById("message").innerText = `ステージ ${stage} に進みます！`;

setTimeout(startGame, 2000); // 2秒後に次のステージを開始

}

function checkCollisions() {

enemies.forEach(enemy => {

if (player.x === enemy.x && player.y === enemy.y) {

gameStarted = false;

document.getElementById("message").innerText = "敵に捕まった！ゲームオーバー！";

}

});

}

document.addEventListener("keydown", (event) => {

if (gameStarted) {

let newX = player.x;

let newY = player.y;

if (event.key === "ArrowUp") newY--;

else if (event.key === "ArrowDown") newY++;

else if (event.key === "ArrowLeft") newX--;

else if (event.key === "ArrowRight") newX++;

if (isValidMove(newX, newY)) {

player.x = newX;

player.y = newY;

draw();

}

});

function isValidMove(x, y) {

if (x < 0 || x >= cols || y < 0 || y >= rows) return false;

for (const obstacle of obstacles) {

if (obstacle.x === x && obstacle.y === y) return false;

}

return true;

}

window.onload = startGame;

</script>

</body>

</html>

作者を応援しよう！

ハートをクリックで、簡単に応援の気持ちを伝えられます。（ログインが必要です）

応援したユーザー

javascript　ゲーム制作 Blue @ails

★で称える

この小説が面白かったら★をつけてください。おすすめレビューも書けます。

フォローしてこの作品の続きを読もう

この小説のおすすめレビューを見る

この小説のタグ

プログラム

作者

Blue @ails

テキトーに書いている変な人です。主に始めたての人のやつを読みます。 noteやってます。ぜひ見に来てください。 https://note.com/tender_liger6035/もっと見る

作者を応援しよう！

応援したユーザー

応援すると応援コメントも書けます

javascript　ゲーム制作 Blue @ails

★で称える

この小説のタグ

作者

Blue @ails

近況ノート

誰も書かない「真実」日航123便はなぜ墜落したのか『著者　森永卓郎氏』 5

【待望の後半戦】別の記事サイトでハート20人超えの記事の後編がやっと完成しました。あと半年がタイムリミット、あなたのお給料がどんどん吸われていきます。後編

【緊急】日銀が利上げをする可能性、私生活・経済に大打撃

１６進化もするモンスターたちと、遊んで、育てて、クリアしろ！

カードと猫と〈プレモン〉世界ニューゲーム

底辺男子校生、ゼロから始める本気のヲタ芸！

アオハル！踊れ文芸部〜男子校、カネも彼女もなかりけり〜

作者を応援しよう！

応援したユーザー

応援すると応援コメントも書けます

フォローしてこの作品の続きを読もう

作者

近況ノート

誰も書かない「真実」日航123便はなぜ墜落したのか『著者 森永卓郎氏』 5

【待望の後半戦】別の記事サイトでハート20人超えの記事の後編がやっと完成しました。 あと半年がタイムリミット、あなたのお給料がどんどん吸われていきます。後編

【緊急】日銀が利上げをする可能性、私生活・経済に大打撃

関連小説

楽に生きろ／Blue

考えさせられるような文学的作品を必ず作ってみせる！！！【短編小説】／Blue

世の中はこう考えると楽になる：ひろゆき流の思考術と生き方／Blue

「経済と政治がわかる！未来をつかむビジネスの教科書」／Blue

命[メイ]／Blue

「成功の法則：最速でキャリアを加速させる10のビジネス戦略」／Blue

ネクスト掲載小説

文字サイズ

背景色

フォント

組み方向

応援の気持ちを届けよう

フォロー機能を活用しよう

フォロー機能を活用しよう

誰も書かない「真実」日航123便はなぜ墜落したのか『著者　森永卓郎氏』 5

【待望の後半戦】別の記事サイトでハート20人超えの記事の後編がやっと完成しました。あと半年がタイムリミット、あなたのお給料がどんどん吸われていきます。後編