以下は、JavaScript版のチートシートです。Pythonのpygameライブラリの機能を、HTML5のとJavaScriptを使用して同様の動作を再現する形で書き換えました。
基本のテンプレート
【ルール】
画面を出力するためには、タグとgetContext('2d')を使います。
requestAnimationFrameを使って、フレームごとに画面を更新します。
[htmlサンプル]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>JavaScript版サンプル</title>
<style>
body { margin: 0; padding:0; background: #000; color: #fff; }
canvas { display: block; margin:0 auto; background: #333; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>
// 書式
const canvas = document.createElement('canvas');
canvas.width = 800; // 画面幅
canvas.height = 600; // 画面高さ
document.body.appendChild(canvas); // HTMLのbodyにcanvasを追加
const ctx = canvas.getContext('2d'); // 2D描画コンテキストを取得
【JavaScriptサンプル】
script.js
// -----------------------------
// メイン処理
// -----------------------------
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
function main() {
let px = 120;
let py = 100;
// -----------------------------
// アニメ処理
// -----------------------------
function draw() {
// 1. 画面のクリア
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height); // 背景を白
// 2. 図形の描画
ctx.fillStyle = 'rgb(10, 10, 10)';
ctx.beginPath();
ctx.arc(px, py, 50, 0, Math.PI * 2, false); // ● 円の描画
ctx.fill();
ctx.strokeStyle = 'red';
ctx.strokeRect(10, 100, 50, 50); // ■ 四角の描画
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, 200);
ctx.lineTo(100, 300); // 線の描画
ctx.stroke();
requestAnimationFrame(draw); // フレームごとに更新
}
draw();
}
円の描画
【ルール】
ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise)
x, y: 円の中心座標
radius: 半径
startAngle, endAngle: 開始角度、終了角度（ラジアン）
counterclockwise: 反時計回りかどうか
【サンプル】
コードをコピーする
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(320, 240, 100, 0, Math.PI * 2, false); // 中心(320,240)、半径100
ctx.fill();
四角形の描画
【ルール】
ctx.fillRect(x, y, width, height)
ctx.strokeRect(x, y, width, height)
【サンプル】
コードをコピーする
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 300, 200); // 塗りつぶした四角
ctx.strokeStyle = 'red';
ctx.strokeRect(10, 10, 300, 200); // 枠線だけの四角
線の描画
【ルール】
ctx.beginPath()
ctx.moveTo(x, y)：線の開始位置
ctx.lineTo(x, y)：線の終了位置
ctx.stroke()
【サンプル】
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(640, 480);
ctx.stroke();
楕円の描画
【ルール】
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
x, y: 中心座標
radiusX, radiusY: X方向、Y方向の半径
rotation: 回転角度（ラジアン）
startAngle, endAngle: 開始角度、終了角度（ラジアン）
【サンプル】
ctx.fillStyle = 'magenta';
ctx.beginPath();
ctx.ellipse(500, 300, 100, 50, 0, 0, Math.PI * 2);
ctx.fill();
テキストの描画
【ルール】
ctx.font = 'font-size font-family'
ctx.fillText(text, x, y)
【サンプル】
ctx.font = '55px Arial'; // フォント設定
ctx.fillStyle = 'blue';
ctx.fillText('Hello World', 20, 100); // (20, 100)の位置に文字を表示
キー入力
【ルール】
window.addEventListener('keydown', callbackFunction)
キーが押されるたびにイベントが発生する。
【サンプル】
window.addEventListener('keydown', function(event) {
if (event.key === 'ArrowLeft') {
console.log('←キーが押されました');
}
});
マウス入力
【ルール】
canvas.addEventListener('mousedown', callbackFunction)
【サンプル】
canvas.addEventListener('mousedown', function(event) {
const x = event.offsetX;
const y = event.offsetY;
console.log(`X: ${x}, Y: ${y}, ボタン: ${event.button}`);
});
画像の表示
【ルール】
const img = new Image()
img.src = '画像パス'
ctx.drawImage(img, x, y, width, height)
【サンプル】
const img = new Image();
img.src = 'hero.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 50, 50);
}
音声の再生
【ルール】
const audio = new Audio('ファイル名')
audio.play()
【サンプル】
const audio = new Audio('sound.wav');
audio.play();
日時の取得
【ルール】
new Date()を使って日時を取得する。
.getFullYear(), .getMonth(), .getDate() などで各要素を取得。
【サンプル】
const now = new Date();
console.log('年:', now.getFullYear());
console.log('月:', now.getMonth() + 1); // 0が1月なので+1
console.log('日:', now.getDate());
当たり判定
【ルール】
円と円の当たり判定
Math.sqrt((x1 - x2)**2 + (y1 - y2)**2) < r1 + r2
【サンプル】
function isCollision(x1, y1, r1, x2, y2, r2) {
const dx = x1 - x2;
const dy = y1 - y2;
const distance = Math.sqrt(dx * dx + dy * dy);
return distance < r1 + r2;
}
フレームレートの制御
【ルール】
フレームレートの制御はrequestAnimationFrameを使う。
フレームの制御を行う場合は、setIntervalを使うこともある。
【サンプル】
let frame = 0;
function draw() {
if (frame % 30 === 0) {
console.log('30フレームごとに実行');
}
frame++;
requestAnimationFrame(draw);
}
draw();