js版 3D坦克大战 V0.2

欢迎体验js版的 3D坦克大战 V0.2。

 

实例见 http://www.upopen.cn/ 

 

在上周的 3D坦克大战 V0.1 基础上，本周主要对坦克细节进行的完善，使坦克外观更加逼真，并增加雷达功能。项目源码见附件tarn.rar。

 

下次更新时，再简要说明实现机制

 

持续完善，每周更新，且看我们共同能把这个坦克做到什么境界!!

 

 

 

/*********** 已完成功能 ***********/

 

------------ 13-09-28 --------------

 

1、坦克部分细节完善 [ 特别注明：目前坦克是网上找的一个现成的dae文件，通过threeJs生成 ]

 

2、雷达 [ CSS3 实现，JS实现坐标计算 ]

 

3、炮弹禁止穿墙

 

4、加载效果 [ CSS3 实现 ]

 

------------ 13-09-23 --------------

 

1、测试用最新的chrome浏览器 打开 112.124.49.128:3000 【使用阿里云服务器，尚未试过压力测试，或许有时会打不开，另进去后如未发现其它玩家，可以打开两个网页，相互观摩】

 

   or 1、将压缩包在本地配置 nodeJs 服务，打开 127.0.0.1:3000 【同上次象棋配置，如果无法配置，请留言，将对各种情况区别回复】

 

   注意：测试时不要开浏览器代理，否则会影响本示例中的 socket.io 使用

 

2、键盘 1 或 2 选择玩家角色

 

3、输入玩家名称

 

4、按 A / W / D / S 控制坦克行进方向

   

5、按 空格 或 左键 发射子弹，屏幕左下角为现存子弹，每秒补充一个空缺，中弹坦克闪红色

 

6、屏幕上方中间区域展示玩家 10点血量，血量用完时，点击该区域，可复活。

 

7、按 ctrl + enter 弹出与所有玩家聊天的对话框，输入完成后 enter 发送

 

 

 

 

 

 

/*********** 后续需完善 ***********/

 

1、地形起伏

 

2、障碍禁止通过

 

3、坦克击中损毁效果

 

4、场景完善

 

5、同时向两个方向行进时，画面跳动

 

6、切视角

 

7、音效

 

8、美化

 

评论

11 楼 goahead2010 2013-10-22  

逐行分析JS源代码 写道

goahead2010 写道

悲剧失败了。打不开。
> ws@0.4.31 install D:\3dTank\node_modules\socket.io\node_modules\socket.io-clie
nt\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)


D:\3dTank\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>n
ode "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modul
es\node-gyp\bin\node-gyp.js" rebuild
ejs@0.8.4 node_modules\ejs

express@3.3.4 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── send@0.1.3 (mime@1.2.11)
└── connect@2.8.4 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, formidable
@1.0.14)

socket.io@0.9.16 node_modules\socket.io
├── base64id@0.1.0
├── policyfile@0.0.4
├── redis@0.7.3
└── socket.io-client@0.9.16 (xmlhttprequest@1.4.2, uglify-js@1.2.5, ws@0.4.31
, active-x-obfuscator@0.0.1)

======你是在执行 npm install 时抛出这个错误的么

嗯，是的。

10 楼 快乐的boy 2013-10-18  

逐行分析JS源代码 写道

goahead2010 写道

悲剧失败了。打不开。
> ws@0.4.31 install D:\3dTank\node_modules\socket.io\node_modules\socket.io-clie
nt\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)


D:\3dTank\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>n
ode "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modul
es\node-gyp\bin\node-gyp.js" rebuild
ejs@0.8.4 node_modules\ejs

express@3.3.4 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── send@0.1.3 (mime@1.2.11)
└── connect@2.8.4 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, formidable
@1.0.14)

socket.io@0.9.16 node_modules\socket.io
├── base64id@0.1.0
├── policyfile@0.0.4
├── redis@0.7.3
└── socket.io-client@0.9.16 (xmlhttprequest@1.4.2, uglify-js@1.2.5, ws@0.4.31
, active-x-obfuscator@0.0.1)

