Juego de esquivar obstáculos en JavaScript y HTML5 Canvas

25 0 skun Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Juego de esquivar obstáculos en JavaScript y HTML5 Canvas

Recomendado

18 September 2026

HTML5

21 July 2025

Formulario de inicio de sesión HTML con fondo geométrico

8 May 2025

botón de escaneo

HTML

CSS

// canvas要素と2Dコンテキストを取得
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// プレイヤーの初期設定
let player = {
x: canvas.width / 2 - 15, // x座標
y: canvas.height - 30, // y座標
width: 30,
height: 30,
speed: 5
};

// 障害物の配列
let obstacles = [];
let obstacleSpeed = 2;

// キー入力の状態
let rightPressed = false;
let leftPressed = false;

document.addEventListener('keydown', (e) => {
if (e.key === 'Right' || e.key === 'ArrowRight') {
rightPressed = true;
}
if (e.key === 'Left' || e.key === 'ArrowLeft') {
leftPressed = true;
}
});

document.addEventListener('keyup', (e) => {
if (e.key === 'Right' || e.key === 'ArrowRight') {
rightPressed = false;
}
if (e.key === 'Left' || e.key === 'ArrowLeft') {
leftPressed = false;
}
});

// 障害物を生成する関数
function createObstacle() {
let obstacleX = Math.random() * (canvas.width - 20);
obstacles.push({ x: obstacleX, y: 0, width: 20, height: 20 });
}

// メインのゲームループ
function gameLoop() {
// 画面をクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);

// プレイヤーの移動
if (rightPressed && player.x < canvas.width - player.width) {
player.x += player.speed;
}
if (leftPressed && player.x > 0) {
player.x -= player.speed;
}

// 障害物を描画・移動
ctx.fillStyle = 'red';
for (let i = 0; i < obstacles.length; i++) {
let obs = obstacles[i];
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
obs.y += obstacleSpeed;

// 当たり判定
if (player.x < obs.x + obs.width &&
player.x + player.width > obs.x &&
player.y < obs.y + obs.height &&
player.y + player.height > obs.y) {
alert('ゲームオーバー');
document.location.reload(); // ゲームをリロード
return;
}
}

// 次のフレームを要求
requestAnimationFrame(gameLoop);
}

// 1秒ごとに障害物を生成
setInterval(createObstacle, 1000);

// ゲームループを開始
gameLoop();

Comments 0

…