`
逐行分析JS源代码
  • 浏览: 87844 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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、美化

 

  • 大小: 144.8 KB
  • 大小: 44.8 KB
  • 大小: 68.2 KB
  • 大小: 126.2 KB
  • 大小: 116.3 KB
3
1
分享到:
评论
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编程年度希望之星非楼主莫属。

相关推荐

    js版 3D坦克大战 V0.3

    【js版 3D坦克大战 V0.3】是一个基于JavaScript开发的3D坦克游戏,其版本号为0.3,表明它可能还处于早期开发阶段。从给出的标签"源码"和"工具"来看,这个项目不仅包含了游戏的源代码,也可能是为了方便开发者学习、...

    js3D坦克大战

    JS3D坦克大战是一款完全使用JavaScript技术开发的3D游戏,它展示了WebGL的强大潜力和JavaScript在游戏开发中的广泛应用。游戏提供了逼真的坦克效果,包括行进、转向、玩家选择、对战模式、雷达系统以及复活等功能,...

    js版 3D坦克大战 V0.4

    【标题】"js版 3D坦克大战 V0.4" 涉及的主要知识点是JavaScript编程、3D图形渲染以及游戏开发。这个项目可能是用JavaScript实现的一个基于Web的3D坦克战斗游戏,版本为V0.4,可能包含了一些改进和修复。 【描述】...

    Unity3d 多人在线坦克大战源码

    Unity3d 多人在线坦克大战源码 Unity精品小游戏源码 , Unity完整项目源码 是完整项目的压缩包,可直接运行,无需其他操作。 适合二次开发和学习使用,都是经典游戏,需要其他游戏源码包可以看我主页。 直接可以运行 , ...

    Unity3D坦克大战 源代码(3D).zip

    《Unity3D坦克大战:深度剖析3D游戏开发技术》 Unity3D是一款强大的跨平台游戏开发引擎,广泛应用于2D、3D游戏制作。在这个"Unity3D坦克大战 源代码(3D)"项目中,我们可以深入学习到如何使用Unity3D构建一款3D...

    Unity游戏项目源码 3d坦克大战 完整版.zip

    《Unity游戏项目源码 3D坦克大战 完整版》是一个基于Unity 3D引擎开发的游戏项目,它提供了一套完整的源代码供学习和参考。Unity 3D是目前非常流行的游戏开发平台,尤其在3D游戏领域,其强大的图形渲染能力、丰富的...

    Unity3D坦克大战

    《Unity3D坦克大战》是一款基于Unity3D引擎开发的经典游戏,它将传统的坦克大战游戏以3D形式呈现,提供了更丰富的视觉体验和更具策略性的战斗玩法。Unity3D是目前世界上最受欢迎的游戏开发平台之一,它支持跨平台...

    3D坦克大战素材

    《3D坦克大战素材》是一份专为初学者设计的学习资源,主要针对使用Unity3D引擎制作3D游戏的入门者。这个项目是基于我们熟悉的经典游戏《坦克大战》进行的改造,旨在帮助学习者理解3D游戏开发的基础概念和技术。 在...

    原创js版 3D坦克大战

    【标题】"原创js版 3D坦克大战" 指的是一款使用JavaScript开发的3D坦克游戏。这种游戏通常采用WebGL技术来实现3D渲染,让玩家可以在浏览器环境中体验到三维空间中的坦克对战。JavaScript是前端开发的主要语言,能够...

    Unity3D 坦克大战 中文视频教程下载地址

    Unity3D 坦克大战 中文视频教程 Unity3D坦克大战全中文教程第1集@软件及游戏简介 ... Unity3D坦克大战全中文教程第6集@预置物体

    unity3d 坦克大战工程源码

    《Unity3D坦克大战工程源码解析》 Unity3D是一款强大的跨平台游戏开发引擎,广泛应用于各种类型的游戏制作,包括我们熟知的经典游戏——坦克大战。这个“坦克大战工程源码”是开发者自制的练习作品,它基于Siki学院...

    Unity3D版本游戏源码0020C#unity3D坦克大战小游戏源码

    ### Unity3D版本游戏源码0020:C# Unity3D坦克大战小游戏源码 #### 一、概述 本篇文章将详细介绍“Unity3D版本游戏源码0020:C# Unity3D坦克大战小游戏源码”的相关内容。这款坦克大战小游戏是一款基于Unity3D引擎...

    Unity3D项目小游戏(3D坦克大战)

    《Unity3D项目小游戏——3D坦克大战》是一款利用Unity3D引擎开发的3D射击游戏,它将经典的坦克战斗场景以三维的形式呈现出来,带给玩家全新的视觉体验和操作手感。Unity3D作为业界领先的跨平台游戏开发工具,以其...

    C++大作业坦克大战源码.zip

    C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码。C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业坦克大战源码C++大作业...

    3D坦克大战游戏

    3D的坦克大战游戏,有草地、山坡、小树林等多地形,地图美观

    unity3d坦克大战

    《Unity3D坦克大战》是一款基于Unity引擎开发的2D游戏项目,主要展示了Unity3D在制作2D游戏方面的强大功能。本项目适用于初学者学习Unity的基础操作、2D游戏开发流程以及简单物理系统的应用。以下将从多个方面详细...

    坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )

    《坦克大战js小游戏源码:HTML5重构经典游戏体验》 HTML5的崛起为游戏开发开辟了新的领域,其中就包括对经典游戏的重新诠释,比如我们熟知的“坦克大战”。这款HTML5坦克大战游戏代码,是利用HTML、CSS和JavaScript...

    用 js+html 实现 坦克大战 游戏

    相比于网上一般的坦克大战,我用js实现的坦克大战增加了很多新功能。 主要功能如下: 1、选关、跳关功能,还设置了Boss关,Boss关的难度有“A级”、“B级”、“S级”可供玩家选择,每十关设置一个Boss关 2、生命值,...

Global site tag (gtag.js) - Google Analytics