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();
   
}
相关推荐
桃园码工4 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲44 分钟前
2024不一样的VUE3期末考查
前端·javascript·程序员
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami1 小时前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda2 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡2 小时前
lodash常用函数
前端·javascript
emoji1111112 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼2 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250032 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js