JavaScriptとHTMLを使って、簡単なスクロールアクションゲームっぽいのを作ってみました。このコードは、スクロールする背景、プレイヤーの移動、ジャンプ、敵キャラクターを含んでいます。シンプルなゲームの土台として使えるので、さらに発展させることも可能です。
スペースキーを押すとゲームが開始し、A、S、W、Zキーでキャラクターを操作し、Nキーでジャンプできます。※スマホ、タブレットでは遊べません！
HTML
まず、HTMLファイルを作成します。このファイルでは、canvas要素を使ってゲームを表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールアクションゲーム</title>
<style>
canvas {
background-color: #87CEEB;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>JavaScript
次に、game.jsファイルを作成して、ゲームのロジックを実装します。
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// ゲームの設定
const player = {
x: 50,
y: 300,
width: 30,
height: 30,
speed: 5,
dx: 0,
dy: 0,
gravity: 0.8,
jumpPower: -15,
isJumping: false,
isGrounded: true
};
const keys = {
left: false,
right: false,
up: false,
down: false,
jump: false
};
let isGameRunning = false;
let enemies = [];
// 敵キャラクターを生成
function createEnemy(x, y) {
return {
x: x,
y: y,
width: 30,
height: 30,
speed: 2,
dx: -2
};
}
// 敵キャラクターを配置
enemies.push(createEnemy(400, 300));
enemies.push(createEnemy(700, 300));
// キーボードの操作
document.addEventListener('keydown', (e) => {
if (e.code === 'KeyA') keys.left = true;
if (e.code === 'KeyS') keys.right = true;
if (e.code === 'KeyW') keys.up = true;
if (e.code === 'KeyZ') keys.down = true;
if (e.code === 'KeyN' && player.isGrounded) {
player.dy = player.jumpPower;
player.isJumping = true;
player.isGrounded = false;
}
if (e.code === 'Space') isGameRunning = true;
});
document.addEventListener('keyup', (e) => {
if (e.code === 'KeyA') keys.left = false;
if (e.code === 'KeyS') keys.right = false;
if (e.code === 'KeyW') keys.up = false;
if (e.code === 'KeyZ') keys.down = false;
});
// プレイヤーの動き
function movePlayer() {
if (keys.left) {
player.dx = -player.speed;
} else if (keys.right) {
player.dx = player.speed;
} else {
player.dx = 0;
}
player.dy += player.gravity;
if (player.y + player.height > canvas.height) {
player.y = canvas.height - player.height;
player.dy = 0;
player.isGrounded = true;
}
player.x += player.dx;
player.y += player.dy;
}
// 敵の動き
function moveEnemies() {
enemies.forEach(enemy => {
enemy.x += enemy.dx;
// 画面外に出たら敵を消す
if (enemy.x + enemy.width < 0) {
enemy.x = canvas.width + Math.random() * 200;
}
});
}
// ゲームを描画
function drawPlayer() {
ctx.fillStyle = 'red';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function drawEnemies() {
ctx.fillStyle = 'green';
enemies.forEach(enemy => {
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// ゲームのループ
function gameLoop() {
if (isGameRunning) {
clearCanvas();
movePlayer();
moveEnemies();
drawPlayer();
drawEnemies();
}
requestAnimationFrame(gameLoop);
}
// ゲームスタート
gameLoop();説明
- HTML:
canvas要素はゲームの描画エリアです。背景色を空の青に設定し、画面中央に表示します。
- JavaScript:
playerオブジェクトは、プレイヤーキャラクターの位置や速度、重力、ジャンプの状態などを管理します。- キーボードの入力 (
keydown,keyup) を監視して、プレイヤーの動きを制御します。 - 敵キャラクターは
enemies配列に格納され、画面を左から右へ移動します。画面外に出ると再度右端から出現します。 isGameRunningフラグは、スペースキーでゲームが開始されるかを制御します。
使い方
- このコードをローカルに保存して、HTMLファイルとJavaScriptファイルを同じディレクトリに置いてください。
- ブラウザでHTMLファイルを開くと、ゲームが表示されます。
- スペースキーを押すとゲームが開始し、A、S、W、Zキーでキャラクターを操作し、Nキーでジャンプできます。
これをベースにして、さらに複雑なゲーム要素を追加してみてください。