自己對canvas，但又有一顆做游戲的心TT。然後記錄一下對canvas的學習吧，用一個按方向鍵控制的小圓點來做練習。（編程時用了一些es6的語法） 示例的html很簡單，只有一個canvas元素: 這裡可以看到我在canvas標簽里直接定義了寬和高，這和在css裡面定義是不同的，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 {Sprite} from './sprite'
class Engine{
constructor(canvasId){
this.canvas = document.getElementById(canvasId) ;
this.context = this.canvas.getContext('2d') ;
this.spriteList = [] ;
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 ;
}
//sprite
addSprite(x,y,imgUrl,speed){
var sprite = new Sprite(this.context,x,y,imgUrl,speed)
this.spriteList.push(sprite) ;
}
//keylistener
keyPressed(e){
let listener = undefined ;
let key = "" ;
switch (e.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 this.spriteList){
listener = sprite.findKeyListener(key) ;
if(listener){
listener.run() ;
}
}
}
}
export {Engine}
在engine類里定義添加精靈的方法，並處理外界傳來的事件，裡面可能有一些定義了但沒用到的變數，以後會用到的，不過engine就是整個游戲的入口，總而言之在mian.js中只要引入engine就能讓整個效果跑起來。
最後的main.js
import {Engine} from './gameEngine'
$(function(){
init() ;
});
function init(){
initGame() ;
}
function initGame(){
var engine = new Engine('canvas') ;
engine.addSprite(10,10,null,10) ;
$(document).keydown(function (e) {
engine.keyPressed(e) ;
});
}
