canvas 实现键盘控制人物移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="index.js"></script>
    <style>
        canvas{
            background-color: rgb(255, 196, 0);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="512" height="480"
        style="border:1px solid #000;">
    </canvas>
</body>
</html>

window.onload=function(){ 
    //获取画布对象
    var canvas=document.getElementById('canvas')
    //获得CanvasRenderingContext2D 对象，该对象提供基本的绘图命令
    // var ctx=canvas.getContext('2d') 
    var ctx=canvas.getContext('2d')
    //初始化对象，背景 英雄 怪兽
    // var bg=new Image();
    // bg.src='bg.png'
    
    var heroImg=new Image();
    heroImg.src='hero.png'
    
    var monsterImg=new Image();
    monsterImg.src='monsterImg.png'

    //英雄 怪兽 默认坐标位置
    var hero={
        x:0,
        y:0,
        speed:1
    }
    var monster={
        x:0,
        y:0
    }
    hero.x=canvas.width/2; //攻关后 ，英雄位置固定
    hero.y=canvas.height/2;
    monster.x=Math.floor(Math.random()*canvas.width);//怪兽位置随机
    monster.y=Math.floor(Math.random()*canvas.height);
    //记录得分
    var num=0;
    //开始游戏
    var keyDown={};
    //事件   监听键盘点击事件
    addEventListener('keydown',function(e){
        // ctx.restore();
        // ctx.save();
        // ctx.setTransform(1,0,0,1,0,0) 
        //e.keyCode 获取 上 下 左 右 上38 下40 左37 右39
        ctx.clearRect(0,0,canvas.width,canvas.height)

        keyDown[e.keyCode]=true;
        
    })
    //事件   监听键盘松开事件
    addEventListener('keyup',function(e){
        //e.keyCode 获取 上 下 左 右 上38 下40 左37 右39 
        ctx.clearRect(0,0,canvas.width,canvas.height)

        delete keyDown[e.keyCode]  //清除按下的属性 
    })
    function play(){
        //判断的是 keyDown这个对象里面是否有38这个键
        
        if(38 in keyDown){      //向上
            hero.y-=hero.speed;
        }
        if(40 in keyDown){     //向下     
            hero.y+=hero.speed;
        }
        if(37 in keyDown){      //向左
            hero.x-=hero.speed;
        }
        if(39 in keyDown){      //向右
            hero.x+=hero.speed;
        }
        if(hero.x<=(monster.x+4)&&hero.y<=(monster.y+4)&&
            monster.x<=(hero.x+4)&&monster.y<=(hero.y+4)){ 
        ctx.clearRect(0,0,canvas.width,canvas.height)

            num++;
            hero.x=canvas.width/2; //攻关后 ，英雄位置固定
            hero.y=canvas.height/2;
            monster.x=Math.floor(Math.random()*canvas.width);//怪兽位置随机
            monster.y=Math.floor(Math.random()*canvas.height);

        }

        over()
    }
    //游戏结束
    var flag=false;//未结束
    function over(){
        if(hero.x<=0 || hero.x>=canvas.width || hero.y<=0 || hero.y>=canvas.width){
            flag=true;
            num=0;
            alert('游戏结束！！！')
        }
    }
    //渲染图片 文字
    function render(){ 
        ctx.drawImage(monsterImg,monster.x,monster.y,30,30)//渲染怪兽
        ctx.drawImage(heroImg,hero.x,hero.y,30,30)//渲染英雄
        ctx.font="20px '微软雅黑'"
        ctx.fillStyle='#333'
        ctx.fillText('你的得分'+num,30,30);
        play();
    }
    // render(); 
    function init(){
        render();
        if(!flag){ 
                //动画的节流 requestAnimationFrame
                requestAnimationFrame(init)  
            
            // || webkitRequestAnimationFrame(init) 
            // || wozRequestAnimationFrame(init) ||
            // msRequestAnimationFrame(init)
            // requestAnimationFrame(init);//专门针对于动画做的，避免卡顿的
        }
    }
    init();
   
}