Canvas Javascript move triangle keydown event

我是HTML和JS的初学者。我将尝试解释我要做的事情，并展示我的工作。

我想做的是用红色的鼻子(小三角形(和一只眼睛(小圆圈(画一个三角形(他的名字是杰克(。我用键盘箭头将杰克移动，而杰克的鼻子应该指向正在移动的方向(例如一个街机游戏(。在HTML页面中，按下时有按钮，然后按下杰克返回原始位置(帆布的中心，面朝上(。而且，一件事，杰克的鼻子永远不应该离开画布。

我没有得到如何在旋转位置工作的方法，而我设置的关键在HTML中不起作用。而且，对于重置按钮，我应该获得某种清晰的功能以将插孔返回原始位置吗？

好吧，到目前为止，我已经知道了：

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();
 }

看来您没有将事件参数传递给MoveJack函数。我会尝试一下，看看它是否有效：

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

我知道这不是高效，但请尝试一下，只是看看这是否是问题。希望这会有所帮助！

相关内容

最新更新

热门标签：