html5 canvas移動元素

Question

我正在使用HTML5和JS開發賽車游戲。 我正在嘗試使用箭頭鍵移動汽車。 但這不起作用。

您將如何在畫布中移動元素，並且在移動元素之前是否需要清除整個畫布窗口？

碼：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var yCoordinate = 115;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var distance = 10;
var speed = 0.5;
var angle = 25;

var car = new Image();
car.src = "./images/p1.png";

startGame();

function startGame(){
  requestAnimationFrame(moveLane);
}

function moveLane(){
  clearCanvas();  
  drawCar();
  drawLane(10 - yCoordinate);
  drawLane(60 - yCoordinate);
  drawLane(110 - yCoordinate);
  //speed of the lane
  yCoordinate = yCoordinate - 0.4;
  //if lane crossed the bottom boundrary then reset the y co-ordinate
  if (yCoordinate <= -145){
    yCoordinate = 115;
  }

  requestAnimationFrame(moveLane);
}

function drawCar(){
  context.drawImage(car, canvasWidth/2, canvasHeight/4, car.width*0.4, car.height*0.13);
  setCarControls();
}

function moveCarLeft(){
  clearCanvas();
  var x = canvasWidth/2 - distance;
  context.drawImage(car, x, canvasHeight/4, car.width*0.4, car.height*0.13);
}

function drawLane(yCoordinate){
  context.fillStyle = "#ffffff";
  context.fillRect(canvasWidth/2, yCoordinate, 10, 20);
}

function clearCanvas(){
  context.clearRect(0, 0, canvasWidth, canvasHeight);
}

function setCarControls() {
  document.addEventListener('keydown', function(e){
    switch(e.keyCode){
      case 37: 
        console.log('left');
        requestAnimationFrame(moveCarLeft);
        break;
      case 38:
        console.log('up');
        break;
      case 39:
        console.log('right');
        break;
      case 40:
        console.log('down');
        break;
    }
  });
}

實時鏈接： https : //jsfiddle.net/jackysatpal/6j4c5dod/6/

Answer 1

我已經更新了小提琴。 校驗。 您沒有使用動態x坐標。

https://jsfiddle.net/6j4c5dod/7/

function moveCarLeft(){
 clearCanvas();
 currentX = currentX - 0.1;
 context.drawImage(car, currentX, canvasHeight/4, car.width*0.4, car.height*0.13);
 }

Answer 2

這是我如何做的最新演示 ： https : //jsfiddle.net/mulperi/1daahhap/

游戲的基本思想（通常）是具有更新功能（游戲循環）和平局功能。 更新函數是您使用requestAnimationFrame（）調用的函數，它包含游戲中所有需要更新的不同內容，例如Player.update（）等。另一方面，draw函數負責清除屏幕使用ctx.clearRect（），然后執行Player.draw（）以及類似的操作。

在我的示例中，玩家的移動是通過偵聽鍵盤按下和鍵盤輸入並根據鍵盤上發生的事情將變量切換為true / false來完成的。 Player.update -function僅檢查變量並在按下鍵時移動（例如，ArrowLeft）。

下面的完整代碼：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>World's BEstest Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <canvas id="canvas" style="border:1px solid black;">

  </canvas>
    <script>
      const c = document.getElementById("canvas");
      const ctx = c.getContext("2d");

      /*
          TODO: Change player to Class based object
      */
      keyPresses = {};
      player = {
        x: 100,
        y: 100,
        update: () => {
          if (keyPresses['ArrowLeft']) {
            player.x -= 1;
          }
          if (keyPresses['ArrowRight']) {
            player.x += 1;
          }
          if (keyPresses['ArrowUp']) {
            player.y -= 1;
          }
          if (keyPresses['ArrowDown']) {
            player.y += 1;
          }
        },
        draw: () => {
          ctx.fillStyle = "black";
          ctx.beginPath();
          ctx.arc(player.x, player.y, 10, 0, Math.PI * 2, false);
          ctx.closePath();
          ctx.fill();
        }
      };

      function listenKeyboard() {
        document.addEventListener("keyup", keyUp.bind(this));
        document.addEventListener("keydown", keyDown.bind(this));
      };

      function keyUp(e) {
        keyPresses[e.key] = false;
      };

      function keyDown(e) {
        console.log(e.key)
        keyPresses[e.key] = true;
      };

      /*
        Everything drawing and graphics related goes here and also
        clearing the screen before drawing each frame.
      */
      function draw() {
        ctx.clearRect(0, 0, 300, 300);
        player.draw();
      };

      /*
        All the update methods go here
      */
      function update() {
        draw();
        listenKeyboard();
        player.update();
        requestAnimationFrame(update);
      };

      requestAnimationFrame(update);

    </script>
  </body>

</html>

因此，我希望這可以幫助您考慮游戲功能的結構，使其更易於閱讀和理解，並可能給您帶來一些啟發！ 快樂的編碼:)

Answer 3

我認為您有3種選擇：

玩轉Globalcompositeoperations與畫布保存/還原相結合。
使用多個畫布。

我真的會去多張畫布（對於那些不會改變的東西，例如背景天空，只需繪制一次），因為保存/恢復也可能是昂貴的操作。

html5 canvas移動元素

問題描述

3 個解決方案

解決方案1
1 已采納 2018-04-24 17:12:15

解決方案2
1 2018-04-24 17:52:11

解決方案3
-1 2018-04-24 17:10:34

html5 canvas移動元素

問題描述

3 個解決方案

解決方案1 1 已采納 2018-04-24 17:12:15

解決方案2 1 2018-04-24 17:52:11

解決方案3 -1 2018-04-24 17:10:34

解決方案1
1 已采納 2018-04-24 17:12:15

解決方案2
1 2018-04-24 17:52:11

解決方案3
-1 2018-04-24 17:10:34