博客园_氣如蘭兮長不改，心若蘭兮終不移。

HTML5 Canvas编写五彩连珠（6）：试玩

2012-03-19T14:56:00Z

上节中讲了如何寻路，在和朋友们讨论时都反应有时走的不太对，绕远路了，其实代码主要是大方向的判断比如目标在右上，那应该是先右还是先上这个并没有做处理，如果这个做了处理，效果会更好一些，但也难免会走弯路。贪心就是这样，不是最优，接近最优。也希望其他的同学有意见的可以讨论下。我这也只是个人想法。

既然可以走动了，那就可以判断是否可以消除同样颜色的行、列或斜线了。只要>=5个同样的色球，就清除他们，并且可以继续移动。如果不可以清除，那就再增加3个球。

clearLine: function (x1, y1, color, isClick) {
if (this.isEmpty(x1, y1)) {
if (isClick) game.ready.flyin();
return;
};
//给定一个坐标，看是否有满足的line可以被消除
//4根线一 | / \

var current = this.getBubble(x1, y1);
if (!current.color) {
console.log(current);
}
var arr1, arr2, arr3, arr4;
arr1 = this.bubbles[y1];//横线很简单，就是数组的一项，现成的

arr2 = [];
for (var y = 0; y < game.cellCount; y++)
arr2.push(this.getBubble(x1, y));//竖线就是一列。

arr3 = [current];
arr4 = [current];
for (var i = 1; i < game.cellCount ; i++) {
if (x1 - i >= 0 && y1 - i >= 0)//\斜线的上半部分...
arr3.unshift(this.getBubble(x1 - i, y1 - i));
if (x1 + i < game.cellCount && y1 + i < game.cellCount)//\斜线的下半部分
arr3.push(this.getBubble(x1 + i, y1 + i));

if (x1 - i >= 0 && y1 + i < game.cellCount)// /斜线的下半部分
arr4.push(this.getBubble(x1 - i, y1 + i));
if (x1 + i < game.cellCount && y1 - i >= 0)// /斜线的上班部分
arr4.unshift(this.getBubble(x1 + i, y1 - i));
}

var line1 = getLine(arr1);
var line2 = getLine(arr2);
var line3 = getLine(arr3);
var line4 = getLine(arr4);

var line = line1.concat(line2).concat(line3).concat(line4);
if (line.length < 5) {
if (isClick) game.ready.flyin();
return;
}
else {
var me = this;
var i = 0;

game.play("clearline", function () {
if (i == line.length) {
game.score.addScore(line.length);
game.stop("clearline");
me.isMoving = false;
//game.ready.flyin();
return;
}
me.isMoving = true;
var p = line[i];
me.setBubble(p.x, p.y, null);
i++;
}, 100);
}

function getLine(bubbles) {

var line = [];
for (var i = 0; i < bubbles.length; i++) {
var b = bubbles[i];
if (b.color == color) {
line.push({ "x": b.x, "y": b.y });
}
else {
if (line.length < 5)
line = [];
else
return line;
}
}
if (line.length < 5)
return [];
return line;
}
},

大家可以看看代码，主要有两点 1、或许需要处理的横竖斜线 4个数组，然后看这4个数组是否有连续的。判断是否连续只需要一个状态数组来维持就可以了。
由于考虑到同时消除多行的情况，所以要把连续的line 连接在一起，并在结算得分时考虑奖励。
isClick参数主要用于判断是否是用户点击进行消行的还是新泡泡飞入产生的。如果达不到消行条件并且是飞入的，那就不能再调用飞入了，否则死循环了。

满足的消行代码也比较简单，就是播放一个消行动画，其实这个动画真心没劲，要想设计好些可以做个渐变偏移消除。现在我发现起初没有设计一个数组来维护状态有些不太明智，因为还有奖励的星星和炸弹要绘制，挺麻烦的。。那么，把积分显示出来吧。这样就可以先试玩起来了：）

game.score = {
basic: 0,
operate: 0,
star1: 0,
star2: 0,
boom: 0,
draw: function () {
var startX = game.cellWidth * 10 + game.map.startX;
var startY = game.map.startY;
var ctx = game.ctx;
ctx.save();
ctx.translate(startX, startY);
ctx.clearRect(0, 0, 150, 400);
ctx.strokeStyle = "#456";
//ctx.strokeRect(0, 0, 150, 200);
ctx.font = "24px 微软雅黑";
ctx.fillStyle = "#fefefe";
ctx.fillText("score:" + (this.basic * 5 + this.star1 * 8 + this.star2 * 10 + this.boom * 20), 0, 30);
ctx.stroke();
ctx.restore();
},
addScore: function (length) {
switch (length) {
case 5:
this.basic++;
break;
case 6:
this.star1++;
break;
case 7:
this.star2++;
break;
default:
this.boom++;
break;
}
this.draw();
console.log(this.score);
},
};

第三节在设计里谈到了百搭星和炸弹，我太懒了，不打算讲了，因为这些处理也没有什么复杂的，HTML5 Canvas的的基础学习也算可以了。后面应该学一些更深入的东西，比如如何处理性能、物体碰撞、运动学神马的。。。

现在游戏应该还有bug，大家可以看看代码发现吧，这个系列就到这了，谢谢大家。

试玩地址：http://zhengliangjun.sinaapp.com/colorline.html
源码下载：http://download.csdn.net/download/maddemon/4154990

本文链接

HTML5 Canvas编写五彩连珠（5）：寻路

2012-03-18T15:17:00Z