======你是在执行 npm install 时抛出这个错误的么

9 楼 逐行分析JS源代码 2013-09-30  

goahead2010 写道

悲剧失败了。打不开。
> ws@0.4.31 install D:\3dTank\node_modules\socket.io\node_modules\socket.io-clie
nt\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)


D:\3dTank\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>n
ode "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modul
es\node-gyp\bin\node-gyp.js" rebuild
ejs@0.8.4 node_modules\ejs

express@3.3.4 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── send@0.1.3 (mime@1.2.11)
└── connect@2.8.4 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, formidable
@1.0.14)

socket.io@0.9.16 node_modules\socket.io
├── base64id@0.1.0
├── policyfile@0.0.4
├── redis@0.7.3
└── socket.io-client@0.9.16 (xmlhttprequest@1.4.2, uglify-js@1.2.5, ws@0.4.31
, active-x-obfuscator@0.0.1)

======你是在执行 npm install 时抛出这个错误的么

8 楼 goahead2010 2013-09-30  

悲剧失败了。打不开。
> ws@0.4.31 install D:\3dTank\node_modules\socket.io\node_modules\socket.io-clie
nt\node_modules\ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)


D:\3dTank\node_modules\socket.io\node_modules\socket.io-client\node_modules\ws>n
ode "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modul
es\node-gyp\bin\node-gyp.js" rebuild
ejs@0.8.4 node_modules\ejs

express@3.3.4 node_modules\express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie-signature@1.0.1
├── buffer-crc32@0.2.1
├── cookie@0.1.0
├── debug@0.7.2
├── mkdirp@0.3.5
├── commander@1.2.0 (keypress@0.1.0)
├── send@0.1.3 (mime@1.2.11)
└── connect@2.8.4 (uid2@0.0.2, pause@0.0.1, qs@0.6.5, bytes@0.2.0, formidable
@1.0.14)

socket.io@0.9.16 node_modules\socket.io
├── base64id@0.1.0
├── policyfile@0.0.4
├── redis@0.7.3
└── socket.io-client@0.9.16 (xmlhttprequest@1.4.2, uglify-js@1.2.5, ws@0.4.31
, active-x-obfuscator@0.0.1)

7 楼 xiaokang1582830 2013-09-30  

强烈支持一个

6 楼 逐行分析JS源代码 2013-09-30  

p2227 写道

代码不放上gitHub吗？

谢谢建议 ， 规划 等达到一定可玩性时再放到github上，按我的打算是 1.0版本的时候再放

5 楼 逐行分析JS源代码 2013-09-30  

happysoul 写道

谷歌不清楚，我用的谷歌内核的360不能打开，不过FF还是没问题的~

360有对谷歌进行改造，并且不能保证是最新的内核，所以建议还是原版的chrome浏览器

4 楼 p2227 2013-09-30  

代码不放上gitHub吗？

3 楼 happysoul 2013-09-30  

谷歌不清楚，我用的谷歌内核的360不能打开，不过FF还是没问题的~

2 楼 逐行分析JS源代码 2013-09-30  

有几个朋友私信说未成功浏览

大致统一说下配置流程，我是 WIN7旗舰版 和 XP，常规是这样安装

1、下载nodeJS http://nodejs.org/ ，并安装

2、打开命令行工具，输入node -v，会打印出 v0.8.12，说明安装成功

3、通过命令行找到解压后的压缩包文件根目录 tank

4、执行 npm install，这个命令会安装配置在 package.json 依赖包

5、使用高版本的chrome浏览器【我使用的是 29.0.1547.76 m，其它浏览器不支持webGL】打开 127.0.0.1:3000，可以多打开几个，自己与自己对战

1 楼 hlj317 2013-09-30  

很不错，很棒，今年的ITEYE编程年度希望之星非楼主莫属。