master

分支 (1)

管理

管理

master

web
/
jq20230410.html

<!DOCTYPE html>
<html>
<head>
    <title>游戏角色操控</title>
    <meta charset="utf-8">
    <style>
        #player {
            position: absolute;
            left: 0;
            top: 0;
        }
        body {
    background-color: black;
}

    </style>
</head>
<body>
    <img id="player" src="player.gif">
    <script src="jQuery.js"></script>
    <script>
        $(function() {
  var $player = $('#player');
  var isBig = false; // 是否变身
  var timer = null; // 按键长按计时器

  $(document).on('keydown', function(event) {
    var left = parseInt($player.css('left')),
        top = parseInt($player.css('top'));

    switch (event.keyCode) {
      case 37: // 左键
        clearInterval(timer);
        $player.attr('src', isBig ? 'playerbig_left.gif' : 'player_left.gif');
        $player.css('left', left - 10 + 'px');
        break;
      case 38: // 上键
        clearInterval(timer);
        $player.attr('src', isBig ? 'playerbig.gif' : 'player.gif');
        $player.css('top', top - 10 + 'px');
        break;
      case 39: // 右键
        clearInterval(timer);
        $player.attr('src', isBig ? 'playerbig_right.gif' : 'player_right.gif');
        $player.css('left', left + 10 + 'px');
        break;
      case 40: // 下键
        clearInterval(timer);
        $player.attr('src', isBig ? 'playerbig.gif' : 'player.gif');
        $player.css('top', top + 10 + 'px');
        break;
    }

    // 监听按键长按事件
    $(document).on('keyup', function(event) {
      clearInterval(timer);
    }).on('keydown', function(event) {
      var direction = event.keyCode;
      clearInterval(timer);
      timer = setInterval(function() {
        switch (direction) {
          case 37: // 左键
            $player.attr('src', isBig ? 'playerbig_left.gif' : 'player_left.gif');
            $player.css('left', left - 5 + 'px');
            break;
          case 38: // 上键
            $player.attr('src', isBig ? 'playerbig.gif' : 'player.gif');
            $player.css('top', top - 5 + 'px');
            break;
          case 39: // 右键
            $player.attr('src', isBig ? 'playerbig_right.gif' : 'player_right.gif');
            $player.css('left', left + 5 + 'px');
            break;
          case 40: // 下键
            $player.attr('src', isBig ? 'playerbig.gif' : 'player.gif');
            $player.css('top', top + 5 + 'px');
            break;
        }
      }, 50);
    });
  });

  $(document).on('dblclick', '#player', function(event) {
    isBig = !isBig;
    $player.attr('src', isBig ? 'playerbig.gif' : 'player.gif');
  });

  $(document).on('click', function(event) {
    var x = event.pageX,
        y = event.pageY,
        left = parseInt($player.css('left')),
        top = parseInt($player.css('top'));

    if (x < left) {
      $player.attr('src', isBig ? 'playerbig_left.gif' : 'player_left.gif');
      $player.animate({
        left: x + 'px'
      });
    } else {
      $player.attr('src', isBig ? 'playerbig_right.gif' : 'player_right.gif');
      $player.animate({
        left: x + 'px'
      });
    }

    $player.animate({
      top: y + 'px'
    });
  });
});

    </script>
</body>
</html>