问题描述
最近，我一直在尝试学习使用HTML / Javascript画布。我已经知道如何使用HTML，CSS和大多数Javascript代码，但是在使用canvas方面我总是有点不满意。我想知道这一点，因为我希望答案专门使用画布。
我试图将字符移向鼠标单击，但是效果不是很好，我遇到了障碍。角色会垂直移动到我想要的位置，但并非总是水平移动到正确的位置。另外，我希望垂直和水平运动可以同时发生，但是如果不可能的话也可以。
我当前正在使用if / then语句，将y坐标if语句放在x坐标if语句内。我已经尝试使用四个单独的if / then语句，其中y坐标和x坐标if语句不在彼此内部，但是结果不如我目前正在做的那样。我敢肯定，有比我正在做的事情更简单的方法，因此我愿意接受所有建议。
谢谢。
这是我的代码：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="650" height="450"
style="border:1px solid #d3d3d3;" onclick="play()"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
var xx = 0;
var yy = 0;
setInterval(animation,1);
ctx.beginPath();
ctx.rect(x,y,24,8);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(x,y + 8,12);
ctx.fillStyle = "#ffd49c";
ctx.fill();
ctx.beginPath();
ctx.rect(x,6,12);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(x,y + 20,28);
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.rect(x,y + 48,y + 26,10,10);
ctx.fillStyle = "#ffd49c";
ctx.fill();
function play() {
x = event.clientX - 8;
y = event.clientY - 8;
}
function animation() {
if (xx < x) {
xx++;
if (yy < y) {
yy++;
} else if (yy > y) {
yy--;
}
} else if (xx > x) {
xx--;
if (yy < y) {
yy++;
} else if (yy > y) {
yy--;
}
}
ctx.clearRect(0,canvas.width,canvas.height);
ctx.rect(xx,yy,8);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(xx,yy + 8,12);
ctx.fillStyle = "#ffd49c";
ctx.fill();
ctx.beginPath();
ctx.rect(xx,12);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(xx,yy + 20,28);
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.rect(xx,yy + 48,yy + 26,10);
ctx.fillStyle = "#ffd49c";
ctx.fill();
}
</script>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）