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();
   
}
相关推荐
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月6 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀6 小时前
html初学者第一天
前端·html
脑袋大大的7 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码