Javascript HTML5画布键控事件动画_Javascript_Jquery_Canvas

Javascript HTML5画布键控事件动画

javascript jquery canvas

Javascript HTML5画布键控事件动画,javascript,jquery,canvas,Javascript,Jquery,Canvas,所以我对编程相当陌生，我一直在玩HTML5和canvas。我一直试图在按下一个键时移动一个简单的矩形，但我就是无法让我工作。我遵循了以下指南：这是我的密码： HTML: 坎维斯特 CSS: 当我加载它时，我得到画布并显示矩形，但在第二次评估时，我无法使用WASD移动矩形，我发现了更多错误我做了一个粗略的移动示例（代码中最重要的更改）主要问题似乎是可变范围检查稍后，当我有时间时，我将进一步详细解释。我已经发表了评论，向您展示了所做的更改我觉得我不需要做太多的解释，只有很少的改动，但我

所以我对编程相当陌生，我一直在玩HTML5和canvas。我一直试图在按下一个键时移动一个简单的矩形，但我就是无法让我工作。我遵循了以下指南：

这是我的密码： HTML: 坎维斯特

CSS:

当我加载它时，我得到画布并显示矩形，但在第二次评估时，我无法使用WASD移动矩形，我发现了更多错误

我做了一个粗略的移动示例（代码中最重要的更改）

主要问题似乎是可变范围检查

稍后，当我有时间时，我将进一步详细解释。

我已经发表了评论，向您展示了所做的更改

我觉得我不需要做太多的解释，只有很少的改动，但我已经添加了一些评论来指出它们

附加：自动聚焦和聚焦轮廓移除（请参阅源代码中的注释）

var main=函数（）{
var canvas=document.getElementById（“canvas”）；
canvas.addEventListener（“keydown”，doKeyDown，true）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgba（0,025,5）”；
//_______________________________^.5=50%/半α
ctx.fillRect（20,20,20,15）；
//-----可选自动对焦-------
//如果你想让页面关注你的canva
canvas.focus（）；
var x=30；
变量y=30；
功能doKeyDown（按键）{
如果（key.keyCode==87）{//w
clearCanvas（）；
y=y-10；
ctx.fillStyle=“rgba（0,025,5）”；
ctx.fillRect（x，y，20，15）；
}
如果（key.keyCode==83）{//s
clearCanvas（）；
y=y+10；
ctx.fillStyle=“rgba（0,025,5）”；
ctx.fillRect（x，y，20，15）；
}
如果（key.keyCode==65）{//a
clearCanvas（）；
x=x-10；//从x轴向左移动-10
ctx.fillStyle=“rgba（0,025,5）”；
ctx.fillRect（x，y，20，15）；
}
如果（key.keyCode==68）{//d
clearCanvas（）；
x=x+10；//从x轴向右移动+10
ctx.fillStyle=“rgba（0,025,5）”；
//__________________________________^接近；
ctx.fillRect（x，y，20，15）；
}
}
函数clearCanvas（）{
canvas.width=canvas.width；
}
};  
$（文件）.ready（主）
画布{
边框：1px实心#ddd；
左边距：自动；
右边距：自动；
边缘底部：50px；
边缘顶部：50px；
左侧填充：0；
右边填充：0；
填充底部：0；
填充顶部：0；
显示：块；
/*------删除焦点上的大纲*/
/*大纲：0*/
}

从“var ctx=canvas.getContext（“2d”）；”中删除var，这将使其成为全局变量（提示：检查chome ctrl+shift+j中的javascript控制台）
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="TestStyle.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="TestApp.js"></script>
</head>

<body>

    <canvas id="canvas" width="400" height="500"></canvas>

</body>
</html>

var main = function (){

    var canvas = document.getElementById("canvas");
    canvas.addEventListener("keydown", doKeyDown, true);

    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(0, 0, 255, 1)"
    ctx.fillRect(20, 20, 20, 15);

    var x = 30;
    var y = 30;

    function doKeyDown(key) {
        alert (key.keyCode)

        if (key.keyCode == 87) { //w
            clearCanvas();
            y = y - 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
        if (key.keyCode == 83) { //s
            clearCanvas();
            y = y + 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
        if (key.keyCode == 65) { //a
            clearCanvas();
            y = x - 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
        if (key.keyCode == 68) { //d
            clearCanvas();
            y = x + 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
    }

    function clearCanvas() {
        canvas.width = canvas.width;
    }
};  

$(document).ready(main);

canvas {
    border: 1px solid #ddd;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: 50px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    display: block;
}

canvas = document.getElementById("canvas");
window.addEventListener("keydown", doKeyDown, true);
ctx = canvas.getContext("2d");
x = 30;
y = 30;