• canvas游戏小试:画一个按方向键移动的圆点


    自己对canvas,但又有一颗做游戏的心TT。然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习。(编程时用了一些es6的语法

    示例的html很简单,只有一个canvas元素:

    <html>
        <head>
            <link rel="stylesheet" href="css/base.css">
            <link rel="stylesheet" href="css/index.css">
            <script src="js/commons.js" charset="utf-8"></script>
            <script src="js/main.js"></script>
        </head>
        <body>
            <header></header>
            <canvas id="canvas" width=1000 height=500></canvas>
        </body>
    </html>

    这里可以看到我在canvas标签里直接定义了宽和高,这和在css里面定义是不同的,canvas元素其实有两套大小

    1.元素本身大小

    2.绘画表面大小

    默认情况下canvas的绘画表面大小是300x150像素,在css设置宽和高只能修改元素本身大小,但绘画表面大小不变,这样就会使浏览器对绘画表面进行缩放来适应元素本身的大小。

    所以要定义宽和高要定义在标签或者在js里面定义,如下。

    var canvas=document.getElementById("canvas");
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    然后我们来说逻辑的部分,其实比较简单,但作为一个可继续发展的游戏雏形,我们利用面向对象编程的思想

    定义engine类,来表示游戏的入口,sprite类表示游戏中的对象,listener类来监听游戏的事件

    依照顺序逻辑,先看listener类:

    class Listener{
      constructor(key,callback){
        this.key = key ;
        this.callback = callback ;
      }
    
      run(){
        this.callback() ;
      }
    
      getKey(){
        return this.key ;
      }
    }
    
    export {Listener}

    主要有两个对象,一个是它的key值,用来说明它是干什么的监听器,另外是一个回调函数,用来触发事件

    sprite类

    import {Listener} from './listener'
    
    class Sprite{
    
      constructor(context,x,y,imgUrl,speed){
        this.x = x ;
        this.y = y ;
        this.imgUrl = imgUrl ;
        this.speed = speed||10 ;
        this.listeners = [] ;
        this.context = context ;
        this.drawImage() ;
        this.initListener() ;
      }
    
      drawImage(){
        this.context.fillStyle = 'black' ;
        this.context.beginPath();
        this.context.arc(this.x,this.y,5,0,2*Math.PI,true);//radius = 5
        this.context.closePath();
        this.context.fill();
      }
    
      update(x,y){
        this.context.clearRect(this.x-5,this.y-5,10,10);
        this.context.beginPath();
        this.context.arc(x,y,5,0,2*Math.PI,true);
        this.context.closePath();
        this.context.fill();
        this.x = x ;
        this.y = y ;
      }
    
      addListener(keyListener){
        this.keyListenerList.push(keyListener) ;
      }
    
      findKeyListener(key){
        for(let i in this.listeners){
          if(this.listeners[i].getKey()===key){
            return this.listeners[i] ;
          }
        }
        return null ;
      }
      //default listener
      initListener(){
        this.listeners['up'] = new Listener('up',()=>{
          this.update(this.x,this.y-this.speed) ;
        });
        this.listeners['down'] = new Listener('down',()=>{
          this.update(this.x,this.y+this.speed) ;
        });
        this.listeners['left'] = new Listener('left',()=>{
          this.update(this.x-this.speed,this.y) ;
        });
        this.listeners['right'] = new Listener('right',()=>{
          this.update(this.x+this.speed,this.y) ;
        });
      }
    
    }
    
    export {Sprite}

    精灵类中引用了之前定义的监听类,然后定义了“上下左右”这是个默认监听对象来加入到这个精灵自身的监听列表中,正常游戏是用帧动画的,我们这先用一个圆来代替~。

    drawImage是画圆,在构造函数中调用,来展示形象。update函数来更新圆的位置,其实是把原先的圆清掉重画一次,它被监听器触发。

    findKeyListener这个函数是用来遍历自己的监听器列表的,里面值得说一下的是循环我用的for in,这是因为我在下面定义默认监听器的时候键值用的stirng而不是数字。如果是正常的[0.....n]这样以数字为索引的数组的话,建议用es6的for of来遍历

    for (var value of Array) {
      console.log(value);//不是key,而是值
    }

    engine类

    import {Player} from './player'
    import {Barrier} from './barrier'
    
    class Engine{
    
      constructor(canvasId){
        this.canvas = document.getElementById(canvasId) ;
        this.context = this.canvas.getContext('2d') ;
        this.playerList = [] ;
        this.barrierList = [] ;
        this.keyListenerList = [] ;
        //time
        this.startTime = 0 ;
        this.lastTime = 0 ;
        this.currentTime = 0 ;
        this.FPS = 30 ;
        //height and width
        this.bgHeight = this.canvas.height ;
        this.bgWidth = this.canvas.width ;
      }
    
      start(){
       this.listenerStart() ;
      }
    
      //sprite
      addPlayer(x,y,radius,imgUrl,speed){
        var player = new Player(this.context,x,y,radius,imgUrl,speed)
        this.playerList.push(player) ;
      }
    
      addBarrier(x,y,width,height){
        var barrier = new Barrier(this.context,x,y,width,height) ;
        this.barrierList.push(barrier) ;
      }
      //keylistener
      keyPressed(keyCode,spriteList,barrierList){
        let listener = undefined ;
        let key = "" ;
    
        switch (keyCode){
          case 32: key = "space" ; break ;
          case 37: key = "left" ; break ;
          case 38: key = "up" ; break ;
          case 39: key = "right" ; break ;
          case 40: key = "down" ; break ;
          case 13: key = "enter" ; break ;
        }
    
        for(let sprite of spriteList){
          listener = sprite.findKeyListener(key) ;
          if(listener){
            sprite.getBarrierList(barrierList) ;
            listener.run() ;
          }
        }
      }
    
      listenerStart(){
        console.log('listener start') ;
        let keyPressed = this.keyPressed ;
        let spriteList = this.playerList ;
        let barrierList = this.barrierList ;
        let keyList = [] ;
        let preesedTimer = null ;
        $(document).keydown((e)=>{
          if($.inArray(e.keyCode, keyList)==-1){
            keyList.push(e.keyCode) ;
          }
          clearInterval(preesedTimer) ;
          keyPressed(e.keyCode,spriteList,barrierList) ;
        });
        $(document).keyup((e)=>{
          if(keyList){
            if(e.keyCode==keyList[keyList.length-1]&&keyList.length!=1){
              keyList.pop();//先删除这个事件本身
              clearInterval(preesedTimer) ;
              let keyCode = keyList[keyList.length-1];//获得前一个事件
              //todo 持续触发keyPressed
              preesedTimer = setInterval(function(){
                keyPressed(keyCode, spriteList, barrierList);
              },30);
            }else{
              //松开的键是之前进栈的键,就直说把它从栈里删掉
              let idx = $.inArray(e.keyCode, keyList) ;
              keyList.splice(idx,1) ;
              if(keyList.length==0){
                clearInterval(preesedTimer) ;
              }
            }
          }
          console.log("up"+keyList.length) ;
        });
      }
    
    }
    
    export {Engine}

    在engine类里定义添加精灵的方法,并处理外界传来的事件,里面可能有一些定义了但没用到的变量,以后会用到的,不过engine就是整个游戏的入口,总而言之在mian.js中只要引入engine就能让整个效果跑起来。

    ps:一开始我是把键盘监听放到main.js里面的,后来发现逻辑不对,因为我们平时玩游戏的话经常会很多个方向键一起按,比如说你在玩赛车类游戏,你要拐弯的时候肯定不会松油门,所以你是在按了↑的基础上又按了→。当你拐弯成功之后你会松开→键让车继续直行,这里面其实有一个栈的关系,先被按的键会被压进去,当别的键松开的时候再从栈里弹出来。关键在你按键的时候调用的是keydown函数,这个函数是默认在keyup之前都是以30ms循环调用,当一个按键事件从栈里弹出来的时候你不能让它直接调用keydown函数(js的机制)。所以为了模拟这个keydown我又写了一个定时器。总的来说我按键监听写的有点复杂。。。

    最后的main.js

    import {Engine} from './gameEngine'
    
    $(function(){
      init() ;
    });
    
    function init(){
      initGame() ;
    }
    
    function initGame(){
    
    var engine = new Engine('canvas') ;
    engine.addPlayer(10,10,10,null,10) ;
    engine.addBarrier(100,100,50,200) ;
    engine.start() ;
    }

     最后还有一个还有遗留问题就是,我拿圆点作为形象,删除的时候用clearRect,其判断的其实点与矩阵内切圆不一致。。导致擦除的时候会有黑线。。大家可以利用rect和arc画一个矩阵和内切圆试试

  • 相关阅读:
    Navicat破解安装
    jrebel and xrebel
    JMTER连接数据库
    jmter参数化
    JMTER逻辑控制器
    JMter定时器和聚合报告
    Jmter文件上传
    npm安装教程
    adb调试工具
    Jmter前/后置处理器
  • 原文地址:https://www.cnblogs.com/maskmtj/p/5776873.html
Copyright © 2020-2023  润新知