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();
   
}
相关推荐
一城烟雨_2 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想2 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师3 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧3 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信4 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子4 小时前
CSS单位完全指南
前端·css
SunTecTec5 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI5 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
涵信5 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
codingandsleeping5 小时前
Express入门
javascript·后端·node.js