HTML5版的String Avoider小遊戲 http://www.newgrounds.com/portal/view/300760 蠻簡單也蠻考驗耐心，從遊戲起始點移動滑鼠到終點位置，滑鼠移動過程繪製出移動軌跡的String平滑曲線，整個過程不能碰撞到邊界，從技術角度來說其核心就是根據滑鼠移動位置生成String線的演算法，該遊戲是ActionScript寫的Flash版，這裡將其改造成HTML5版的JavaScript實現，並增加可自定義關卡功能的一種設計思路。
String連線我是快取了300個點資訊的陣列，滑鼠移動時不斷調整300個點的新位置資訊，每次更新時先將新滑鼠點設定給第一個元素，後續更新x點時，計算其與x-1點的角度，在此方向長度為1的位置更新座標，這樣就達到了平滑曲線的效果。
除了繪製String線外還有個技術點就是監測碰撞，該Flash遊戲的邊界都是線段，因此第一想到的監測方式就是線線相交的思路，演算法可參考 http://en.wikipedia.org/wiki/Line%E2%80%93line_intersection ，如果以LineLine的相交思路只需要遍歷所有point間的線段，判斷是否與遊戲關卡定義的邊界線相交，但這種方式對不規則邊界就比較麻煩，監測效能也不高。
考慮到我們還需要提供使用者可DIY自定義遊戲關卡的功能，我們將採用監測顏色透明度資訊的方式，由於正常遊戲時場景無需使用者動態修改，因此邊界的資訊可提前快取到ImageData記憶體中，並且我們300個點的距離都是1，監測只需根據點進行就可以。
整個程式採用HT for Web的GraphView拓撲圖元件，再其上通過addTopPainter新增頂層畫筆繪製曲線，當曲線碰到Node圖元時繪製成紅色，否則繪製成黃色，監聽GraphView拓撲圖的interaction事件，在該事件中設定dirty的髒標誌，在繪製時根據dirty的標誌進行更新，採用這樣的方式可將多次變換最終聚合成一次更新，這也是圖形重新整理繪製常用的基本技巧。同時通過GraphView.setEditable(true)開啟了拓撲圖的視覺化編輯功能，使用者可隨時改變介面圖元位置和旋轉等形狀資訊，相當於自定義關卡的效果。
<iframe src="http://player.youku.com/embed/XODU4NzY5MzQ0" frameborder="0" width="510" height="498"></iframe>
所有程式碼和執行效果如下：http://v.youku.com/v_show/id_XODU4NzY5MzQ0.html
function init(){
dataModel = new ht.DataModel();
graphView = new ht.graph.GraphView(dataModel);
graphView.handleScroll = function(){};
graphView.setEditable(true);
graphView.setPannable(false)
view = graphView.getView();
view.style.left = '10px';
view.style.top = '10px';
view.style.width = '600px';
view.style.height = '400px';
view.style.background = 'black';
document.body.appendChild(view);
createNode(20, 20, 80, 40, 'rect');
createNode(200, 300, 80, 40, 'star');
createNode(400, 100, 80, 40, 'oval');
createShape();
length = 1;
count = 300;
points = [];
for(var i=0; i<count; i++){
points.push({x: 0, y: 0});
}
view.addEventListener('mousemove', function(e){
var point = graphView.lp(e);
points[0].x = point.x;
points[0].y = point.y;
for (var i = 1; i < count - 1; i++) {
var angle = Math.atan2(points[i].y - points[i - 1].y, points[i].x - points[i - 1].x);
points[i].x = points[i - 1].x + length * Math.cos(angle);
points[i].y = points[i - 1].y + length * Math.sin(angle);
}
if(imageData){
hit = false;
for (var i = 0; i < count; i++) {
var x = Math.floor(points[i].x);
var y = Math.floor(points[i].y);
var index = (y * graphView.getWidth() + x) * 4;
if(imageData.data[index+3] !== 0){
hit = true;
break;
}
}
}
graphView.redraw();
});
dirty = true;
imageData = null;
graphView.mi(function(e){
dirty = true;
});
graphView.addTopPainter(function(g){
if(dirty){
dirty = false;
hit = false;
imageData = g.getImageData(0, 0, graphView.getWidth(), graphView.getHeight());
ht.Default.callLater(graphView.redraw, graphView);
}else{
g.beginPath();
g.lineWidth = 3;
g.strokeStyle = hit ? 'red' : 'yellow';
g.moveTo(points[0].x, points[0].y);
for (var i = 1; i < count - 1; i++) {
g.lineTo(points[i].x, points[i].y);
}
g.stroke();
}
});
}
function createNode(x, y, w, h, shape){
var node = new ht.Node();
node.setRect(x, y, w, h);
node.s({
'shape': shape,
'select.width': 0
});
dataModel.add(node);
return node;
}