Javascript/HTML5 - 使用 WASD 在矩形周围移动制作 Canvas 动画。无法实现 A 和 W 键-6ren

Javascript/HTML5 - 使用 WASD 在矩形周围移动制作 Canvas 动画。无法实现 A 和 W 键

转载作者：行者123 更新时间：2023-11-30 08:54:54

25

4

我正在制作一个简单的 Canvas ，用户可以在其中使用 WASD 分别向上、向左、向下、向右移动一个矩形。动画适用于 S 和 D 键，但当我尝试按 a 键时它不起作用，我不确定为什么。下面是我的代码。

//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event){
  var keyCode = event.keyCode;
  switch(keyCode){
    case 68:  //d
        keyD = true;
    break;
    case 83:  //s
        keyS = true;
    break;
    case 63:  //a
        keyA = true;
    break;
  }
}
function onKeyUp(event){
  var keyCode = event.keyCode;
  switch(keyCode){
    case 68:  //d
        keyD = false;
    break;
    case 83:  //s
        keyS = false;
    break;
    case 63: //a
        keyA = false;
    break;
  }
}

//neccessary variables
var tickX = 10;
var tickY = 10;

var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;

//main animation function
function drawStuff(){
window.requestAnimationFrame(drawStuff);
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");

c.clearRect(0,0,500,500);
c.fillStyle = "blue";
c.fillRect(tickX,tickY,100,100);

if(keyD == true){
    tickX+=5;
}
if(keyS == true){
    tickY+=5;
}
if(keyA == true){
    tickX--;
}
  }
  window.requestAnimationFrame(drawStuff);

这是递减 tickX 的问题吗？感谢您的帮助!

最佳答案

您缺少一些您需要的 case 语句。我相信您的某些案件编号也不正确。试试这个可运行的片段:

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

//event listener
window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event) {
  var keyCode = event.keyCode;
  switch (keyCode) {
    case 68: //d
      keyD = true;
      break;
    case 83: //s
      keyS = true;
      break;
    case 65: //a
      keyA = true;
      break;
    case 87: //w
      keyW = true;
      break;
  }
}

function onKeyUp(event) {
  var keyCode = event.keyCode;

  switch (keyCode) {
    case 68: //d
      keyD = false;
      break;
    case 83: //s
      keyS = false;
      break;
    case 65: //a
      keyA = false;
      break;
    case 87: //w
      keyW = false;
      break;
  }
}

//neccessary variables
var tickX = 10;
var tickY = 10;

var keyW = false;
var keyA = false;
var keyS = false;
var keyD = false;

//main animation function
function drawStuff() {
  window.requestAnimationFrame(drawStuff);
  var canvas = document.getElementById("myCanvas");
  var c = canvas.getContext("2d");

  c.clearRect(0, 0, 800, 800);
  c.fillStyle = "blue";
  c.fillRect(tickX, tickY, 100, 100);

  if (keyD == true) {
    tickX += 1;
  }
  if (keyS == true) {
    tickY += 1;
  }
  if (keyA == true) {
    tickX--;
  }
  if (keyW == true) {
    tickY--;
  }
}
window.requestAnimationFrame(drawStuff);

<!DOCTYPE html>
<html>
<head></head>
<body>
  <canvas id="myCanvas" width='800' height='800'></canvas>
</body>
</html>

关于Javascript/HTML5 - 使用 WASD 在矩形周围移动制作 Canvas 动画。无法实现 A 和 W 键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14389864/

25

4

0

文章推荐： machine-learning - Caffe 微调与从头开始

文章推荐： Javascript 更改 iFrame 中的文本框值

文章推荐： javascript - 在 Fusion Tables 信息窗口中隐藏元素

