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