上节主要做了动画的实现，感觉还是比较有意思的。游戏的性能好不好，重绘应该比较重要吧，菜鸟瞎想了下呵呵。
本节就要做对泡泡的操作，上节后面提到了点击泡泡后泡泡要做出闪动响应，那我们我们如何获得被点击了哪个泡泡呢？
其实Canvas也是html的一个元素而已，所以我们可以给Canvas加click事件。来查看click时鼠标的坐标，这样就等得出点击了map的哪个位置。
我们给game增加一个click方法，当Canvas点击时调用此方法。
要实现的效果是：当Canvas时被点击时有几种可能：
1、没点到map 那就不作响应
2、点到了泡泡，那该泡泡要做出响应（闪）
3、如果之前有点击过其他的泡泡，则取消之前的泡泡的响应（clicked.stop)，如果之前的泡泡是自己，则不作响应。并把clicked作为自己，以体后面的操作。
4、如果点击到的是空格，如果之前点击了泡泡，那就尝试移动这个泡泡，如果clicked为null（之前没泡泡）那就不作任何响应。如果可以移动，则取消闪动，并清除clicked，开始移动。

onclick: function (e) {
var px = e.offsetX - game.map.startX;
var py = e.offsetY - game.map.startY;
if (px < 0 || py < 0 || px > game.map.width || py > game.map.height) {
return;
}
var x = parseInt(px / game.cellWidth);
var y = parseInt(py / game.cellWidth);

var bubble = game.map.getBubble(x, y);
if (bubble.color) {
if (this.clicked) {
//同一个泡不做反映
if (this.clicked.x == x && this.clicked.y == y) {
return;
}
this.clicked.stop();
}
this.clicked = bubble;
bubble.play();
}
else {
if (this.clicked) {
this.clicked.stop();
//移动clicked
game.map.move(this.clicked, bubble);
}
}
//console.log("x:" + x + " y:" + y);
},

寻路的代码还没写，因为这个需要考虑怎么实现。我绞尽脑汁终于想到了一个办法。暂且撇开游戏的代码，单独实现下两点的寻路代码。
先给定一个棋盘，假如如下：
1 1 1 1 1
0 0 1 0 1
0 0 1 0 1
1 0 0 1 1
要想从最下面一行中间的点（2，3）移动到左上角的（0，1），该如何设计呢？
一个棋子能否移动，要看他相邻的4个子是否为0，如果是0则可以移动。所以我们可以通过递归来获得所有相连的0的记录。这个记录用树结构来存储，直到我们无法继续探测为0的格子或到达目的地。我们把当前的棋子的格子设为 root，他相邻的棋子是他的孩子。这样的话，我们会得到一棵树的结果如下：

是不是？这样的画我们就可以直接看到了整个路径(2,3 -> 1,3 -> 1,2 -> 0,2 -> 0,1)。思路很清晰，只要递归构建子节点就ok了。代码如下：

我加了一个parent，就是指向父亲的指针，那样就不用再去遍历这棵树了。可以直接从goalNode的结果得到整个路径：）虽然偷懒，但也是要复出代价的，因为这样走的路径不是最短路线，比较傻，怎么选择最优路线呢？最笨的方法就是把所有的路径都得到（深度优先遍历树N遍- -）然后比较。这个显然效率不高。开始我也不知道效果会这么差，等一运行（你运行下就知道了），我发现，是代码写的不好（废话）。因为我们每次的判断顺寻都是左上右下，这样路径总是这个方向探索，而最优的路径应该是朝目标点的方向探索。由于是递归查找，所以，对当前的node和目标node进行坐标的方向判断，然后调整判断顺序，这样是得到的才是比较短的路径。

代码虽然写的比较傻，但这种方式不得不说好就一个字：）

既然寻路已经实现了，那么下面就交给map了，map来负责让泡泡走起来。其实就是根据路径给泡泡着色- - ，代码也不复杂。

move: function (bubble, target) {
var path = this.search(bubble.x, bubble.y, target.x, target.y);
if (!path) {
//显示不能移动s
alert("过不去");
return;
}
//map开始播放当前泡的移动效果
//两种实现方式，1、map按路径染色，最后达到目的地 2、map生成一个临时的bubble负责展示，到目的地后移除
//console.log(path);
var me = this;
var name = "move_" + bubble.x + "_" + bubble.y;
var i = path.length - 1;
var color = bubble.color;
game.play(name, function () {
if (i < 0) {
game.stop(name);
return;
}
path.forEach(function (cell) {
me.setBubble(cell.x, cell.y, null);
});
var currentCell = path[i];
me.setBubble(currentCell.x, currentCell.y, color);
i--;

}, 50);
},
search: function (x1, y1, x2, y2) {

var history = [];
var goalCell = null;
var me = this;

getCell(x1, y1, null);
if (goalCell) {
var path = [];

var cell = goalCell;
while (cell) {
path.push({ "x": cell.x, "y": cell.y });
cell = cell.parent;
}

return path;
}
return null;

function getCell(x, y, parent) {
if (x >= me.bubbles.length || y >= me.bubbles.length)
return;
if (x != x1 && y != y2 && !me.isEmpty(x, y))
return;

for (var i = 0; i < history.length; i++) {
if (history[i].x == x && history[i].y == y)
return;
}

var cell = { "x": x, "y": y, child: [], "parent": parent };
history.push(cell);

if (cell.x == x2 && cell.y == y2) {
goalCell = cell;
return cell;
}

var child = [];
var left, top, right, buttom;
//最短路径的粗略判断就是首选目标位置的大致方向
if (x - 1 >= 0 && me.isEmpty(x - 1, y))
left = { "x": x - 1, "y": y };
if (x + 1 < me.bubbles.length && me.isEmpty(x + 1, y))
right = { "x": x + 1, "y": y };
if (y + 1 < me.bubbles.length && me.isEmpty(x, y + 1))
buttom = { "x": x, "y": y + 1 };
if (y - 1 >= 0 && me.isEmpty(x, y - 1))
top = { "x": x, "y": y - 1 };

if (x > x2) {
if (y > y2)
child = [left, top, right, buttom];
else if (y < y2)
child = [left, buttom, right, top];
else
child = [left, top, right, buttom];
}
else if (x < x2) {
if (y > y2)
child = [right, top, left, buttom];
else if (y < y2)
child = [right, buttom, left, top];
else
child = [right, top, left, buttom];
}
else if (x == x2) {
if (y > y2)
child = [top, left, right, buttom];
else if (y < y2)
child = [buttom, left, right, top];
}

for (var i = 0; i < child.length; i++) {
var c = child[i];
if (c) cell.child.push(getCell(c.x, c.y, cell));
}
return cell;
}
},