c# - 如何统一检查同时输入的 WASD 和箭头键？
我正在开发一款与 Subway Surfers 具有相似玩家机制的游戏，即玩家在用户提供相应输入时切换车道。 private void Update() { if (Input.GetKeyD
c# - 如何统一检查同时输入的 WASD 和箭头键？
我正在开发一款与 Subway Surfers 具有相似玩家机制的游戏，即玩家在用户提供相应输入时切换车道。 private void Update() { if (Input.GetKeyD
java - 如何将 WASD 键连接到特定事件？
我对编程还很陌生，但我很好奇并且想了解更多。目前，我正在尝试制作一个非常简单的程序，可以在屏幕上移动二维球。然而，目前我必须使用程序中的按钮来移动球。我希望能够使用 WASD 之类的。我已经搜索过这个
javascript - 第一人称 WASD 控制
我目前正在开发一款 3d 游戏，我想使用 wasd 键实现一种第一人称控制。我下面的代码片段包括速度、位置和旋转，其中旋转代表 0 之间的值和 2*Math.PI . 我的问题是如何更新我的代码以使
javascript - A-Frame WASD 控件在移动设备上的替代品
我有一个 A-Frame 多人游戏项目，它依赖于每个用户在 map 上移动，并且它在桌面浏览器中运行良好。障碍是移动设备缺乏运动控制，例如相机的 WASD 控制。您建议采用什么解决方法？也许，使用
C++ 从 WASD 键接收输入？
我正在开发一款使用用户输入 WASD 键的 3d 游戏。我的代码如下: PeekMessage(&msg, NULL, 0, 0, PM_REMOVE); int key = (in
java - 同时使用 WASD 和方向键
我正在使用 Processing(在 Java 上运行)开发一款两人游戏。一个用户将使用 WASD 键控制他的角色，另一个用户将使用箭头键控制移动。我遇到的问题是，在按下箭头时使用 keyPresse
navigation - Maya 中的统一风格 WASD 飞行导航？
我在学校学习 Autodesk Maya。我已经知道 Unity 3D。我喜欢在 Unity 中你可以按住鼠标右键，然后用 WASD 键飞来飞去的事实(就像你在射击游戏中处于旁观者模式一样)。这
javascript - 在为第二个图像创建文字对象后，如何使用 WASD 键移动第二个图像
我正在尝试学习使用 WASD 键移动第二个对象，但我找不到详细说明其操作方法的具体信息。我在调整大小时也遇到了麻烦。我目前正在探索这款游戏，以尽我所能地学习。 https://jsfiddle.net
aframe - 如何在 A-Frame 中禁用键盘或 WASD 控件？
如何在默认场景中禁用相机的键盘控制？最佳答案 wasd-controls默认情况下，组件附加到默认相机。您可以: 定义与 wasd-controls禁用以覆盖默认值: 或者用 removeAt
aframe - 为 A-Frame 的 WASD 控件添加速度
如何为我的 WebVR 页面提高 WASD 控件的速度？因为现在速度真的很慢。最佳答案 wasd-controls组件有几个选项，在 A-Frame v0.4.0 doc
javascript - 在 JavaScript 游戏中同时处理 WASD 和箭头
让我们假设两个玩家用一个键盘进行简单的乒乓球游戏。移动处理程序看起来很简单: document.addEventListener('keydown', function (event) {
c# - 如何在 Unity 中使用 WASD 移动二维对象
我下面的代码只适用于水平移动。垂直运动不应该也起作用吗？我刚刚开始使用基本的 2D Unity 编程: public class Player : MonoBehaviour { //Thes
azure - 将 bacpac 文件导入到 Azure 门户上的现有 WASD
我已按照 this link 上提到的步骤进行操作我已经在 azure 门户上成功创建了新的数据库。但是我想知道如何使用 .bacpac 文件将其导入现有数据库？最佳答案目前给定的答案不起作用，因
c++ - 将 SDL2 箭头/WASD 键转换为玩家移动的最佳/最可靠方法是什么？
我的问题是在 SDL2 中实现定向输入的最可靠方法是什么。我当前代码的问题是说您想将播放器向左移动。按 a 会减少他的 x 值，一旦你释放 a 键，它就会停止减少 x 值。但是，如果您想向左移动然后
linux - Vim:将 'cursor' 键 hjkl 设置为 wasd
我承认我不是专家 vim 用户所以请原谅我没有提供以前的尝试! 我希望覆盖/重新映射基本的 vi/vim(和 gvim)“光标键”hjkl 到普通的“玩家布局”wasd(w-up，a-left，s-d
javascript - 当使用 WASD 玩 HTML5 游戏时，如何阻止使用 Firefox 搜索框的客户端出现？
我有一个与此半相关的问题 question ，除了从最终用户的 Angular 来看，我需要从内容提供商的 Angular 来看它。如果 Mozilla 基金会会引入这种半侵入式功能，并且无法针对选
使用 wasd 键更改 x 和 y 值的 C 程序
我想用 C 语言编写一个简单的程序，允许用户更改 x 和 y 坐标的值。 w表示y++，s表示y--，a表示x--，d表示x++。我已经创建的代码是这样的: #include int main()
elements - 使用 Karabiner Elements，如何将 WASD 键切换为箭头键。仅当 Caps lock 处于事件状态时？
喜欢这个程序并感谢任何帮助就像标题所说的那样，我的左手一直放在 SHIFT KEY、OPTION KEY 和 COMMAND 键上。但我讨厌必须使用箭头键移动形状。我希望能够将 WASD 更改为箭头
Javascript/HTML5 - 使用 WASD 在矩形周围移动制作 Canvas 动画。无法实现 A 和 W 键
我正在制作一个简单的 Canvas ，用户可以在其中使用 WASD 分别向上、向左、向下、向右移动一个矩形。动画适用于 S 和 D 键，但当我尝试按 a 键时它不起作用，我不确定为什么。下面是我的代码

首页

博学

6Ren·AI

商城

Javascript/HTML5 - 使用 WASD 在矩形周围移动制作 Canvas 动画。无法实现 A 和 W 键