HTML 游戏控制器



  • 定义和使用

    按下按钮移动红色方块:
        
  • 控制

    现在我们要控制红场。
    添加四个按钮,上、下、左和右。
    为每个按钮编写一个函数,以在选定的方向上移动组件。
    在组件构造函数中创建两个新属性,并将它们称为 speedX 和 speedY。这些属性被用作速度指示器。
    在组件构造函数中添加一个名为 newPos() 的函数,该函数使用 speedX 和 speedY 属性来更改组件的位置。
    在绘制组件之前,从 updateGameArea 函数调用 newpos 函数:
    <script>
    function component(width, height, color, x, y) {
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;
        this.x = x;
        this.y = y;
        this.update = function() {
            ctx = myGameArea.context;
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
        this.newPos = function() {
            this.x += this.speedX;
            this.y += this.speedY;
        }
    }
    
    function updateGameArea() {
        myGameArea.clear();
        myGamePiece.newPos();
        myGamePiece.update();
    }
    
    function moveup() {
        myGamePiece.speedY -= 1;
    }
    
    function movedown() {
        myGamePiece.speedY += 1;
    }
    
    function moveleft() {
        myGamePiece.speedX -= 1;
    }
    
    function moveright() {
        myGamePiece.speedX += 1;
    }
    </script>
    
    <button onclick="moveup()">UP</button>
    <button onclick="movedown()">DOWN</button>
    <button onclick="moveleft()">LEFT</button>
    <button onclick="moveright()">RIGHT</button>
    尝试一下
    组件具有控制其外观和移动的属性和方法。
  • 暂停移动

    如果你愿意,你可以让红色方块停止当你释放一个按钮。
    添加一个将速度指示器设置为 0 的功能。
    为了同时处理普通屏幕和触摸屏,我们将为这两种设备添加代码:
    <script>
    function stopMove() {
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
    }
    </script>
    
    <button omousedown="moveup()" onmouseup="stopMove()" ontouchstart="moveup()">UP</button>
    <button omousedown="movedown()" onmouseup="stopMove()" ontouchstart="movedown()">DOWN</button>
    <button omousedown="moveleft()" onmouseup="stopMove()" ontouchstart="moveleft()">LEFT</button>
    <button omousedown="moveright()" onmouseup="stopMove()" ontouchstart="moveright()">RIGHT</button>
    尝试一下
  • 键盘作为控制器

    我们也可以用键盘上的箭头键来控制红色方块。
    创建一个方法来检查是否按下了某个键,并将 myGameArea 对象的 key 属性设置为键代码。释放密钥时,将密钥属性设置为 false:
    var myGameArea = {
      canvas : document.createElement("canvas"),
      start : function() {
          this.canvas.width = 480;
          this.canvas.height = 270;
          this.context = this.canvas.getContext("2d");
          document.body.insertBefore(this.canvas, document.body.childNodes[0]);
          this.interval = setInterval(updateGameArea, 20);
          window.addEventListener('keydown', function (e) {
              myGameArea.key = e.keyCode;
          })
          window.addEventListener('keyup', function (e) {
              myGameArea.key = false;
          })
      },
      clear : function(){
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }
    如果按下其中一个箭头键,我们可以移动红色方块:
    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -1; }
      if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 1; }
      if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -1; }
      if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 1; }
      myGamePiece.newPos();
      myGamePiece.update();
    }
    尝试一下
  • 按下多个键

    如果同时按下多个键怎么办?
    在上面的示例中,组件只能水平或垂直移动。现在我们希望组件也沿对角线方向移动。
    为 myGameArea 对象创建一个 keys 数组,并为每个按下的键插入一个元素,并为其赋值为 true,该值将保持为 true,直到不再按下该键,该值在 keyup 事件侦听器函数中变为 false:
    var myGameArea = {
      canvas : document.createElement("canvas"),
      start : function() {
          this.canvas.width = 480;
          this.canvas.height = 270;
          this.context = this.canvas.getContext("2d");
          document.body.insertBefore(this.canvas, document.body.childNodes[0]);
          this.interval = setInterval(updateGameArea, 20);
          window.addEventListener('keydown', function (e) {
              myGameArea.keys = (myGameArea.keys || []);
              myGameArea.keys[e.keyCode] = true;
          })
          window.addEventListener('keyup', function (e) {
              myGameArea.keys[e.keyCode] = false;
          })
      },
      clear : function(){
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }
    
    function updateGameArea() {
      myGameArea.clear();
      myGamePiece.speedX = 0;
      myGamePiece.speedY = 0;
      if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
      if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
      if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
      if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
      myGamePiece.newPos();
      myGamePiece.update();
    }
    尝试一下
  • 使用鼠标光标作为控制器

    如果要使用鼠标光标控制红色方块,请在 myGameArea 对象中添加一个方法来更新鼠标的 x 和 y 坐标光标:
    var myGameArea = {
      canvas : document.createElement("canvas"),
      start : function() {
          this.canvas.width = 480;
          this.canvas.height = 270;
          this.canvas.style.cursor = "none"; //hide the original cursor
          this.context = this.canvas.getContext("2d");
          document.body.insertBefore(this.canvas, document.body.childNodes[0]);
          this.interval = setInterval(updateGameArea, 20);
          window.addEventListener('mousemove', function (e) {
              myGameArea.x = e.pageX;
              myGameArea.y = e.pageY;
          })
      },
      clear : function(){
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }
    然后我们可以使用鼠标光标移动红色方块:
    function updateGameArea() {
      myGameArea.clear();
      if (myGameArea.x && myGameArea.y) {
          myGamePiece.x = myGameArea.x;
          myGamePiece.y = myGameArea.y;
      }
      myGamePiece.update();
    }
    尝试一下
  • 触摸屏幕控制游戏

    我们也可以在触摸屏上控制红色方块。
    在 myGameArea 对象中添加一个方法,该方法使用触摸屏幕的 x 和 y 坐标:
    var myGameArea = {
      canvas : document.createElement("canvas"),
      start : function() {
          this.canvas.width = 480;
          this.canvas.height = 270;
          this.context = this.canvas.getContext("2d");
          document.body.insertBefore(this.canvas, document.body.childNodes[0]);
          this.interval = setInterval(updateGameArea, 20);
          window.addEventListener('touchmove', function (e) {
              myGameArea.x = e.touches[0].screenX;
              myGameArea.y = e.touches[0].screenY;
          })
      },
      clear : function(){
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }
    然后,如果用户触摸屏幕,我们可以移动红色方块,方法是使用与鼠标光标相同的代码:
    function updateGameArea() {
      myGameArea.clear();
      if (myGameArea.touchX && myGameArea.touchY) {
          myGamePiece.x = myGameArea.x;
          myGamePiece.y = myGameArea.y;
      }
      myGamePiece.update();
    }
    尝试一下
  • 画布上的控制器

    我们也可以在画布上绘制自己的按钮,并将其用作控制器:
    function startGame() {
      myGamePiece = new component(30, 30, "red", 10, 120);
      myUpBtn = new component(30, 30, "blue", 50, 10);
      myDownBtn = new component(30, 30, "blue", 50, 70);
      myLeftBtn = new component(30, 30, "blue", 20, 40);
      myRightBtn = new component(30, 30, "blue", 80, 40);
      myGameArea.start();
    }
    添加一个新函数,该函数可以判断组件(在本例中是一个按钮)是否被单击。
    首先添加事件侦听器来检查是否单击了鼠标按钮(mousedown 和 mouseup)。要处理触摸屏,还需要添加事件侦听器来检查屏幕是否被单击(touchstart 和 touchend):
    var myGameArea = {
      canvas : document.createElement("canvas"),
      start : function() {
          this.canvas.width = 480;
          this.canvas.height = 270;
          this.context = this.canvas.getContext("2d");
          document.body.insertBefore(this.canvas, document.body.childNodes[0]);
          this.interval = setInterval(updateGameArea, 20);
          window.addEventListener('mousedown', function (e) {
              myGameArea.x = e.pageX;
              myGameArea.y = e.pageY;
          })
          window.addEventListener('mouseup', function (e) {
              myGameArea.x = false;
              myGameArea.y = false;
          })
          window.addEventListener('touchstart', function (e) {
              myGameArea.x = e.pageX;
              myGameArea.y = e.pageY;
          })
          window.addEventListener('touchend', function (e) {
              myGameArea.x = false;
              myGameArea.y = false;
          })
      },
      clear : function(){
          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
    }
    现在 myGameArea 对象的属性告诉我们单击的 x 和 y 坐标。我们使用 see 属性来检查是否在我们的一个蓝色按钮上执行了单击。
    新方法称为 clicked,它是组件构造函数的一个方法,它检查组件是否被单击。
    在 updateGameArea 函数中,如果单击其中一个蓝色按钮,我们将采取必要的操作:
    function component(width, height, color, x, y) {
      this.width = width;
      this.height = height;
      this.speedX = 0;
      this.speedY = 0;
      this.x = x;
      this.y = y;
      this.update = function() {
          ctx = myGameArea.context;
          ctx.fillStyle = color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
      }
      this.clicked = function() {
          var myleft = this.x;
          var myright = this.x + (this.width);
          var mytop = this.y;
          var mybottom = this.y + (this.height);
          var clicked = true;
          if ((mybottom < myGameArea.y) || (mytop > myGameArea.y)
           || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
              clicked = false;
          }
          return clicked;
      }
    }
    
    function updateGameArea() {
      myGameArea.clear();
      if (myGameArea.x && myGameArea.y) {
          if (myUpBtn.clicked()) {
              myGamePiece.y -= 1;
          }
          if (myDownBtn.clicked()) {
              myGamePiece.y += 1;
          }
          if (myLeftBtn.clicked()) {
              myGamePiece.x += -1;
          }
          if (myRightBtn.clicked()) {
              myGamePiece.x += 1;
          }
      }
      myUpBtn.update();
      myDownBtn.update();
      myLeftBtn.update();
      myRightBtn.update();
      myGamePiece.update();
    }
    尝试一下