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的位置更新坐标,这样就达到了平滑曲线的效果。

除了绘制String线外还有个技术点就是监测碰撞,该Flash游戏的边界都是线段,因此第一想到的监测方式就是线线相交的思路,算法可参考 http://en.wikipedia.org/wiki/Line%E2%80%93line_intersection ,如果以LineLine的相交思路只需要遍历所有point间的线段,判断是否与游戏关卡定义的边界线相交,但这种方式对不规则边界就比较麻烦,监测性能也不高。

考虑到我们还需要提供用户可DIY自定义游戏关卡的功能,我们将采用监测颜色透明度信息的方式,由于正常游戏时场景无需用户动态修改,因此边界的信息可提前缓存到ImageData内存中,并且我们300个点的距离都是1,监测只需根据点进行就可以。

整个程序采用HT for WebGraphView拓扑图组件,再其上通过addTopPainter添加顶层画笔绘制曲线,当曲线碰到Node图元时绘制成红色,否则绘制成黄色,监听GraphView拓扑图的interaction事件,在该事件中设置dirty的脏标志,在绘制时根据dirty的标志进行更新,采用这样的方式可将多次变换最终聚合成一次更新,这也是图形刷新绘制常用的基本技巧。同时通过GraphView.setEditable(true)开启了拓扑图的可视化编辑功能,用户可随时改变界面图元位置和旋转等形状信息,相当于自定义关卡的效果。

所有代码和运行效果如下: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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

2672
来自专栏腾讯社交用户体验设计

带你轻松打开svg滤镜的大门

1213
来自专栏何俊林

Android开发之贝塞尔曲线进阶篇(仿直播送礼物,饿了么购物车动画)

今天来自李晨玮分享的直播礼物效果Demo。对于直播中送车,点赞都有借鉴意义。李晨玮的简书为:http://www.jianshu.com/u/b2df0a5ea...

5578
来自专栏练小习的专栏

制作高大上的Canvas粒子动画

制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): ...

52910
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

1645
来自专栏刘望舒

几条曲线构建Android表白程序

每年的情人节和七夕,甜蜜与痛苦的日子,做点什么好呢? 写诗画画送礼物,逛街吃饭看电影? 作为搬砖爱好者,写个表白脚本或者动画什么的吧。 想起之前看到的一段H5动...

1063
来自专栏前端桃园

深入理解z-index

在页面编写的过程中,经常需要处理元素的重叠。重叠的顺序不当则容易造成元素被错误地遮盖等现象。一般地,有很多人认为只需要指定元素的z-index即可调整重叠的顺序...

1212
来自专栏章鱼的慢慢技术路

使用Photoshop实现雪花飘落的效果

1884
来自专栏Coco的专栏

神奇的 conic-gradient 圆锥渐变

2364
来自专栏進无尽的文章

浅汇-iOS 动画

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

1412

扫码关注云+社区

领取腾讯云代金券