试玩地址：http://zhengliangjun.sinaapp.com/colorline.html

后面剩下的就是判断如何消除、加分、防止误操作之类的内容了。

本文链接

HTML5 Canvas编写五彩连珠（4）：动画

2012-03-18T06:30:00Z

上一节中，我们留下了一个flyin的方法没有介绍，这里想单独写一篇html5的动画实现。
在第二节中我们实现了画一个泡泡，并且成功的擦除了泡泡，但当时也说了别把棋盘的线给擦掉了，所以做了偏移量。所以说html5 Canvas还是低级，没有图层的概念，擦掉再想补回来，怎么补？答案就是重绘。没错，整个Canvas重绘，这样就能不用担心补哪里了。虽然带来了性能的损失，但绝对减少的编码难度。而且计算机的能力也不差这点损失。那么重绘的话，我们在Canvas是上所有的需要绘制的对象都应该有draw方法。这是必须的。另外，所有的元素都有个上下的概念，所以要先绘制下面的，再绘制上面的。而这个上下就得靠子元素的概念，这样在父元素绘制完毕后遍历其子元素绘制，就不用担心掩盖的问题。

如果想把ready区的3个泡“飞入”棋盘，就需要让Canvas在泡移动的时候进行重绘，泡泡不动时不需要重绘。泡泡的移动很容易实现，只要改变他的x,y坐标即可。如果想达到动画的效果，就得在改变坐标期间，定时重绘，可以使用setInterval来实现。
另外，我们不光飞入的动作需要重绘，游戏开始后玩家还要点击移动一个泡泡到另外一个格子，所以这里也要重绘。那绘制的信息这么多，整个重绘工作都要交给game来进行，game控制所有的父元素。

start: function () {
this.map.init();
this.ready.init();
this.draw();
this.canvas.onclick = this.onclick;
},
over: function () {
alert("GAME OVER");
},
draw: function () {
this.ctx.clearRect(0, 0, 400, 600);
this.ctx.save();
this.map.draw();
this.ready.draw();
this.ctx.restore();
},
play: function (action, interval) {
var me = this;
play = setInterval(function () {
action();
me.draw();
}, interval || 1);
},
stop: function () {
clearInterval(play);
this.draw();
//console.log(this.ready.bubbles.length);
},

game.start就是初始化所有的父元素，
game.over自然不必说，只是这里没有写具体代码，结束时应该无法继续操作泡泡。
game.draw 绘制所有的父元素
game.play 就是重绘方法，需要重绘时掉用此方法。接收2个参数，第一个是重绘时需要做的动作，interval是绘制的间隔时间。不同的动作可能间隔不一样。
可能这种实现是野路子，真正的重绘应该是游戏开始后就不听的调用重绘方法，而不是具体哪里调用，只是在具体的精灵（每个元素）Update自己状态就像我这里的action。这里我们暂且这样实现，后面如果达不到需求再重构这个重绘的代码，毕竟核心的代码不变，只是改改机制不是大问题。
game.stop 停止重绘，又调用了一次draw，是为了保证最后的绘制没问题。

接下来考虑下flyin飞入的实现。知道起始和结束的xy坐标，飞入的路径不是问题，无非是x y的加加减减，那么动画方面，我们的game.play的action就是来加减ready.bubbles的xy坐标。飞入的逻辑并非这么简单，首先需要3个没染色空格，如果不足3个，那就GameOver了，所以map需要提供一个返回3个空格子的方法，另外，飞入之后ready区要重新生成新的泡泡，而这几个被飞的泡泡需要删除，并且map要对3个空格子进行染色。这就完成了整个飞入效果。
其实还有一个逻辑就是飞入完毕后检查是否有哪些泡泡可以被消除，这个我们后面再讲。
先看获取3个空格的方法：

getEmptyBubbles: function () {
var empties = [];
this.bubbles.forEach(function (row) {
row.forEach(function (bubble) {
if (!bubble.color) {
empties.push(new Bubble(bubble.x, bubble.y));
}
});
});
if (empties.length <= 3) {
game.over();
return [];
}

var result = [];
var useds = [];
for (var i = 0; i < empties.length; i++) {
if (result.length == 3) {
break;
}
var isUsed = false;
var ra = game.getRandom(empties.length);
for (var m = 0; m < useds.length; m++) {
isUsed = ra === useds[m];
if (isUsed) break;
}
if (!isUsed) {
result.push(empties[ra]);
useds.push(ra);
}
}
console.log(useds);
return result;
},

获取3个随机的空格还是挺多代码的。。。然后就是flyin的实现了。

首先定一个一个status，来存飞入的状态。3个都飞完毕才能做后面的逻辑。Bubble对象也为此增加了px和py俩个成员（即Bubble的实际坐标），这样才能控制每个像素的移动。其实在计算飞入路径时我写了很久的代码，别看现在就这么几行，开发过程中还是颇费力。各种诡异的飞行。。。开始是按x++ y++递增飞行的，这样就是45°角飞行，但显然飞行线路（起始到结束的线）的倾斜度不是45°，那就会出现先飞完x或y，再走直线，很傻的。所以要用斜率来计算当前的y坐标。而x的坐标可以固定常熟移动。我画了一个斜率的公式，忘记的同学可以看看下。根据长宽的比率，就能计算当前的y值。

