Javascript 动画的向下键控制移动箱变量矩形={ x:100， y:100，宽度：100，身高：100， }; var-mx=4； var-my=4； var cheight=700； var cwidth=700； var e=event.keyCode；函数checkmx（）{ 如果（矩形.x+100>cwidth）{ mx=-4； } if（矩形xcheight）{ my=-4； } if（矩形ycwidth）{ mx=-4； } if（矩形xcheight）{ my=-4； } if（矩形y_Javascript_Events_Animation

Javascript 动画的向下键控制移动箱变量矩形={ x:100， y:100，宽度：100，身高：100， }; var-mx=4； var-my=4； var cheight=700； var cwidth=700； var e=event.keyCode；函数checkmx（）{ 如果（矩形.x+100>cwidth）{ mx=-4； } if（矩形xcheight）{ my=-4； } if（矩形ycwidth）{ mx=-4； } if（矩形xcheight）{ my=-4； } if（矩形y

javascript events animation

Javascript 动画的向下键控制移动箱变量矩形={ x:100， y:100，宽度：100，身高：100， }; var-mx=4； var-my=4； var cheight=700； var cwidth=700； var e=event.keyCode；函数checkmx（）{ 如果（矩形.x+100>cwidth）{ mx=-4； } if（矩形xcheight）{ my=-4； } if（矩形ycwidth）{ mx=-4； } if（矩形xcheight）{ my=-4； } if（矩形y,javascript,events,animation,Javascript,Events,Animation,我正在尝试制作一个盒子的动画。我不确定窗口.onkeydown和事件.keycode是如何工作的。我的目标是让mx和My变量根据按键的不同而变化。keydowncontrol（） <html> <header> <link href='css.css' rel='stylesheet'> <meta charset="UTF-8"> <title> moving box </title> <script type=

我正在尝试制作一个盒子的动画。我不确定

窗口.onkeydown

和

事件.keycode

是如何工作的。我的目标是让

mx

和

My

变量根据按键的不同而变化。

keydowncontrol（）
<html>
<header>
<link href='css.css' rel='stylesheet'>
<meta charset="UTF-8">
<title> moving box </title>

<script type= 'text/javascript'>


var rectangle = {
x: 100,
y: 100,
width: 100,
height: 100,
};

var mx = 4;
var my = 4;
var cheight = 700;
var cwidth = 700;
var e = event.keyCode;

function checkmx() {
if (rectangle.x + 100 > cwidth){
mx = -4;
}
if (rectangle.x < 0){
mx = 4;
}
}

function checkmy() {
if (rectangle.y + 100 > cheight){
my = -4;
}
if (rectangle.y < 0){
my = 4;
}
}
function keydowncontrol(){

if (e == 37){
mx = -1;
my = 0;
}
if (e == 38){
mx = 0;
my = -1;
}
if (e == 39){
mx = 1;
my = 0;
}
if (e == 40){
mx = 0;
my = 1;
}
//if (e == 35){
//mx = 0
//mx = 0
//}
}
function draw() {
checkmx();
checkmy();
keydowncontrol();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var nextx = rectangle.x + mx;
var nexty = rectangle.y + my;

rectangle.x = nextx
rectangle.y = nexty
ctx.clearRect(0, 0, cwidth, cheight);

ctx.beginPath();
ctx.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
ctx.fillStyle = '#FF0000';
ctx.fill();
ctx.stroke();
}

function init() {

checkmx();
checkmy();
window.onkeydown = keydowncontrol();// how can does this notice the key pressed
draw();
}


</script>
</header>
<body onload='setInterval(init,10)'>
<canvas id="canvas" width="700" height="700"></canvas>
</body>
</html>


移动箱
变量矩形={
x:100，
y:100，
宽度：100，
身高：100
};
var-mx=4；
var-my=4；
var cheight=700；
var cwidth=700；
var e=event.keyCode；
函数checkmx（）{
如果（矩形.x+100>cwidth）{
mx=-4；
}
if（矩形x<0）{
mx=4；
}
}
函数checkmy（）{
如果（矩形y+100>cheight）{
my=-4；
}
if（矩形y<0）{
my=4；
}
}
功能键控（e）{
//警报（e）；
如果（e.keyCode==37）{
mx=-1；
my=0；
}
如果（e.keyCode==38）{
mx=0；
my=-1；
}
如果（e.keyCode==39）{
mx=1；
my=0；
}
如果（e.keyCode==40）{
mx=0；
my=1；
}
//如果（e==35）{
//mx=0
//mx=0
//}
}
函数绘图（）{
checkmx（）；
检查我的（）；
//keydowncontrol（）；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var nextx=矩形.x+mx；
var nexty=rectangle.y+my；
矩形.x=nextx
矩形。y=nexty
ctx.clearRect（0，0，cwidth，cheight）；
ctx.beginPath（）；
ctx.rect（rectangle.x，rectangle.y，rectangle.width，rectangle.height）；
ctx.fillStyle='#FF0000'；
ctx.fill（）；
ctx.stroke（）；
}
//文件。附件（“onkeypress”，keydowncontrol）；
好吧，OP犯了一个错误，将
用作，您不必遵循这一点。。。
<html>
<head>
    <link href='css.css' rel='stylesheet' />
    <meta charset="UTF-8" />
    <title>Moving box</title>
    <script type='text/javascript'>
        var rectangle = {
            x: 100,
            y: 100,
            width: 100,
            height: 100
        };

        var mx = 4;
        var my = 4;
        var cheight = 700;
        var cwidth = 700;
        var e = event.keyCode;

        function checkmx() {
            if (rectangle.x + 100 > cwidth) {
                mx = -4;
            }
            if (rectangle.x < 0) {
                mx = 4;
            }
        }

        function checkmy() {
            if (rectangle.y + 100 > cheight) {
                my = -4;
            }
            if (rectangle.y < 0) {
                my = 4;
            }
        }

        function keydowncontrol(e) {
            //alert(e);
            if (e.keyCode == 37) {
                mx = -1;
                my = 0;
            }
            if (e.keyCode == 38) {
                mx = 0;
                my = -1;
            }
            if (e.keyCode == 39) {
                mx = 1;
                my = 0;
            }
            if (e.keyCode == 40) {
                mx = 0;
                my = 1;
            }
            //if (e == 35){
            //mx = 0
            //mx = 0
            //}
        }

        function draw() {
            checkmx();
            checkmy();
            //keydowncontrol();

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var nextx = rectangle.x + mx;
            var nexty = rectangle.y + my;

            rectangle.x = nextx
            rectangle.y = nexty
            ctx.clearRect(0, 0, cwidth, cheight);

            ctx.beginPath();
            ctx.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
            ctx.fillStyle = '#FF0000';
            ctx.fill();
            ctx.stroke();
        }

        //document.attachEvent("onkeypress", keydowncontrol);
    </script>
</head>
<body onload='setInterval(draw, 10)' onkeydown="keydowncontrol(event)">
    <canvas id="canvas" width="700" height="700"></canvas>
</body>
</html>