creatjs 键盘控制

最新推荐文章于 2025-06-11 18:58:00 发布

飞驰的蜗牛牛

最新推荐文章于 2025-06-11 18:58:00 发布

阅读量241

点赞数

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

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

版权

HTML5 专栏收录该内容

16 篇文章

订阅专栏

<!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">
    const ARROW_KEY_LEFT=37
    const ARROW_KEY_RIGHT=39
    var stage,padel
    var leftKeyDown,rightKeyDown=false
    function init(){
      stage=new createjs.Stage("canvas")
      createjs.Ticker.addEventListener("tick",tickHandler)
      createjs.Ticker.setFPS(60)
       start()
    }
    function start(){
      padel=new createjs.Shape()
      padel.graphics.beginFill("red").drawRect(0,0,100,20)

      padel.width=100
      padel.x=padel.nextX=0
      padel.y=stage.canvas.height-20
      stage.addChild(padel)

      window.onkeydown=movePadel
      window.onkeyup=stopPadel
    }
    function movePadel(e){
    //  e=!e?window.event:e
      switch (e.keyCode) {

        case ARROW_KEY_LEFT:
          leftKeyDown=true
          break;
        case ARROW_KEY_RIGHT:
            rightKeyDown=true
            break;
        default:

      }
    }
    function stopPadel(e){
    //  e=!e?window.event:e
        switch (e.keyCode) {
          case 37:
          leftKeyDown=false
            break;
          case 39:
           rightKeyDown=false
           break
          default:

        }
      }
      function update(){
        var nextX=padel.x
       if (leftKeyDown) {
         nextX=padel.x-10
         if (nextX<0) {
           nextX=0
         }
       }else if(rightKeyDown)
       {
         nextX=padel.x+10
         if (nextX>stage.canvas.width-padel.width) {
           nextX=stage.canvas.width-padel.width
         }
       }
       padel.nextX=nextX
      }

    function render(){
      padel.x=padel.nextX;
    }
    function tickHandler(e){
      update()
      render()
      stage.update()
    }

  </script>
</html>