Javascript/HTML5 -使用WASD在矩形周围移动制作画布动画.在执行A键和W键时遇到困难
Javascript/HTML5 - Making a canvas animation using WASD to move around a rectangle. Trouble implementing A and W keys
我正在制作一个简单的画布,其中用户使用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动画从不执行
- Javascript:在css动画之后继续执行
- 动画在执行之前等待
- jQuery Transit动画未在for循环中正确执行
- 为什么创建后立即执行的样式指定没有设置动画
- 使用 class、ng-show 和 ng-class 执行 AngularJS 动画
- 如何正确执行Jquery动画浮动
- Chrome 不会在 jQuery 动画的回调中执行所有行
- 为什么 JavaScript 执行会影响 Firefox 中的 css 动画和动画 gif
- 动画结束时执行动画
- 在动画设置超时后执行函数
- 如何在加载而不是悬停时执行 CSS3 动画
- 如何使用拉斐尔库在 Javascript 中执行动画,使用鼠标单击或鼠标拖动
- 是否可以在 Angular 指令中使用 jQuery 来执行动画
- 对使用 javascript setInterval 来执行动画作业感到困惑
- 我如何同时执行动画和淡出?
- jQuery hashchange事件立即执行动画,没有速度
- 循环遍历表中的每个图像,对每个图像执行动画
- 添加条件时,Jquery不执行动画
- :在执行动画时,visible总是返回true