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 Web的GraphView拓扑图组件,再其上通过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;
}
HTML5版的String Avoider小游戏的更多相关文章
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- JS写小游戏(一):游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- 第九章 nginx基础之搭建小游戏
一.nginx部署 1.epel源安装 [root@web01 ~]# yum install -y nginx 2.官方源安装 1.配置官方源[root@web02 ~]# vim /etc/yum ...
- HTML5小游戏【是男人就下一百层】UI美化版
之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍一下几个主要的类: Frame:帧的定义,主要描 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- [HTML5实现人工智能]小游戏《井字棋》发布,据说IQ上200才能赢
一,什么是TicTacToe(井字棋) 本 游戏 为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿 ...
- 用Kotlin破解Android版微信小游戏-跳一跳
前言 微信又更新了,从更新日志上来看,似乎只是一次不痛不痒的小更新.不过,很快就有人发现,原来微信这次搞了个大动作——在小程序里加入了小游戏.今天也是朋友圈被刷爆的缘故. 看到网上 有人弄了一个破解版 ...
- 用面向对象的编程方式实现飞机大战小游戏,java版
概述 本文将使用java语言以面向对象的编程方式一步一步实现飞机大战这个小游戏 本篇文章仅供参考,如有写的不好的地方或者各位读者哪里没看懂可以在评论区给我留言 或者邮件8274551712@qq.co ...
随机推荐
- [Xamarin] 取得所有已安裝軟體清單 (转帖)
最近會用到,簡單記錄一下,抓取所有該手機已經安裝的軟體清單 結果圖: 首先介紹一下Layout : \Resources\Layout\Main.axml <?xml version=&quo ...
- chrome浏览器渲染白屏问题剖析
刚截图十几次,终于捕捉到了这个白屏现象,hiahia~~ 大家可以很清晰地看到下边还木有渲染完毕的透明层,这是一个十分普遍的问题,经常遇到.我的浏览器版本是 到目前为止应该是最新版(release版本 ...
- FusionCharts简单教程(四)-----基本数字格式
在统计图例中什么是最基本,最重要的元素?那就是数据.一个数据的统计图像那就是一堆空白.但是数据存在多种形式,比如小数,比如千分位等等.又如若一个数据是12.000000001,对于数据要求 ...
- 【原创】三分钟教你学会MVC框架——基于java web开发(2)
没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...
- 让gcc支持成员函数模板的trick
让gcc支持成员函数模板的trick 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循“署名-非商业用途-保持一致”创作公用协议 gcc 4.7.3 不支持成员 ...
- 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- java 线程安全 Lock
java.util.concurrent.locks 对于线程安全我们前面使用了synchronized关键字,对于线程的协作我们使用Object.wait()和Object.notify().在JD ...
- 关于Thread.currentThread()和this的差异
重新来看多线程时,被这结果搞懵逼了.不多说,直接上代码: public class MyThread02 extends Thread { public MyThread02() { System.o ...
- UML基础系列:用例图
1. 概述 用例图(Use Case Diagram)描述“用户.需求.系统功能单元”之间的关系,是参与者所能观察和使用到的系统功能模型图. 用例图用于需求分析阶段 用例图包含6个基本元素:参与者(A ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...