flyin: function () {
var emptys = game.map.getEmptyBubbles();
if (emptys.length < 3) {
//GAME OVER
game.over();
return;
}
var me = this;
var status = [0, 0, 0];
game.play(function () {
if (status[0] && status[1] && status[2]) {
game.stop();
status = [0, 0, 0];
me.bubbles = [];
me.genrate();
return;
}

for (var i = 0; i < me.bubbles.length; i++) {
if (status[i]) {
continue;
}
var target = emptys[i];
var x2 = target.px + game.map.startX - me.startX;
var y2 = target.py + game.map.startY - me.startY;

var current = me.bubbles[i];

var tmpWidth = 2;
if (current.px < x2) {
current.py = ((y2 - current.py) / (x2 - current.px)) * tmpWidth + current.py;
current.px += tmpWidth;
}
else if (current.px > x2) {
current.py = ((y2 - current.py) / (current.px - x2)) * tmpWidth + current.py;
current.px -= tmpWidth;
}
else {
current.py += tmpWidth;
}
if (current.py > y2) {
current.py = y2;
}

if (current.px > x2) {
current.px = x2;
}

if (current.px == x2 && current.py == y2) {
status[i] = 1;
current.x = target.x;
current.y = target.y;
game.map.addBubble(current);
console.log(1);
}
}
});

}

既然我们已经实现了动画效果，那么接下来顺便再实现一个动画效果，就是点击泡泡时，泡泡要做出响应（就是忽闪忽闪的），要不然用户都不知道点了没有。所以Bubble也要增加一个闪动的action。

代码的意思是让间隔50毫秒，重绘一次光照的亮度，亮度值（外圆的半径）10和30之间来回荡。这样就亮了暗，暗了再亮。很有意思：）

Bubble.prototype.play = function () {
var me = this;
var isUp = true;
game.play("light_" + this.x + "_" + this.y, function () {
if (isUp) {
me.light++;
}

if (!isUp) {
me.light--;
}
if (me.light == 30) {
isUp = false;
}
if (me.light == 10) {
isUp = true;
}
}, 50);
};

Bubble.prototype.stop = function () {
//this.light = 10;
var me = this;
game.stop("light_" + this.x + "_" + this.y);
game.play("restore_" + this.x + "_" + this.y, function () {
if (me.light > 10) {
me.light--;
}
else {
me.light = 10;
game.stop("restore_" + me.x + "_" + me.y);
}
}, 50);
};

细心的朋友可能会发现，在调用Game.stop的方法的参数上增加了一个参数。这里我要说明下。如果没有参数的情况，game.play和stop会造成问题，因为用的都是一个interval，clear的话会打断其他的动画，所以我们把每个action都要传递一个name，这样就能让game粒度更细的控制每个action了。game的播放代码也做了响应的调整，如下：

play: function (name, action, interval) {
var me = this;
this.actions[name] = setInterval(function () {
action();
me.draw();
}, interval || 1);
},
stop: function (name) {
clearInterval(this.actions[name]);
this.draw();
},

效果演示地址：http://jsfiddle.net/maddemon/VtMSU/embedded/result/

本文链接

HTML5 Canvas编写五彩连珠（3）：设计

2012-03-17T09:24:00Z

在看了几篇Canvas相关的文章后，发现前两节的代码实现还是有问题，因为知道的少，所以只能在自己已知的知识上做实现。不过还好，这是一个发现的过程，也是一个纠错和完善的过程。我第一次尝试一边学习一遍写博客，我想这也有助我的学习，可以把知识掌握的牢固些，起码忘的慢一些吧：）。

前两节学习了几个基本绘制的方法，lineTo moveTo和arc，也了解坐标的情况，但写的比较傻，只是单纯的实现。比如棋盘的起始坐标如果有偏移量，我们还要计算他的具体开始坐标和结束坐标，实际上Canvas有现有的方法提供偏移的功能。他叫 translate，另外还有缩放scale、旋转rotate，他们都可以用transform代替。所以，在代码方面还会有些调整。不过这个的学习恰巧也让我知道如何实现动画效果。如果多个元素在一个Canvas上，实现动画，必然会需要擦除重绘的情况，如果元素之间有覆盖的情况，擦除就需要多考虑了。当然，简单的办法就是把整个画布根据当然所有元素的位置重新绘制一遍。所以在代码设计方面，需要把不同的元素独立出来，每个元素都有自己的draw方法，并且要依照次序绘制Canvas。

分析一下游戏所需的元素：1、棋盘（地图）2、泡泡 3、等待区域（新的3个即将进入棋盘的泡泡）4、奖励区域（白搭星、超级百搭星、炸弹）5、统计信息 6、按钮
所以在对象的设计方面起码要有几类棋盘(map)、新泡泡区（ready）、奖励区（awards）、泡泡（bubble）、星星1(star1) 、星星2(star2) 、炸弹(boom)、统计积分（score），还要包括游戏背后的数据（data）。 OK，先这么规划，挨个的去实现。先把map和bubble重写了。
之前把map写成了类，显然是不合适的，因为这个游戏不可能会有多个map，所以直接定义为对象更方便。而泡泡显然需要很多，所以需要写成类比较方便。游戏里面所有对象需要访问的全局变量和常量需要定义在一个game对象里，游戏开始则是调用game.start()的方法。所以先看下game的定义：

cellCount就是格子的总数，cellwidth是每个格子的宽度，因为不光map里需要这个，所以就定义在了这里，mode 是游戏模式 5是简单 7是困难。
再看下map的代码：

