The birth of this project is due to a post on the internet. It was three days back when I was on the commuting tube train, I found someone asked this question -- Is This Game Enough As Reference For A Front-end Web Developer Internship? Obviously many people like me were lured to click the post since they want to figure out what the project is. Although I wasn't able to open the project due to the poor cellular data network in the tube, I've learnt pretty much of it from other people's comments. "Amazing piece of art!", they said. "Your programming skill should be better than most front-end web developers who has work for 3 years in average!", they shouted. "What a 1990 Tank game!! almost the same as the one I played when I was a child!", this time I was even more shocked. What?! They get astonished for just such a game?! I decided to explore what language they usually use for front-end web development, and find out if it is really that hard to implement such mini games. So far, I've studied JavaScript from W3School for 2 days, and I think it's a good idea to start a project now. As an IC Design Engineer, I don't have any game development experience from my work, all I have been exposed to are just some personal free-time researches into OS X application development.
I. Project Target
Before going any further, we need to clarify the target to aim to. To make things easier, I decided to migrant a game from iOS to this web page. The origin of this game is here:Wechat Plan War Game Using Sprite Kit & Swift. As you can tell from the title, this game is based on SpriteKit, which means that the developer has saved a lot of framework building works benefiting from the kit. However, to mimic it on such a pure webpage (with no any kit to rely on), I have to 'reinvent the wheel' with JavaScript on my own. This should be the most challenging and interesting part.
II. Project Update Log
Day 20.Sep.2015
The construction site has been built.
Day 21.Sep.2015
It seems that the canvas element will be reformatted by the wordpress scripts, I need some time to fix this.
Day 22.Sep.2015
To fix the previous bug, I added a showcase element to the template, and modify its size with embedded javascript, now we can see a rectangle (intentionally using it as a game scene frame) in the showcase area below. And, for course, you must have noticed that, the plane has been successfully added to the scene.
Day 01.Oct.2015
Sorry that this project has to halt for a while, since I am taking my annual leave right now. I promise that it will resume as soon as I come back home.
Day 18.Oct.2015
I created a fundamental class named 'KWScene'. To instantiate a game scene, two arguments should be passed to the constructor. One is the name of the variable pointing to the scene object, the other is the id of the canvas object that used to display the scene.
Day 24.Oct.2015
Added keyDown event disposal function, now you should be able to control the jet by pressing 'W'/'S'/'A'/'D'. Some one might wonder that, why you are taking so long implementing such fundamental functions. Well, I'm not just making a game it self, what I am doing is first to make a framework that looks like Cocoa, and then build this demo game base on it.
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.
