我想创建一个移动的角色，我的代码不起作用？ [英] I am trying to create a moving character and my code is not working?
本文介绍了我想创建一个移动的角色，我的代码不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Html和Javascript中，我试图使用wasd键移动角色。我尽我所能，但我无法让它发挥作用。你能告诉我怎么做吗？另外，你可以非常具体......我是一个初学者。这是代码。
In Html and Javascript I am trying to make the character move with the wasd keys. I have tried everything I can, and I can't get it to work. Can you tell me how to do it. Also, can you be pretty specific... I kind of a beginner. Here is the code.
<!DOCTYPE html>
<canvas id="ctx" height="800" width="1500" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
var player = {
x: 750,
y: 400,
pressW: false,
pressS: false,
pressA: false,
pressD: false,
};
ctx.fillStyle = "blue";
ctx.rect(player.x, player.y, 50,50);
document.onkeydown = function(event){
if (event.keyCode == 87) //w
player.pressW = true;
else if (event.keycode == 83) //s
player.pressS = true;
else if (event.keyCode == 65) //a
player.pressA = true;
else if (event.keycode == 68) //d
player.pressD = true;
}
document.onkeyup = function(event){
if (event.keyCode == 87) //w
player.pressW = false;
else if (event.keycode == 83) //s
player.pressS = false;
else if (event.keyCode == 65) //a
player.pressA = false;
else if (event.keycode == 68) //d
player.pressD = false;
}
function updatePlayerPosition(){
if (player.pressW == true)
player.y -= 10;
if (player.pressS == true)
player.y += 10;
if (player.pressA == true)
player.x -= 10;
if (player.pressD == true)
player.x += 10;
}
function drawPlayer(){
ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, 50,50);
}
function Update(){
ctx.clearRect(0,0,1500,800)
updatePlayerPosition();
drawPlayer();
}
setInterval(Update, 100);
</script>
<style>
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
我的尝试：
我已尽力而为，我无法让它工作
What I have tried:
I have tried everything I can, and I can't get it to work
推荐答案
您的代码唯一的问题是区分大小写。
Hi,
The only problem with your code is of Case sensitivity.
document.onkeydown = function(event){
if (event.keyCode == 87) //w
player.pressW = true;
else if (event.keyCode == 83) //s
player.pressS = true;
else if (event.keyCode == 65) //a
player.pressA = true;
else if (event.keyCode == 68) //d
player.pressD = true;
}
document.onkeyup = function(event){
if (event.keyCode == 87) //w
player.pressW = false;
else if (event.keyCode == 83) //s
player.pressS = false;
else if (event.keyCode == 65) //a
player.pressA = false;
else if (event.keyCode == 68) //d
player.pressD = false;
}
请尝试以下代码来解决您的问题：
Try the below code to solve your problem:
<!DOCTYPE html>
<canvas id="ctx" height="800" width="1500" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
var player = {
x: 750,
y: 400,
pressW: false,
pressS: false,
pressA: false,
pressD: false,
};
ctx.fillStyle = "blue";
ctx.rect(player.x, player.y, 50,50);
document.onkeydown = function(event){
if (event.keyCode == 87) //w
player.pressW = true;
else if (event.keyCode == 83) //s
player.pressS = true;
else if (event.keyCode == 65) //a
player.pressA = true;
else if (event.keyCode == 68) //d
player.pressD = true;
}
document.onkeyup = function(event){
if (event.keyCode == 87) //w
player.pressW = false;
else if (event.keyCode == 83) //s
player.pressS = false;
else if (event.keyCode == 65) //a
player.pressA = false;
else if (event.keyCode == 68) //d
player.pressD = false;
}
function updatePlayerPosition(){
if (player.pressW == true)
player.y -= 10;
if (player.pressS == true)
player.y += 10;
if (player.pressA == true)
player.x -= 10;
if (player.pressD == true)
player.x += 10;
}
function drawPlayer(){
ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, 50,50);
}
function Update(){
ctx.clearRect(0,0,1500,800)
updatePlayerPosition();
drawPlayer();
}
setInterval(Update, 100);
</script>
<style>
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
谢谢，
Thanks,
这篇关于我想创建一个移动的角色，我的代码不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