game.map = {
startX: 40.5,
startY: 60.5,
width: game.cellCount * game.cellWidth,
height: game.cellCount * game.cellWidth,
bubbles: [],
init: function () {
for (var i = 0; i < game.cellCount; i++) {
var row = [];
for (var j = 0; j < game.cellCount; j++) {
row.push(new Bubble(i, j, null));
}
this.bubbles.push(row);
}
},
draw: function () {
var ctx = game.ctx;
ctx.save();
ctx.translate(this.startX, this.startY);
ctx.beginPath();
for (var i = 0; i <= 9; i++) {

var p1 = i * game.cellWidth;;
ctx.moveTo(p1, 0);
ctx.lineTo(p1, this.height);

var p2 = i * game.cellWidth;
ctx.moveTo(0, p2);
ctx.lineTo(this.width, p2);
}
ctx.strokeStyle = "#555";
ctx.stroke();

//绘制子元素（所有在棋盘上的泡）
this.bubbles.forEach(function (row) {
row.forEach(function (bubble) {
bubble.draw();
});
});
ctx.restore();
},
addBubble: function (bubble) {
var thisBubble = this.bubbles[bubble.x][bubble.y];
thisBubble.color = bubble.color;
},
getBubble: function (x, y) {
var thisBubble = this.bubbles[x][y];
if (!thisBubble.color) {
return null;
}
else {
return thisBubble;
}
}
};

map的init初始化方法里我先把所有的泡泡部署好了，但是都没有染色，我并没有在ui的背后维护一个数组，因为我觉得泡泡有没有颜色就代表 0,1了，所以就这样也行。
draw方法不再想之前那样把起始坐标计算进去了，而是使用了translate方法，这样就很方便写代码了。
addBubble其实就是染色而已，接收参数是一个泡泡对象，这个对象来自ready区域的泡泡。

Ready区域其实就像俄罗斯方块那样，有三个预备的泡泡即将进入map区域。

game.ready = {
startX: 40.5,
startY: 20.5,
width: game.cellWidth * 3,
height: game.cellWidth,
bubbles: [],
init: function () {
this.genrate();
var me = this;
me.flyin();
},
genrate: function () {
for (var i = 0; i < 3; i++) {
var color = game.colors[game.getRandom(game.mode)];
this.bubbles.push(new Bubble(i, 0, color));
}
},
draw: function () {
var ctx = game.ctx;
ctx.save();
ctx.translate(this.startX, this.startY);
ctx.beginPath();
ctx.strokeStyle = "#555";
ctx.strokeRect(0, 0, this.width, this.height);
ctx.stroke();
//绘制准备的泡
this.bubbles.forEach(function (bubble) {
bubble.draw();
});

ctx.restore();
},
};

ready.init 初始化3个泡泡，并且把这3个泡泡“飞入”到map里，ready.draw很简单就是绘制一个小矩形和3个泡泡。

哦，对了，我们的泡泡的绘制代码也稍作了修改，现在的样子不是之前的纯色了，有了水晶效果。。。不妨看看：

Bubble.prototype.draw = function () {
if (!this.color) {
return;
}
var ctx = game.ctx;
ctx.beginPath();
//console.log("x:" + px + "y:" + py);
var gradient = ctx.createRadialGradient(this.px - 5, this.py - 5, 0, this.px, this.py, this.light);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, this.color);
ctx.arc(this.px, this.py, 11, 0, Math.PI * 2);
ctx.strokeStyle = this.color;
ctx.fillStyle = gradient;
ctx.fill();
ctx.stroke();
};

　createRadialGradient方法是画一个放射性的圆，起始在左上角，这样就有个光照效果，还是不错的。看下效果图吧

本文链接

HTML5 Canvas编写五彩连珠（2）：画图

2012-03-11T08:36:00Z

好吧，新的一天来了，我才开始动笔，真够懒得：）昨天说了今天我们要画一个球，在canvas上。好吧，这是游戏的入门的第一步，只是昨天没写完，所以。。。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="canvas" height="400" width="600" style="background: #fff;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();

ctx.arc(110, 110, 40, 0, Math.PI * 2);

ctx.strokeStyle = "red";
ctx.fillStyle = "yellow";

ctx.fill();
ctx.stroke();

</script>
</body>
</html>

上面的代码是在VS11 beta上写的，实在是太舒服了，vs是非常强大的编辑器。上面的代码中我们绘制了一个大大的圆，并且着色了，红边和黄心。
看下 arc (弧度)方法，昨天的文章里有他的链接地址，我在这里粘贴下。
The arc(x, y, radius, startAngle, endAngle, anticlockwise) method draws an arc.
arc(x,y,弧度,开始角度点，结束角度点，顺时针)，角度点你可能不是很清楚如何表示，这里是用Math.PI 圆周率来表示 6.28是周长。想画圆的一部分也就是一段弧线，可以取开始的角度点和结束的角度点。

那么下一步就是要把圆能够画到我们棋盘上。其实，这个很简单，只要我们把x,y和radius的值调整下就会绘制出来。我把昨天代码写的更“专业”了一点。所以，今天的代码会在新的代码基础上增加了。先看下改动过的代码。

是吧，更专业了吧，这样就不会定义一坨的function，到时候没出找，而是定义在一个对象里，这种封装也能避免命名冲突。而且，棋盘起始的位置我也做了调整，只要修改起始的x y值，棋盘就会在这个点开始画。那，现在我们要在第五行，第六列画一个黄色的球，该怎么画呢？只需要给map增加一个方法，再调用这个方法就行啦

drawBubble: function (x, y) {
var px = this.startX + this.cellWidth * x - this.cellWidth / 2;
var py = this.startY + this.cellWidth * y - this.cellWidth / 2;
ctx.beginPath();
ctx.arc(px, py, 12, 0, Math.PI * 2);
ctx.strokeStyle = "white";
ctx.fillStyle = "yellow";
ctx.fill();
ctx.stroke();
},

画出来刷新下，居然是第六行，第五列，我们搞错了吗？代码没有，只是我们误认为x是行y是列按顺序叫顺口了，其实是反过来的：）

泡泡既然能画出来，也要能清除才是，不然没法玩，所以再增加一个清除泡泡的方法。

clearBubble: function (x, y) {
var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5;
var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5;
ctx.beginPath();
ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1);
ctx.stroke();
}

　ok，是不是很霸气？ o(∩_∩)o 哈哈，不过在获取泡泡的位置时是不是很纠结，为什么画泡泡是 width/2 而擦除要加0.5？
画圆是从中心点开始画，所以要去掉半径，而擦数不能擦掉我们的棋盘线，所以要偏移0.5 。

本文链接

HTML5 Canvas编写五彩连珠（1）：预览

2012-03-10T13:28:00Z

HTML5推出也有很长一段时间了，一直没有学习过，闲来无事学习开发个游戏吧。用javascript+canvas编写一个五彩连珠的游戏。

Canvas 画布
标签<canvas id="canvas" ></canvas>，很简单和普通的tag没区别。关键在于js对他的操作。先看个示例代码：

<canvas id="canvas" height="100" width="100"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,10);
ctx.lineTo(50,90);
ctx.moveTo(10,50);
ctx.lineTo(90,50);

ctx.strokeStyle="red";
ctx.stroke();
</script>

你能看到想到我画的是什么吗？ ctx是canvas的绘制的类型2D的，以后会支持3D，那木，目前基于canvas的绘制都是调用2d context的方法。所以要了解绘制各种图形，得先看看他的api。

interface CanvasRenderingContext2D {

// back-reference to the canvas
readonly attribute HTMLCanvasElement canvas;

// state
void save(); // push state on state stack
void restore(); // pop state stack and restore state
// transformations (default transform is the identity matrix)
void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);
// compositing
attribute double globalAlpha; // (default 1.0)
attribute DOMString globalCompositeOperation; // (default source-over)
// colors and styles
attribute any strokeStyle; // (default black)
attribute any fillStyle; // (default black)
CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);
CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);
CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);

// line caps/joins
attribute double lineWidth; // (default 1)
attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
attribute double miterLimit; // (default 10)

// shadows
attribute double shadowOffsetX; // (default 0)
attribute double shadowOffsetY; // (default 0)
attribute double shadowBlur; // (default 0)
attribute DOMString shadowColor; // (default transparent black)

// rects
void clearRect(in double x, in double y, in double w, in double h);
void fillRect(in double x, in double y, in double w, in double h);
void strokeRect(in double x, in double y, in double w, in double h);

// path API
void beginPath();
void closePath();
void moveTo(in double x, in double y);
void lineTo(in double x, in double y);
void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);
void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);
void rect(in double x, in double y, in double w, in double h);
void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
void fill();
void stroke();
void clip();
boolean isPointInPath(in double x, in double y);

// Focus management
boolean drawFocusRing(in Element element, in optional boolean canDrawCustom);

// Caret and selection management
long caretBlinkRate();
boolean setCaretSelectionRect(in Element element, in double x, in double y, in double w, in double h);

// text
attribute DOMString font; // (default 10px sans-serif)
attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);
void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);
TextMetrics measureText(in DOMString text);

// drawing images
void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);

// pixel manipulation
ImageData createImageData(in double sw, in double sh);
ImageData createImageData(in ImageData imagedata);
ImageData getImageData(in double sx, in double sy, in double sw, in double sh);
void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);
};

interface CanvasGradient {
// opaque object
void addColorStop(in double offset, in DOMString color);
};

interface CanvasPattern {
// opaque object
};

interface TextMetrics {
readonly attribute double width;
};

interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute CanvasPixelArray data;
};

interface CanvasPixelArray {
readonly attribute unsigned long length;
getter octet (in unsigned long index);
setter void (in unsigned long index, in octet value);
};

上面的内容是我粘贴的官方的，一目了然。

既然我们知道了lineTo和moveTo的功能，那么我们先把游戏的格子棋盘先画出来：

<canvas id="canvas" height="600" width="780" style="border:solid 1px #369;background:#333"></canvas>
<script>
var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

drawMap();

function drawMap()
{
var start = 10;
ctx.beginPath();
var cell = 30;
var max = cell * 9 + start;
//ctx.strokeRect(10,10,max,max);
ctx.moveTo(start,start);

for(var i = 0;i <= 9 ;i++){
var p = i * cell + start + 0.5;
ctx.lineTo(p,max);
ctx.moveTo(p+cell,start);
}

for(var i = 0;i <= 9 ;i++){
var p = i * cell + start + 0.5;
ctx.moveTo(start,p);
ctx.lineTo(max,p);
}

ctx.strokeStyle="#567";
ctx.stroke();
}

</script>

从运行效果可以看到我们的棋盘是从10像素的位置开始画的，画了个9*9格子的五彩连珠棋盘。

今天入门就到这里，下一节讲怎么画一个球。。。

本文链接

.NET 4.0的dynamic特性和协变特性应用一例

2012-03-10T13:21:00Z

今天遇到了一个编码问题，很有意思
如果T1,T2,T3 都有相同的属性，而且处理这些属性的逻辑都一样，但他们之间没有关系，该怎么办？

答案如下：

namespace ConsoleApplication2
{
public class T1 { public string Name { get; set; } public int Count { get; set; } }
public class T2 { public string Name { get; set; } public int Count { get; set; } }
public class T3 { public string Name { get; set; } public int Count { get; set; } }
public class Class1
{
public void PrintName(dynamic t)
{
Console.WriteLine(t.Name);
}

public void PrintCount(IEnumerable<dynamic> list)
{
Console.WriteLine(list.Sum(t => t.Count));
}

public void Test()
{
var t1 = new T1 { Name = "T1", Count = 1 };
var t2 = new T2 { Name = "T2", Count = 2 };
var t3 = new T3 { Name = "T3", Count = 3 };

PrintName(t1);
PrintName(t2);
PrintName(t3);

var list1 = new List<T1> { t1 };
var list2 = new List<T2> { t2 };
var list3 = new List<T3> { t3 };

PrintCount(list1);
PrintCount(list2);
PrintCount(list3);
}

}
}

本文链接

Trie树-脏词过滤应用

