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

 

4.优化和完善

（1）有bug，可以作弊，选择的拥有比较的2张牌可以为同一张，需添加判断

（2）简化了书中的例子，图形图片绘制改为了数字文字的现实

（3）可以进行图形绘制，使扑克牌逼真些

（4）考虑自适应大小的设置，如扑克牌的比例随着手机屏幕大小自适应