自己對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畫一個矩陣和內切圓試試