createjs 键盘按键控制

最新推荐文章于 2022-01-04 09:49:36 发布

飞驰的蜗牛牛

最新推荐文章于 2022-01-04 09:49:36 发布

阅读量232

点赞数

分类专栏： HTML5 文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/shuishou1000/article/details/122220156

版权

HTML5 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API创建一个简单的方向键(DPAD)控制示例，通过JavaScript监听键盘事件并响应上、下、左、右四个方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/easeljs-0.7.1.min.js" charset="utf-8"></script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
  <script type="text/javascript">
    var stage
    function init(){
      stage=new createjs.Stage("canvas")
      createjs.Ticker.addEventListener("tick",handler)
      createjs.Ticker.setFPS(60)
      start()
    }
    const ARROW_KEY_LEFT=37
    const ARROW_KEY_RIGHT=39
    const ARROW_KEY_UP=38
    const ARROW_KEY_DOWN=40
    function handler(e){
      stage.update()
    }

    function start(){
      window.onkeydown=onDPad
    }
    function onDPad(e){
      switch (e.keyCode) {
        case ARROW_KEY_DOWN:
           console.log("down");
          break;
          case ARROW_KEY_RIGHT:
             console.log("right");
            break;
            case ARROW_KEY_UP:
               console.log("up");
              break;
              case ARROW_KEY_LEFT:
                 console.log("left");
                break;
        

      }
    }
  </script>
</html>