您的位置: 首页  >  IT文章  >  canvas游戏小试：画一个按方向键移动的圆点

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

分类: IT文章 • 2023-11-17 20:45:30

自己对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画一个矩阵和内切圆试试

相关推荐