HTML5 角色移动游戏：寻找宝箱

<script>
// 角色状态
var isTransformed = false;
// 监听鼠标双击事件
$('#character').dblclick(function() {
  transformCharacter();
});

// 监听键盘事件
$(document).keydown(function(event) {
  switch (event.keyCode) {
    case 37: // 左
      moveCharacter('left');
      break;
    case 38: // 上
      moveCharacter('up');
      break;
    case 39: // 右
      moveCharacter('right');
      break;
    case 40: // 下
      moveCharacter('down');
      break;
  }
});
// 角色移动
function moveCharacter(direction) {
  var character = $('#character');
  var currentPosition = character.position();
  var newPosition = {};
  switch (direction) {
    case 'left':
      newPosition = { top: currentPosition.top, left: currentPosition.left - 50 };
      character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_left.gif' : 'img/player_left.gif') + ')');
      break;
    case 'right':
      newPosition = { top: currentPosition.top, left: currentPosition.left + 50 };
      character.css('background-image', 'url(' + (isTransformed ? 'img/playerbig_right.gif' : 'img/player_right.gif') + ')');
      break;
    case 'up':
      newPosition = { top: currentPosition.top - 50, left: currentPosition.left };
      character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player1.gif') + ')');
      break;
    case 'down':
      newPosition = { top: currentPosition.top + 50, left: currentPosition.left };
      character.css('background-image', 'url(' + (isTransformed ? 'img/player1_big.gif' : 'img/player3.gif') + ')');
      break;
  }
  character.animate(newPosition, 200);
  checkTreasure();
}

// 角色变身
function transformCharacter() {
  isTransformed = !isTransformed;
  var character = $('#character');
  character.css('background-image', 'url(' + (isTransformed ? 'img/player2.gif' : 'img/player3.gif') + ')');
}
</script>
<script>
// 宝箱状态
var isTreasureFound = false;
// 设置宝箱位置
$('#treasure').css({ top: '300px', left: '500px' });

// 检查宝箱是否被找到
function checkTreasure() {
  var character = $('#character');
  var treasure = $('#treasure');
  var characterPosition = character.position();
  var treasurePosition = treasure.position();
  if (Math.abs(characterPosition.top - treasurePosition.top) <= 50 && Math.abs(characterPosition.left - treasurePosition.left) <= 50) {
    isTreasureFound = true;
    alert('恭喜你找到了宝箱！');
  }
}
</script>