人物行走

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 1210px;
            height: 610px;
            margin:0 auto
        }
        #ocanvas{
            border: 1px solid #c3c3c3;
        }
    </style>
</head>
<body>
<div class="box"><canvas width="1200" height="600" id="ocanvas">
    对不起你的浏览器不支持
</canvas>
    </div>
<script>
    var ocanvas=document.getElementById("ocanvas");
    var ctx=ocanvas.getContext("2d");
    var num=0;
    var m=1;
    var n=1;
    var k=0;
    var oimg1=new Image();
    var oimg2=new Image();
    var oimg3=new Image();
    var oimg4=new Image();
    var oimg5=new Image();

    oimg1.src="image/1.png";
    oimg2.src="image/2.png";
    oimg3.src="image/3.png";
    oimg4.src="image/4.png";
    oimg5.src="image/5.png";

    function fun() {
//        k+=3;
        num++;
        if(num>=6){
            num=1
        }
         if(num==1) {
            setTimeout( function () {
                ctx.clearRect(50*m, 10*n,100+k,100);
                ctx.drawImage(oimg1, 50*m+k, 10*n)
            },100)

        }
         if(num==2) {
            setTimeout( function () {
                ctx.clearRect(50*m, 10*n,100+k,100);
                ctx.drawImage(oimg2, 50*m+k, 10*n)
            },100)
        }

         if(num==3) {
            setTimeout( function () {
                ctx.clearRect(50*m, 10*n,100+k,100);
                ctx.drawImage(oimg3, 50*m+k, 10*n)
            },100)
        }

        if(num==4) {
            setTimeout( function () {
                ctx.clearRect(50*m, 10*n,100+k,100);
                ctx.drawImage(oimg4, 50*m+k, 10*n)
            },100)
        }

         if(num==5) {
            setTimeout( function () {
                ctx.clearRect(50*m, 10*n,100+k,100);
                ctx.drawImage(oimg5, 50*m+k, 10*n)
            },100)
        }
    }


    var time1=setInterval(fun,100);

     document.onkeydown=function (e) {
         clearInterval(time1);
         ctx.clearRect(0, 0,1200,600);
         var ev=e|| event;
         var keycode=ev.keyCode;
         switch(keycode){
             case 37: m--;break;
             case 38: n--;break;
             case 39: m++;break;
             case 40: n++;break;
         }
     };

    document.onkeyup = function(e) {
        var ev = e|| event;
        var keycode=ev.keyCode;
        time1=setInterval(fun,100);
    }
</script>
</body>
</html>
猜你喜欢
