# HTML5版的String Avoider小游戏

HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心，从游戏起始点移动鼠标到终点位置，鼠标移动过程绘制出移动轨迹的String平滑曲线，整个过程不能碰撞到边界，从技术角度来说其核心就是根据鼠标移动位置生成String线的算法，该游戏是ActionScript写的Flash版，这里将其改造成HTML5版的JavaScript实现，并增加可自定义关卡功能的一种设计思路。

String连线我是缓存了300个点信息的数组，鼠标移动时不断调整300个点的新位置信息，每次更新时先将新鼠标点设置给第一个元素，后续更新x点时，计算其与x-1点的角度，在此方向长度为1的位置更新坐标，这样就达到了平滑曲线的效果。

```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});
}
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;
});
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
});
return node;
}```

118 篇文章41 人订阅

0 条评论

## 相关文章

1282

1932

### 浅汇－iOS 动画

在iOS开发中，制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果，吸引他们的眼光 —— 这对于app而...

1452

5728

9863

### 【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块，俗称 海龟作图，它是基于 tkinter 模块打造，提供一些简单的绘图工具，海龟作图最初...

5346

### 可视化格式模型-定位系统

CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流，是对 normal flow的直译。...

1866

1984

1924

1655