飞机大战 – JavaScript项目

内容纲要

这个项目源于一个网帖。三天前,当我正坐着地铁下班回家的时候,看到这样一个问题——这个游戏足够让我找到一份网络前端工作或者实习吗。很显然,我跟大家一样非常好奇到底是做出了一个怎样牛逼的游戏,不由自主的点进去看了。由于当时我在地铁上用手机不方便打开他提供的游戏链接,但是底下评论中各种溢美之词着实吓了我一跳。“做得太牛逼了!”,“你的编程技巧可以秒杀好多有3年以下工作经验的前端开发工程师了。”,“这个1990坦克游戏跟我小时候玩过的一模一样!”...什么鬼?就这样一个纸片游戏居然惊呆了众人?我决定了解一下这帮网络前端开发者平时都是用什么语言的,然后看看用这种语言写一个类似的小游戏到底有多难。到目前为止,我已经从W3School网站自学JavaScript了3天,应该差不多可以启动这个项目了吧。首先声明一下,我本人是一个芯片设计工程师,基本没有任何专业的游戏开发经验,只是在业余时间稍微研究过OS X的APP开发而已。

I. 项目目标

接下来,我打算说明一下这个项目的目标。为了简单起见,我计划把一个iOS小游戏移植到这个文章里。这个小游戏的素材出处在这里:用Swift语言和Sprite Kit复制微信飞机大战游戏。从标题不难看出,这个游戏本来是基于苹果的SpriteKit开发包的,这意味着原先的项目可以通过使用这个SpriteKit框架省掉很多造轮子的工作。但是为了把它重新用JavaScript实现并搬到这个网站上,我必须用JavaScrip重造这个非开源的库并运用到游戏中。这个环节将成为这个项目的主要难点和工作量。

II. 项目日志

Day 20.Sep.2015
项目页面创建完毕

Day 21.Sep.2015
HTML5的画布元素跟wordpress脚本有冲突,我需要花点时间解决

Day 22.Sep.2015
为了修复前面一个问题,我增加了一个showcase元素,然后把最后展示的游戏通过这个元素进行显示。这个元素会被放在这个文章的最下方。你现在应该已经可以看到一个飞机出现在这个展示区了。

Day 01.Oct.2015
最近这个项目要暂停一段时间,我正在休年假。等我回来后立刻重新开工。

Day 18.Oct.2015
我创建了一个基本的类叫KWScene。如果要实例化一个游戏场景,需要传递2个参数到它的constructor。一个是这个场景实例化后的变量名,另一个是用来展示这个场景的画布元素id。

Day 24.Oct.2015
增加了按键事件处理函数,现在应该可以通过按下'W'/'S'/'A'/'D'来控制飞机了。有人可能奇怪为什么我花了这么久才搞定这么简单的功能。其实主要是因为我现在并不仅仅是在开发一个游戏,而是在开发一个可以用来开发游戏的框架,或者叫引擎吧,然后才是用这个引擎实现一个简单的游戏。

Day 20.Nov.2015
I had been all tied up in the last month, and now I finally get a 1-week paid-leave. Today I added mouse event dispatch functions to the engine. If you are visiting this website with a cell phone, you should be able to move the plane around with you fingers.

Day 21.Nov.2015
Readjusted the code, now if you are browsing this page with cellphone, use your finger to control the plane; If you are on a PC or laptop, use your keyboard instead (namely 'W', 'S', 'A', 'D').

Day 22.Nov.2015
A KWLabel class has been added, now you can see a button saying "Game Start" right in the middle of the welcome view. You can either press 'Enter' key on your PC/laptop, or click it with finger on your phone. Tomorrow I'll try to add on bullets and enemy planes.

Day 20.Jan.2016
Happy new year, guys! Can't believe that I had let this article hanging for so long. I added KWAction class to the game and also the bullets to the plane. Now you should be able to see the bullets shooting out from the jet. I will still need some time to add the enemy jets, and physical collision detection mechanism before I finish this project. Enjoy!

Day 5.Feb.2016
I replaced all textures in this game with the original resources I downloaded from the swift project.

Day 8.Feb.2016
Hi there! I am now on my Chinese-New-Year leave, happy new year to all of you! On the train back to my hometown, I have added new class KWPhysicsBody and the Contact-Detection mechanism to this game, now you should be able to see the enemy jets disappear when they get bullets. All challenging parts now are finished. There are still a few little things pending to add some fun to this game, I will try my best to finish every thing before going back to work.

Day 15.Feb.2016
Finally, done with this game!!! Enjoy my friends! I have added mousedown/move/up event listener to it, also some extremely powerful missiles to help you through the game. In my next move, I will try to build some 3D game using WebGL technology.

工程师,个人公众号:IF推理同好会,个人微信小游戏:IF迷你侦探
文章已创建 32

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部