时间戳

首页 > 解决方案 > 画布对象更新位置并重绘对象

javascript - 画布对象更新位置并重绘对象

问题描述

我有一个画布，在初始化页面时绘制了两个矩形对象。

我有一个 X 和 Y 的变量，当按下键盘按钮时它会发生变化，这可以正常工作。

我想在新的 X 和 Y 值发生变化时将其中一个对象方块“playerCar”移动，但我无法改变框。

我在不使用对象的情况下使用它，但想使用对象，以便我可以添加更多（当我学习它时）。

我试过playercar.draw(keyX, KeyY); 了，但这不是更新。

var canvas = document.getElementById('plot');
var context;

var keyX = 100;
var keyY = 100;

playerCar = new car(100, 100, 'red');
playerCar2 = new car(350, 100, 'blue');

init()
playerCar.draw();
playerCar2.draw();


document.addEventListener('keydown', function(event){
  var keyPressed = event.keyCode;
  switch(keyPressed){
    case 104:
      keyY = keyY -1;
      break;
    case 98:
      keyY = keyY +1;
      break;
    case 100:
      keyX = keyX -1;
      break;
    case 102:
      keyX = keyX +1;
      break;
  }
  
  playerCar.draw();

  console.log('key Y = ' + keyY);
  console.log('key X = ' + keyX);
});

function init(){
  context = canvas.getContext('2d');
  context.fillStyle = "green";
  var plot = {height: 800, width: 800};
  context.fillRect(1, 1, plot.width, plot.height);
}

function car (keyX, keyY, color){
  carwidth = 150;
  carHeight = 100;
  this.x = keyX;
  this.y = keyY;
  this.color = color;
  this.draw = function (){
    context.fillStyle = this.color;
    context.fillRect(this.x, this.y, carwidth, carHeight);
  }
  
}
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
      <canvas id="plot" width="800" height="800"></canvas>
      <script src="index.js"></script>
  </body>
</html>

标签： javascriptcanvas

解决方案

您遇到的问题是您指望 KeyX 和 KeyY 的初始值，而不是存储在汽车对象中的那些。你需要增加playerCar.y

所以我换成keyY = keyY +1;了playerCar.y += 1;.
如您所见，我使用了 += 这只是编写相同内容的一种更短的方式，请参阅：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators

你也可以使用playerCar.y++，但你不能再调整它添加的数量。

除了这个问题之外，您还遇到了一个问题，即您没有重新绘制画布。这是一个稍微大一点的问题，在大多数游戏中，您将拥有一个负责所有绘图的绘图函数（循环）和一个负责逻辑（循环）的单独函数。

现在我添加了一个重绘函数，它可以重绘屏幕上的所有对象。

var canvas = document.getElementById('plot');
var context;

var keyX = 100;
var keyY = 100;

playerCar = new car(100, 100, 'red');
playerCar2 = new car(350, 100, 'blue');

init()

document.addEventListener('keydown', function(event){
  var keyPressed = event.keyCode;
  switch(keyPressed){
    case 104:
     playerCar.y += 1;
      break;
    case 98:
      playerCar.y -= 1;
      break;
    case 100:
      playerCar.x += 1;
      break;
    case 102:
      playerCar.x -= 1;
      break;
  }

  redraw()

  console.log('key Y = ' + playerCar.y);
  console.log('key X = ' + playerCar.x);
});

function init(){
  context = canvas.getContext('2d');
  redraw();
}
function redraw() {
  context.fillStyle = "green";
  var plot = {height: 800, width: 800};
  context.fillRect(1, 1, plot.width, plot.height);
  playerCar.draw();
  playerCar2.draw();
}

function car (keyX, keyY, color){
  carwidth = 150;
  carHeight = 100;
  this.x = keyX;
  this.y = keyY;
  this.color = color;
  this.draw = function (){
    context.fillStyle = this.color;
    context.fillRect(this.x, this.y, carwidth, carHeight);
  }
  
}
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
      <canvas id="plot" width="800" height="800"></canvas>
      <script src="index.js"></script>
  </body>
</html>

推荐阅读