canvas 实现键盘控制人物移动

html 复制代码
<!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>
javascript 复制代码
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();
   
}
相关推荐
好好研究1 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
伍哥的传说5 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点5 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian6 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao6 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴6 小时前
Smoothstep
前端·webgl
若梦plus7 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员7 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉7 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro