jquery+html5 3--鼠标和键盘控制

最新推荐文章于 2025-07-14 11:00:36 发布

原创最新推荐文章于 2025-07-14 11:00:36 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html5 #function #游戏 #div

编程语言专栏收录该内容

76 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas结合鼠标与键盘事件来控制绘图，包括两个方块的绘制：一个根据鼠标位置移动，另一个依据键盘方向键移动。通过此教程，读者将学会如何监听mousemove和keydown事件，并在Canvas上实时更新图形。

这里例子主要有以下几点

1.if语句

2.新的事件mousemove，keydown，以及e参数

3.2个不同的物体显示在canva里，多个也是这个道理。

4.用id标签选择器直接选择一个页面元素是可行的，似乎不能放在head部分。放body后面就可以。

5.mousemove和keydown事件处理了内部的变量，animate函数把这些内部变量的改变显示出来。

6.大家可以试下多人游戏，每个人控制一个方块。

<!DOCTYPE html>
<html>
<head>
    <title>鼠标和键盘控制</title>
    <script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
      var x = 250;
      var mousex, mousey;
      var canvas;
      var ctx;


      $(document).ready(function () {
           canvas = $(document).get(0).getElementById("MyCanvas");

          if (canvas.getContext) {
              ctx = canvas.getContext("2d");

              //animate();

              }
      });
      function animate()
      {
          //x = x + 1;
          ctx.clearRect(0, 0, 500, 500);
          //由键盘控制的方块
          ctx.fillRect(x, 250, 50, 50);

         // 随鼠标运动的方块
          ctx.fillRect(mousex, mousey, 50, 50);
          //setTimeout(animate, 100);
      };
</script>
</head>
<body >
      <div>
        <canvas id="MyCanvas" width="500" height="500" > </canvas>
      </div>

</body>
     <script type="text/javascript">
         $('#MyCanvas').mousemove(function (e) {
             mousex = e.pageX;
             mousey = e.pageY;
             animate();
         });
         //注意这里是document，canvas应该也能捕获keydown事件，留以后试吧
         $(document).keydown(function (e) {
             var k = e.keyCode;
             //如果不知道按键的代码，用alert输出看
            // alert(k);
             if (k == 37)
                 x = x - 2;
             if (k == 39)
                 x = x + 2;
             animate();
     });
    </script>
</html>