Question

我是HTML和JS的初学者。我将尝试解释我正在尝试做什么，并展示我到目前为止的工作。

我要做的是画一个三角形（他的名字是杰克），红鼻子（小三角形）和一只眼睛（小圆圈）。我要用键盘箭头移动千斤顶，而千斤顶的鼻子应该指向移动的方向（就像一个小街机游戏）。并且在HTML页面中，当按下的千斤顶回到原始位置（画布的中心，朝上）时，有按钮。而且，一个小技巧，杰克的鼻子永远不会离开画布。

我没有得到如何在旋转位置工作，并且我已经设置的keydown在HTML中不起作用。并且，对于重置按钮，我是否应该获得某种清除功能以将Jack返回到原始位置？

好吧，到目前为止，我已经得到了这个：

HTML：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Canvas</title>
   <script src="a5.js" type="text/javascript" defer></script>
</head>

<body onload="setUp()">
    <h1>The Adventure of Jack the Triangle</h1>
    <canvas id="myCanvas" height="500" width="500" style="border: 1px solid black"></canvas>

    <br>
    <button type="button" id="resetbtt" name="button">Reset</button>

</body>

JS：

let canvas;
let ctx;
let dx = 10;
let dy = 10;
let x = 250;
let y = 250;


 function setUp(){
     canvas = document.getElementById("myCanvas");
     ctx = canvas.getContext("2d");
     drawJack();
 }

 function drawJack(){

     ctx.save();
     ctx.translate(x,y)
     ctx.beginPath();
     ctx.moveTo(0, 0);
     ctx.lineTo(-50, 50);
     ctx.lineTo(50, 50);
     ctx.closePath();
     ctx.stroke();
     ctx.restore();

     //NOSE
     ctx.save();
     ctx.fillStyle = "red";
     ctx.translate(x,y)
     ctx.beginPath();
     ctx.moveTo(0, 0);
     ctx.lineTo(-10, 10);
     ctx.lineTo(10, 10);
     ctx.closePath();
     ctx.stroke();
     ctx.fill();
     ctx.restore();

     //EYE
     ctx.save();
     ctx.fillStyle = "blue";
     ctx.translate(x,y)
     ctx.beginPath();
     ctx.arc(0, 30, 5, 0, 2 * Math.PI);
     ctx.fill();
     ctx.restore();
}


let deltaX = 0;
let deltaY = 0;

window.addEventListener("keydown", moveJack);

function moveJack(e) {
    switch(e.keyCode) {
        case 37:
            x -= dx;
            break;
        case 38:
            y -= dy;
            break;
        case 39:
            x += dx;
            break;
        case 40:
            y += dy;
            break;
     }
     e.preventDefault();
 }

谢谢！

Answer 1

您好像没有将event参数传递给moveJack函数。我会尝试这个，看看它是否有效：

window.onkeydown = function(e){ 
moveJack(e);
}

我知道它效率不高，但尝试一下，只是为了看看这是不是问题。希望这有帮助！

canvas javascript移动三角keydown事件

1 个答案: