Obstacle Dodge Game in JavaScript and HTML5 Canvas

23 0 Games skun Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Obstacle Dodge Game in JavaScript and HTML5 Canvas

Recommended

12 September 2026

Bloody Mary (Warning Flashing lights and jumpscares) DO NOT PLAY IF YOU GET SEZUIRES

20 June 2025

HTML Admin Dashboard Template

6 March 2025

Admin Dashboard Template HTML CSS

HTML

CSS

JS

// 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

…