【整理】HTML5游戏开发学习笔记（4）- 记忆力游戏

1.预备知识
(1)Canvas绘制多边形
(2)Canvas绘制文字

2.实现思路
涉及的对象
（1）场景Scene
场景代表了画布上的一块区域，场景里的每个物体都是场景里的一个元素,其绘制统一由场景来调用绘制
（2） 扑克牌Card
包括翻开，关闭，移除等操作
（3）一副扑克牌Deck
包括洗牌
（4）游戏玩法PlayingRule
每次选择2张扑克进行比较，相等则消除（移除），不相等，则进行下一次的2张牌的选择 ，在进行比较

3.主要代码

/*场景*/
function Scene(canvasId){
var canvas = document.getElementById(canvasId)
var ctx = canvas.getContext('2d')
var width = canvas.width
var height = canvas.height

//场景里所有的元素
var elements = []

function initEvents(){
canvas.addEventListener('click',function(e){
for(var i=0;i<elements.length;i++){
if( typeof elements[i].onEvent == 'function' ){
elements[i].onEvent(e)
}
}
},false)
}

return {

addElement : function(element){
elements.push(element)
},

init : function(){

for(var i=0;i<elements.length;i++){
if( typeof elements[i].init == 'function' ){
elements[i].init(ctx)
}
}

initEvents()
}

}
}

/*
扑克牌
德国扑克牌（一付55/54/32张）规格：9x5.7cm 8.7x5.7cm
*/
function Card(x,y,value,index){
this.x = x
this.y = y
this.value = value
this.index = index
this.status = this.StatusType.Closed

this.ctx = null
}

Card.prototype = {

constructor : Card,
width : 60,
height : 90,
ratio : 1,
StatusType : {Closed:0,Opened:1,Removed:2},
timeout : 300,

init : function(ctx){
this.ctx = ctx
this.draw()
},

draw : function(){
var ctx = this.ctx
ctx.clearRect(this.x,this.y,this.width,this.height)

switch(this.status){
case 2 :
ctx.fillStyle = '#ccc'
ctx.fillRect(this.x,this.y,this.width*this.ratio,this.height*this.ratio)
break
break
case 1 :
ctx.fillStyle = '#36f'
ctx.fillRect(this.x,this.y,this.width*this.ratio,this.height*this.ratio)
//添加文字
ctx.fillStyle = '#fff'
ctx.font = 'bold 50px Verdana'
ctx.fillText(this.value,this.x+this.width*.5-17,this.y+this.height*.5+17)
break
case 0 :
default :
ctx.fillStyle = '#f60'
ctx.fillRect(this.x,this.y,this.width*this.ratio,this.height*this.ratio)
break
}
},

onEvent : function(e,cardPicked){
var x = e.offsetX,
y = e.offsetY

//牌被选中，显示该牌的value值
if(this.x<=x&&x<=this.x+this.width&&this.y<=y&&y<=this.y+this.height){
this.open()//翻开扑克

var self = this
cardPicked(self)

setTimeout(function(){
self.close()//关闭扑克牌
},self.timeout)

}

cardPicked(null)
},

open : function(){
if(this.status == this.StatusType.Closed){
this.status = this.StatusType.Opened
this.draw()
}
},

close : function(){
if(this.status == this.StatusType.Opened){
this.status = this.StatusType.Closed
this.draw()
}
},

remove : function(){
this.status = this.StatusType.Removed
this.draw()
}

}

/*整付扑克牌 52张*/
function Deck(){
this.cards = []
this.rule = new PlayingRule()
}

Deck.prototype = {
constructor : Deck,
opts : {},
//cards : 52,
margin : 10,//牌之间的间距

init : function(ctx){
this.opts.ctx = ctx

this.draw()
this.shuffle()
},

draw : function(){
var ctx = this.opts.ctx
var x = this.margin,
y = this.margin,
i = 3,
index = -1

for(i=3;i<9;i++){
var card1 = new Card(x,y,i,++index)
var card2 = new Card(x,y+card1.height+this.margin,i,++index)

card1.init(ctx)
card2.init(ctx)

//console.log(card1.x+','+card1.y)
//console.log(card2.x+','+card2.y)

this.cards.push(card1)
this.cards.push(card2)

x += card1.width+this.margin
y = y
}
},

//洗牌
shuffle : function(){
var length = this.cards.length
var r1
var r2
var i
var value

for(i=0;i<length;i++){
r1 = Math.floor(Math.random()*length)
r2 = Math.floor(Math.random()*length)

value = this.cards[r1].value
this.cards[r1].value = this.cards[r2].value
this.cards[r2].value = value
}

/*debug*/
for(i=0;i<length;i++){
console.log(this.cards[i].index+' : '+this.cards[i].value)
}
},

onEvent : function(e){
var cards = this.cards
var length = cards.length
var i
var card
var self = this

for(i=0;i<length;i++){
card = cards[i]

if(typeof card.onEvent == 'function'){
card.onEvent(e,function(card){
if(card==null||card.status==card.StatusType.Removed){
return
}

//有扑克牌被选中
var isMatch = self.rule.pushCard(card).isMatch()
var cards = self.rule.getCards()
var length = cards.length

if(isMatch){
for(var i=0;i<length;i++){
var card = cards[i]
alert(card.index)
card.remove()
}
}
else{
//如果不匹配，当前选中的扑克牌会自动定时关闭
//DONOTHING
}

//如果有2张扑克，则清除玩法中的选中的2张扑克牌
self.rule.refresh()
})
}
}
}

}

/*玩法规则*/
function PlayingRule(){
var cards = []

return {

pushCard : function(card){
if(cards.length<2){
cards.push(card)

console.log('push:'+card.value)
}

return this
},

isMatch : function(){
if(cards.length==2){
return cards[0].value === cards[1].value
}

return false
},

refresh : function(){
if(cards.length==2){
cards.length = 0
}
},

getCards : function(){
return cards;
}

}
}

//app
window.onload = function(){

var scene = new Scene('canvas1')
var deck = new Deck()

scene.addElement(deck)
scene.init()

}

4.优化和完善
（1）有bug，可以作弊，选择的拥有比较的2张牌可以为同一张，需添加判断
（2）简化了书中的例子，图形图片绘制改为了数字文字的现实
（3）可以进行图形绘制，使扑克牌逼真些
（4）考虑自适应大小的设置，如扑克牌的比例随着手机屏幕大小自适应