var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

canvas.width = 480;
canvas.height = 320;

// 音楽の再生 (※音量に注意)
var bgm = new Audio('https://example.com/dasaku-game/bgm.mp3');
bgm.volume = 0.1;
bgm.loop = true;
bgm.play();

// キャラクターの画像
var characterImg = new Image();
characterImg.src = 'https://example.com/dasaku-game/character.png';

// キャラクターオブジェクト
var character = {
  x: 50,
  y: 200,
  width: 32,
  height: 32,
  speed: 5,
  jumpPower: 10,
  jumping: false,
  jumpFrame: 0,
  direction: 'right'
};

// キー押下時の処理
var keysDown = {};
addEventListener('keydown', function (e) {
  keysDown[e.keyCode] = true;
});
addEventListener('keyup', function (e) {
  delete keysDown[e.keyCode];
});

// レベルオブジェクト
var level = {
  width: canvas.width,
  height: canvas.height,
  color: '#ffccff',
  platforms: [
    { x: 0, y: 250, width: 200},
    { x: canvas.width - 200, y: 250, width: 200},
    { x: 100, y: 150, width: 200},
    { x: canvas.width - 300, y: 150, width: 200},
    { x: 0, y: canvas.height - 50, width: 100},
    { x: canvas.width - 100, y: canvas.height - 50, width: 100}
  ],
  update: function () {
    // キャラクターとの当たり判定
    for (var i = 0; i < this.platforms.length; i++) {
      var platform = this.platforms[i];
      if (character.x < platform.x + platform.width &&
        character.x + character.width > platform.x &&
        character.y < platform.y + 5 &&
        character.y + character.height > platform.y) {
        // 落下中であれば着地
        if (character.jumping && character.jumpFrame > 5) {
          character.jumping = false;
          character.jumpFrame = 0;
        }
        // 上昇中であれば反転
        if (character.jumping) {
          character.direction = character.direction === 'left' ? 'right' : 'left';
        }
        // プラットフォームの上に乗っている状態にする
        character.y = platform.y - character.height;
      }
    }
    // ジャンプ処理
    if (32 in keysDown && !character.jumping) {
      character.jumping = true;
    }
    if (character.jumping) {
      character.y -= character.jumpPower;
      character.jumpFrame++;
      if (character.jumpFrame > 20) {
        character.jumping = false;
        character.jumpFrame = 0;
      }
    }
    // 左右移動処理
    if (37 in keysDown) {
      character.direction = 'left';
      character.x -= character.speed;
    }
    if (39 in keysDown) {
      character.direction = 'right';
      character.x += character.speed;
    }
  },
  draw: function () {
    // 背景色の描画
    ctx.fillStyle = this.color;
    ctx.fillRect(0, 0, this.width, this.height);
    // プラットフォームの描画
    for (var i = 0; i < this.platforms.length; i++) {
      var platform = this.platforms[i];
      ctx.fillStyle = '#333333';
      ctx.fillRect(platform.x, platform.y, platform.width, 5);
    }
    // キャラクターの描画
    ctx.drawImage(characterImg, 0, 0, character.width, character.height, character.x, character.y, character.width, character.height);
  }
};

// メインループ
var main = function () {
  level.update();
  level.draw();
  requestAnimationFrame(main);
};

main();