时间戳

首页 > 解决方案 > 我试图用箭头键移动我的角色，但它没有移动

javascript - 我试图用箭头键移动我的角色，但它没有移动

问题描述

我想用箭头键让我的角色移动，但它不起作用，我不知道为什么。

这是我正在尝试制作的离线射击游戏。我试过不使用对象，但这很快就会变成多人游戏，所以我不想不断地制作新文件。

这是我的代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
var x = 0;
var y = 0;
var Keys = {
  up: false,
  down: false,
  left: false,
  right: false
};
img.src = "images/char1.png";

let player = function player(x, y) {
  this.x = x;
  this.y = y;
  this.speed = 5;
  this.health = 100;
};

window.onkeydown = function(e) {
  var kc = e.keyCode;
  e.preventDefault();

  if (kc === 37) {
    Keys.left = true;
  } else if (kc === 38) {
    Keys.up = true;
  } else if (kc === 39) {
    Keys.right = true;
  } else if (kc === 40) {
    Keys.down = true;    
  }
};

window.onkeyup = function(e) {
  var kc = e.keyCode;
  e.preventDefault();

  if (kc === 37) {
    Keys.left = false;
  } else if (kc === 38) {
    Keys.up = false;
  } else if (kc === 39) {
    Keys.right = false;
  } else if (kc === 40) {
    Keys.down = false;
  }
};

function move() {
  if (Keys.left) {
    x -= player.speed;
  }else if (Keys.right) {
    x += player.speed;
  }else if (Keys.up) {
    y -= player.speed;
  }else if (Keys.down) {
    y += player.speed;    
  }
}
function renderObject() {
  ctx.drawImage(img, 0, 0, 32, 48, 0, 0, 32, 48);
}

function draw() {
  renderObject();
  move();
}

setInterval(draw, 10);

我希望当我按下箭头键时角色会移动，但它根本不会移动。

标签： javascripthtml5-canvas

解决方案

你有几个问题：

  1. 您需要创建一个播放器对象。目前，您的player功能只是您的player. 相反，您需要创建此对象的一个​​实例。

    var player = new Player(x, y);

  2. 您需要在每次重绘后清除画布，否则您将获得角色图像的踪迹：

    ctx.clearRect(0, 0, canvas.width, canvas.height);

  3. 在播放器的位置绘制你的播放器图像，而不是0, 0每次：

    ctx.drawImage(img, x, y, 32, 48);

请参阅下面的工作示例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
var x = 0;
var y = 0;
var player = new Player(x, y);
var Keys = {
  up: false,
  down: false,
  left: false,
  right: false
};
img.src = "https://www.pinclipart.com/picdir/middle/366-3665375_deadpool-2d-video-game-characters-clipart.png";

function Player(x, y) {
  this.x = x;
  this.y = y;
  this.speed = 5;
  this.health = 100;
};

window.onkeydown = function(e) {
  var kc = e.keyCode;
  if (kc === 37) {
    Keys.left = true;
  } else if (kc === 38) {
    Keys.up = true;
  } else if (kc === 39) {
    Keys.right = true;
  } else if (kc === 40) {
    Keys.down = true;
  }
};

window.onkeyup = function(e) {
  var kc = e.keyCode;
  if (kc === 37) {
    Keys.left = false;
  } else if (kc === 38) {
    Keys.up = false;
  } else if (kc === 39) {
    Keys.right = false;
  } else if (kc === 40) {
    Keys.down = false;
  }
};

function move() {
  if (Keys.left) {
    x -= player.speed;
  } else if (Keys.right) {
    x += player.speed;
  } else if (Keys.up) {
    y -= player.speed;
  } else if (Keys.down) {
    y += player.speed;
  }
}

function renderObject() {
  ctx.drawImage(img, x, y, 32, 48);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  renderObject();
  move();
}

setInterval(draw, 10);
<canvas height="120" width="400" id="canvas" style="border: 1px solid black;"></canvas>

推荐阅读