はじめに
今年もアドベントカレンダーの時期がやってきたので、昨年・一昨年に続きクリスマスゲームを作ってみました！
PC・スマートフォンから遊べます
過去作品はこちら：
すぐ遊びたい方はこちら
🎮 ゲーム概要 — サンタジャンプゲーム
ゲームのイメージはこんな感じです：
- 画面下のサンタを操作し、左右へスクロールする地面の上をジャンプで進みます
- 高さがランダムに変化する地面をジャンプで乗り越えます
- 星（★）を取ると +5点
- スコアが 20点増えるごとにゲーム速度が1アップ
- 落下 or 高い地面に衝突するとゲームオーバー
- ハイスコアは自動保存
⭐ 今回力を入れたポイント
1. 無限スクロール地面の実装
地面が途切れないよう、画面右端より先に地面ブロックを自動生成しています
高さは前の地面から ±2ブロック以内 でランダムに変化するようにしており、サンタのジャンプ力と整合するように制御しています
const changeBlocks = Math.floor(Math.random() * 5) - 2; // -2〜+2
const newHeight = Math.floor(
Math.max(blockHeight, Math.min(canvas.height - blockHeight,
lastHeight + changeBlocks * blockHeight
)) / blockHeight
) * blockHeight;
2. サンタのジャンプ判定調整（自然に見える“着地”）
着地判定を「サンタの足元（下3分の1）が地面の上に来たらOK」とすることで、
視覚的に乗れているのに判定されない というストレスを解消しました
const santaFootY = santa.y + santa.height * (2 / 3);
if (santa.isJumping && santa.jumpPower >= 0) {
if (santaFootY <= nextGroundTop + 10 && santaFootY >= nextGroundTop - 20) {
santa.y = nextGroundTop - santa.height;
santa.isJumping = false;
}
}
3. スコアに応じた段階的な速度上昇
スコアが20点増えるごとに速度が1上昇します
「プレイが進むほど難しくなる」シンプルでわかりやすいゲームバランスにしました
if (currentScoreFloor - lastSpeedIncreaseScore >= gameState.speedIncreaseInterval) {
gameState.gameSpeed++;
lastSpeedIncreaseScore += gameState.speedIncreaseInterval;
}
4. ハイスコア保存（localStorage）
結果画面でスコアが更新されていれば、自動的にlocalStorageへ保存します
localStorage.setItem('santaJumpHighScore', gameState.highScore);
5. 星アイテム取得の視覚演出
星を取った瞬間にサンタの頭上に 「+5」 を表示し、
上にふわっと移動しながらフェードアウトする演出を追加しました
scoreTexts.push({
x: santa.x + santa.width / 2,
y: santa.y,
text: `+${bonusScore}`,
life: 60,
alpha: 1.0
});
技術的な工夫ポイント
● ゲームループと画面状態の管理
gameState.currentScreen によって
「タイトル → カウントダウン → ゲーム → 結果」の流れを制御しています
const gameState = {
currentScreen: 'title',
score: 0,
gameSpeed: 4,
highScore: 0
};
● カウントダウン開始（3・2・1・GO!）
開始時に3秒の準備時間を入れています
ゲーム要素はその間非表示にし、誤操作を防止しました
● レスポンシブ対応
画面サイズ変更に応じてキャンバスサイズを再計算し、
スマホでも違和感のない位置・大きさになるよう調整しています
まとめ
今回のゲームでは以下を中心に工夫しました：
- 無限スクロール地面のブロック単位制御
- 視覚と一致するジャンプ判定で操作ストレス軽減
- スコアに応じた自然な難易度上昇
- localStorageを使ったハイスコア保存
- アイテム取得時の視覚演出で爽快感アップ
🎅 ゲームはこちらから遊べます
See the Pen Qiita31_santagame04 by nojima (@noji505) on CodePen.
フルスクリーンで遊びたい方はこちら
良いクリスマスをお過ごしください♪