2011-11-25T05:45:00Z

Trie树，又称字符查找树、前缀树，主要用于字符匹配（详见http://en.wikipedia.org/wiki/Trie）。适合做关键词查找，比如查找文章中的关键字然后给他们加链接。当然对脏词的过滤应用也是样，只是把替换连接的工作换成了替换字符。

当前的代码还只是进行简单的替换，并没有做一些字符的处理，比如“昨天见到你妈，逼我要买房”，这本身不是脏词，因为有逗号，所以程序里要增加字符的范围判断。

程序中的skip就是用来过滤脏词的简单变体，比如“找*小*姐”，默认是最多跳过3个字符，这个可以随便调整了。总之是一个Trie的锻炼吧。

public class TrieTree
{
private readonly Dictionary<char, TrieTree> Children;

public bool End { get; set; }

public TrieTree()
{
Children = new Dictionary<char, TrieTree>();
}

public void AddKey(string keyword)
{
if (String.IsNullOrEmpty(keyword))
{
return;
}

var cNode = this;

foreach (var key in keyword)
{
if (cNode.Children.ContainsKey(key))
{
cNode = cNode.Children[key];
}
else
{
var node = new TrieTree();
cNode.Children.Add(key, node);
cNode = node;
}
}
cNode.End = true;
}

public void Replace(ref string text)
{
for (var i = 0; i < text.Length; i++)
{
var cNode = this;
var key = text[i];
//碰到脏词的第一个词
if (cNode.Children.ContainsKey(key))
{
cNode = cNode.Children[key];
//查找是否包含脏词后面的词
var skip = 0;
for (var j = i + 1; j < text.Length; j++)
{
if (cNode.Children.ContainsKey(text[j]))
{
cNode = cNode.Children[text[j]];
skip = 0;
}
else
{
//允许略过过几个字符
skip++;
if (skip > 3)
{
break;
}
}
if (cNode.End)
{
var len = j + 1 - i;
text = text.Replace(text.Substring(i, len), string.Empty.PadLeft(len, '*'));
i += len;
break;
}
}
}
}
}

}

使用方法如下：

class Program
{
static void Main(string[] args)
{
var trie = new TrieTree();
var keywords = "我操,妓女,fuck".Split(',');
foreach (var key in keywords)
{
trie.AddKey(key);
}

var text = @"我擦啊，尼玛，我操你妈，fuck you，你这个妓女，贱人。";
trie.Replace(ref text);
Console.WriteLine(text);
Console.Read();
}
}

执行结果如下：

本文链接

带你走进缓存世界（6）：共享缓存

2011-11-01T13:16:00Z

回顾之前的章节，我们大致讲了下缓存的基本概念、原理、策略和常用方法。可能会有朋友会说，访问量小根本不需要缓存，徒增开发的复杂度，访问量大的话本地缓存也没意义。其实这话说的也不无道理，当然我们不能把这句话看成绝对的话，不然什么话都成废话了：），其实我们研究学习的任何技术都不会白学的，每种技术都有他的使用范畴，只是当我们面对新的层次时，需要改变，需要重新学习。我们之前讲的每篇都非常有用，本地缓存也非常有用。不过当我们面临大的数据量和访问量的考研时，就需要使用新的解决方案。今天就讲讲共享缓存那些事。

到底什么是共享缓存？为什么要用共享缓存？
新的层次就是指当我们仅仅依赖数据库和本地缓存已经无法满足我们的访问量时，我们该怎么处理？
其实问题突出在IO(Input/Output)上，就是说我们的IO能力不足了，解决办法其实很简单就是增加内存。但是，既然是增加内存为什么还谈公共缓存呢？其实这里牵扯到了一个分布式的整体部署问题。Web站点服务器一般不是IO为主的机器，而数据库服务器才是IO密集型服务器。如果我们只是在Web服务器上增加内存，虽然可以解决一时的IO紧张问题，但是Web服务一旦重启，缓存被清空，那么所有的请求都将会去数据库服务器请求，那么数据库直接就会垮掉，也就是说网站直接垮掉。这是其一，其二web服务器是CPU密集型服务器（也就是主要用于计算，包含数据的对象处理、压缩等），如果一台计算顶不住的时候或者连接数顶不住的时候，势必要增加web服务器，到时候缓存该建立在哪台服务器上呢？所以最理想的办法就是把缓存独立出来，这就是共享缓存服务器。

共享缓存和我们本地缓存的区别在哪里呢？
最大的区别就是不在一台机器上，就是不在一个进程里都不好搞，你说是不。所以要通过网络传输获取数据，但这要比本地缓存慢了不知多少倍，因为机器之间的通信是毫秒级的，而本地内存的数据处理是纳米级的！传输完了还不算，传输的对象也不是我们直接使用的数据类型，我们还要经过反序列化成我们想要的对象再进行处理。所以，共享缓存看起来貌似坏处多多。虽然慢，但是这也是无奈之举，因为我们不可能无限制的提升一台机器的能力，而且这种提升也是昂贵的，不如多台廉价机器并行计算；况且，再不济也比通过网络访问数据库快吧:)，数据库可是从磁盘扫描的啊，这个速度也是毫秒级的。

怎么开发共享缓存呢？
既然不是一台机器，那么共享缓存就牵扯到了网络通信技术，我们平时使用的通信协议就是tcp、http，而.net自带的通信框架就是WCF，还有就是WebService，你是不是有种WebService太不靠谱的感觉？Http是无状态协议，不能保持连接，每次都要重新建立打开关闭，这并不太适合我们，而采用类似数据库的连接池方式最合适（反过来想，我们开发的何尝不就是数据库？只不过是key/value的内存数据库罢了）所以选用WCF，使用TCP协议更适合我们，只是我们需要在以前的代码基础上增加网络通信和序列化、压缩等代码:)，再复杂的话那就是安全、分布式支持咯。

