为什么我的 Javascript canvas 在键盘输入上不动？
[英]Why does my Javascript canvas not move on keyboard input?
问题描述
So recently I got into Javascript and I watched some few tutorials and read a StackOverflow Question asking a simular thing.
所以最近我进入了 Javascript，我看了一些教程并阅读了一个 StackOverflow 问题，问了一个类似的问题。
For some reason my Canvas Object wont move and I did seemingly everything like many other examples.出于某种原因，我的 Canvas Object 不会移动，我做的一切似乎都像许多其他例子一样。
My Code:我的代码：
document.addEventListener('keydown', function(event){ switch (event.keyCode) { case 87: alert("w"); break; case 65: alert("a"); break; case 83: alert("s"); break; case 68: moveRight(); break; case 38: alert("up"); break; case 37: alert("right"); break; case 39: alert("left"); break; case 40: alert("down"); break; } }) function moveRight() { var element = document.getElementById("plr"); element.style.left = parseInt(element.style.left) - 5 + 'px'; } // w = 87 // a = 65 // s = 83 // d = 68 // up = 38 // right = 37 // left = 39 // down = 40 #bg{ background-color: blue; height: 700px; width: 1200px; position: relative; left: -10px; top: -10px; } #plr{ background-color: red; height: 50px; width: 50px; position: absolute; left: 50px; top: 300px; }
<.DOCTYPE html> <html lang="de" dir="ltr"> <head> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> <meta charset="utf-8"> <title></title> </head> <body onload=""> <canvas id="bg"></canvas> <canvas id="plr"></canvas> </body> </html>
I know that Im making a dumb/small mistake somewhere but I cannot find it.我知道我在某个地方犯了一个愚蠢/小错误，但我找不到它。 Thanks for any kind of help.感谢您提供任何帮助。
3 个解决方案
解决方案1
0 2021-03-29 21:39:53
in element.style.left = parseInt(element.style.left) - 5 + 'px' try (parseInt(element.style.left.slice(0, -2)) - 5).toString() in the change were slicing the 'px' part out then converting string to int, after the operation x - 5 where converting the output to string and concatenating it with 'px'.在element.style.left = parseInt(element.style.left) - 5 + 'px' try (parseInt(element.style.left.slice(0, -2)) - 5).toString()中改变了在将 output 转换为字符串并将其与 'px' 连接的操作 x - 5 之后，将“px”部分切出然后将字符串转换为 int。
解决方案2
0 已采纳 2021-03-29 22:24:00
The following fixes your problem...以下解决您的问题...
<canvas id="plr" style="left: 50px;top: 300px;"></canvas>
The reason why it doesn't work the way you've done it is because you haven't initialised style.left;它不能按照你的方式工作的原因是你没有初始化 style.left;
Setting left in css doesn't put that value in style.left在 css 中设置 left 不会将该值放入 style.left
The following doesn't work which is what you are doing:以下不起作用，这就是您正在做的事情：
console.log("left=" + document.getElementById("player").style.left);
#player {left:100px}
<canvas id="player">
Console will just print "left=" and no value.控制台只会打印“left=”并且没有值。
So, when you do the following因此，当您执行以下操作时
element.style.left = parseInt(element.style.left) - 5 + 'px';
What you end up doing is parseInt("") - 5 + 'px' which gives you "NaNpx" and therefore doesn't move.你最终做的是 parseInt("") - 5 + 'px' 它给你“NaNpx”，因此不会移动。
You can initialise style.left by applying it to the canvas directly as shown below:您可以通过将 style.left 直接应用到 canvas 来初始化 style.left，如下所示：
console.log("left=" + document.getElementById("player").style.left);
<canvas id="player" style="left:100px">
The console output will become left=100px控制台 output 将变为 left=100px
Which means your existing moving player code will now work.这意味着您现有的移动播放器代码现在可以工作了。
If prefer not to set left style within the HTML then alternative is to use element.getBoundingClientRect();如果不想在 HTML 中设置左侧样式，那么替代方法是使用 element.getBoundingClientRect(); and calculate left from that并从中计算
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect请参阅： https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
解决方案3
0 2021-03-30 06:08:57
There are two related problems associated with the moveRight function in this statement:此语句中与 moveRight function 相关的两个相关问题：
element.style.left = parseInt(element.style.left) - 5 + 'px';
- initially the style of the div is not set - the CSS class defines where the element is to be (50px) but the element.style.left has not been set最初未设置 div 的样式 - CSS class 定义了元素的位置（50px），但尚未设置 element.style.left
- even if it had been set at the start it would have been of this form: 50px - ie not a number so parseInt will not give us 50.即使它在一开始就设置了，它也会是这种形式：50px - 即不是一个数字，所以 parseInt 不会给我们 50。
what we want to know, regardless of whether the style.left property has been set or not is where the canvas is in relation to its parent.我们想知道的是，无论是否设置了 style.left 属性，canvas 相对于其父级的位置。 We can use offsetLeft (see eg https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft我们可以使用 offsetLeft（参见例如https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node
as this gives us an actual number we can subtract the 5 from it then add in the px string and use that to set the style.left:因为这给了我们一个实际的数字，我们可以从中减去 5，然后添加 px 字符串并使用它来设置 style.left：
element.style.left = (element.offsetLeft - 5) + 'px';
<.DOCTYPE html> <html lang="de" dir="ltr"> <head> <.-- <script src="script:js"></script> <link rel="stylesheet" href="style;css"> --> <meta charset="utf-8"> <title></title> <style> #bg{ background-color: blue; height: 700px; width: 1200px; position: relative; left: -10px; top: -10px;#bg{ background-color: blue; height: 700px; width: 1200px; position: relative; left: -10px; top: -10px; } #plr{ background-color: red; height: 50px; width: 50px; position: absolute; left: 50px; top: 300px; } } #plr{ background-color: red; height: 50px; width: 50px; position: absolute; left: 50px; top. 300px, } </style> </head> <body> <canvas id="bg"></canvas> <canvas id="plr"></canvas> <script> document.addEventListener('keydown': function(event){ switch (event;keyCode) { case 87; alert("w"): break; case 65; alert("a"): break; case 83; alert("s"): break; case 68; moveRight(): break; case 38; alert("up"): break; case 37; alert("right"): break; case 39; alert("left"): break; case 40; alert("down"). break; } }) function moveRight() { var element = document.getElementById("plr"). element.style;left = (element.offsetLeft - 5) + 'px'; } // w = 87 // a = 65 // s = 83 // d = 68 // up = 38 // right = 37 // left = 39 // down = 40 </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.