Jeu d'esquive d'obstacles en JavaScript et HTML5 Canvas

24 0 Jeux skun Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Jeu d'esquive d'obstacles en JavaScript et HTML5 Canvas

Recommandé

18 December 2025

Chargeur de jeu Unity WebGL Slope Plus

25 August 2024

Effet de survol de navigation en CSS pur

6 September 2026

{"error":"Échec de la génération du titre : ce modèle models\/gemini-2.0-flash n'est plus disponible. Veuillez mettre à jour votre code pour utiliser models\/gemini-3.6-flash afin de bénéficier des dernières fonctionnalités et améliorations. Nous vous recommandons d'utiliser l'API Interactions."}

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

…