我们需要开发共享缓存吗？
看到WCF、TCP，连接池、分布式神马的，很多同学可能都晕了- -，其实这还是有一定难度的，不过还好我们能想到的技术这个世界上90%的都已经有了，更何况是共享缓存呢。所以我们可以直接拿别人成熟的产品来使用就行了。至于如何开发，有兴趣也可去研究别人的源代码，自己有能力的话试着去开发一个.NET版本来提升自己的能力，一般也不推荐自己开发，除非有特殊的数据结构缓存，不然会带来维护上更高的成本，除非像很有实力和需求的公司。现在一些流行的软件或框架也都是自己的需求慢慢演化成通用软件的。现在比较知名的缓存服务比如Memcached、Redis，当然还有其他好多，这个大家可以自己搜索，我就不一一举例了。

本文链接

ASP.NET MVC3 Custom FormAuthorize

2011-10-19T02:05:00Z

我们开发web系统，用户身份验证是最常见不过的。最简单的办法就是定一个基类，基类里面有判断Cookie或Session是否存在，然后决定是否跳转。今天就利用MVC的特性来一个不一样的验证方式。

public class CustomAuthorizeAttribute : AuthorizeAttribute  
{  
    protected override bool AuthorizeCore(HttpContextBase httpContext)  
    {  
        var user = WebUtility.GetIdentity(httpContext);  
        if (user != null)  
        {  
            httpContext.User = new UserPrincipal(WebUtility.GetIdentity(httpContext));  
        }  
  
        return user != null;  
    }  
  
}  

这是自定义的验证机制，重写了系统自带的验证核心逻辑，下面是系统自带的逻辑：

protected virtual bool AuthorizeCore(HttpContextBase httpContext)  
{  
    if (httpContext == null)  
    {  
        throw new ArgumentNullException("httpContext");  
    }  
    IPrincipal user = httpContext.User;  
    return user.Identity.IsAuthenticated && (this._usersSplit.Length <= 0 || this._usersSplit.Contains(user.Identity.Name, StringComparer.OrdinalIgnoreCase)) && (this._rolesSplit.Length <= 0 || this._rolesSplit.Any(new Func<string, bool>(user.IsInRole)));  
}  

可以看出，验证都是用httpContext.User属性来判断，所以我们对登录、退出和获取用户信息都通过httpContext.User属性就行了。从MVC的示例中我们也可以发现确实如此，看看MVC3的Views里的_LogOnPartial.cshtml的代码：

@if(Request.IsAuthenticated) {  
    <text>Welcome <strong>@User.Identity.Name</strong>!  
    [ @Html.ActionLink("Log Off", "LogOff", "Account") ]</text>  
}  
else {  
    @:[ @Html.ActionLink("Log On", "LogOn", "Account") ]  
}  

那么现在再看我们刚才重写的验证逻辑，就大致明白了。首先通过一个外部的逻辑获取User，如果没有User说明没有登录，否则就给User赋值，标记登录了。
再看我们是如何获取这个User的

public static User GetIdentity(HttpContextBase httpContext)  
{  
    var user = httpContext.Request.Cookies[COOKIE_NAME_KEY];  
    var info = httpContext.Request.Cookies[COOKIE_INFO_KEY];  
    if (user == null || info == null || !info.Value.DESDecrypt(DES_KEY).Contains(user.Value))  
    {  
        return null;  
    }  
  
    return UserManager.GetUser(user.Value);  
}  

这就很易懂了，也是通过的cookie对用户资料做的存储。
再来看第二句里的UserPrincipal类的定义：

public class UserPrincipal : IPrincipal  
{  
    private readonly User _user;  
    public UserPrincipal(User user)  
    {  
        _user = user;  
    }  
  
    public bool IsInRole(string role)  
    {  
        return _user != null && _user.Role.ToString() == role;  
    }  
  
    public IIdentity Identity  
    {  
        get { return new UserIdentity(_user); }  
    }  
}  

httpContext.User是IPrincipal类型，所以我们要自定义一个UserPrincipal类，在实现时还需要实现一个IIdentity接口。

public class UserIdentity : IIdentity  
{  
    public UserIdentity(User user)  
    {  
        User = user;  
    }  
  
    public User User { get; private set; }  
  
    public string Name  
    {  
        get { return User == null ? string.Empty : User.UserName; }  
    }  
  
    public string AuthenticationType  
    {  
        get { return "csdn.maddemon"; }  
    }  
  
    public bool IsAuthenticated  
    {  
        get { return User != null; }  
    }  
}  

好了，整个验证核心需要的东西我们都准备好了，还差一个最重要的东西就是我们登录的时候需要写cookie，退出的时候需要清除cookie。

public static void SetAuthorizeCookie(HttpContextBase httpContext, User user)  
{  
    httpContext.Response.SetCookie(new HttpCookie(COOKIE_NAME_KEY, user.UserName));  
    httpContext.Response.SetCookie(new HttpCookie(COOKIE_INFO_KEY, (user.UserName + "|" + user.Role).DESEncrypt(DES_KEY)));  
}  
  
public static void RemoveAuthorizeCookie(HttpContextBase httpContext)  
{  
    httpContext.Response.SetCookie(new HttpCookie(COOKIE_NAME_KEY, null) { Expires = DateTime.Now.AddDays(-1) });  
    httpContext.Response.SetCookie(new HttpCookie(COOKIE_INFO_KEY, null) { Expires = DateTime.Now.AddDays(-1) });  
}  

这样一套下来，需要登录的Controller或Action，我们只需要加上一个[CustomAuthorize]属性就可以，如果没有登录就会自动跳转到config里配置的登录页。是不是很不方便啊？方便吗？不方便吗？方便吗？不方便吗？方便吗？不方便吗？是不是啊哈哈

<authentication mode="Forms">  
  <forms loginUrl="~/Account/LogOn" timeout="2880" />  
</authentication>  

本文链接