All Source and Software that are used in this project

This blog post actually just showing what are the source and software or application i used in this project.

http://nodejs.org/

use it create the socket to communicate between laptop browser and mobile browser.

https://www.apachefriends.org/index.html

I use Xampp for the server connection.

http://getfirebug.com/releases/lite/chrome/

While in chrome i am to use this to help debug the codes

http://www.sublimetext.com/

I didn't use dream to code but i use sublime text to create my code, is way better to code is a code pretty and colorful text.

http://www.adobe.com/creativecloud.html

I use adobe to create all my art and edit my sound track.

All the application and software above are free beside the original adobe creative cloud. Feel free to download down all the application and i hope it help. But to create my project you must the first two application which is node.js and xampp.

References

Adobe.com,. 'Software And Services For Creative Professionals | Adobe Creative Cloud'. [online] Available at:http://www.adobe.com/creativecloud.html [Accessed 5 Feb. 2015.]

Apachefriends.org,. 'XAMPP Installers And Downloads For Apache Friends'. [online] Available at:http://getfirebug.com/releases/lite/chrome/ [Accessed 5 Feb. 2015.]

Getfirebug.com,. 'Firebug Lite For Google Chrome : Firebug'. [online] Available at:http://getfirebug.com/releases/lite/chrome/ [Accessed 5 Feb. 2015.]

Nodejs.org,. 'Node.Js'. N.p. [online] Available at:http://nodejs.org/ [Accessed 5 Feb. 2015.]

Sublimetext.com,. 'Sublime Text: The Text Editor You'll Fall In Love With'. [online] Available at:http://www.sublimetext.com/ [Accessed 5 Feb. 2015.]

Connect laptop into bigger screen

at last i had the chance to go buy this  expensive mini adapted for VGA to connect to the television i borrow from for a very long time. 

 I text to launch the application on the browser and double check on the screen which turn what i did is slightly bigger.

the i went to the setting to do some setting, so that i had a understanding what size i need to re-size my game into and able to fit in the television. So i had set vga display resolution to 1280x768 pixels.

So below are some of the photo i take while i am setting up.

Main Page Background Music

Image1

Image2

After refine and restore the error and code, i realized my main dont have anything sound effect so i did a sound function to call the background music and make it loop until player login and start the games.

Image1 show i call the music and how i make it loop.

Images 2 show i will pause the music when it load to the game page.

References

Stackoverflow.com,. 'Playing Audio With Javascript?'. [online] Available at: http://stackoverflow.com/questions/9419263/playing-audio-with-javascript [Accessed 5 Feb. 2015.]

Stackoverflow.com,. 'Sound Effects In Javascript / HTML5'. [online] Available at: http://stackoverflow.com/questions/1933969/sound-effects-in-javascript-html5  [Accessed 5 Feb. 2015.]

Stackoverflow.com, (2014). How do I implement press and hold button javascript?. [online] Available at: http://stackoverflow.com/questions/702165/how-do-i-implement-press-and-hold-button-javascript [Accessed 24 Dec. 2014].

Refinement Design

I had recreated the normal flat color button i had before into some thing more interest like the button in some space ship to create the feeling.

Mobile UI

I had also change the enemy space ship from previous design into this 

From flat color background i had change it to a moving galaxy background to make it look more interesting.

And last i also add in a score box to show each player score every time they lose or win the game so they can compete with each other. And i also change the game over word and success word with better graphic.

Color references

References

Alphabeck.co.uk,. N.p., 2015. [online] Available at:http://alphabeck.co.uk/cgi-data/weblog_basic/uploads/2011/10/organ.jpg [Accessed 5 Feb. 2015].

Count Down Timer to go back to Main page

After thinking for awhile i think is better to remove the restart status in the end of the games. because my objective of this installation is showcase how can we use web-socket, browser and the mobile device to create something new in technology and interaction.

So i decided to make the game if user lose or win then game will automatically bring the players back to the main screen. if you they will like to play just press start then they are able to play again.

So i create a function to link to another page after 5 seconds when the function is called. For now i linked the page the first pages which is main.htm now.

So every time when the game over or when the game timer finish the the function will call and after 5 seconds the page will automatically link back to main page.



References
W3schools.com,. 'Javascript Timing Events' [online] Available at: http://www.w3schools.com/js/js_timing.asp [Accessed 30 Jan. 2015.]

Consultation with Yee Siang (23/1/2015)

The accelerometer work and able to move two different speed when the player tilt more. So this week is just to check what are some other update i am able to put in to let user had a better user experiences and also debugging.

The accelerometer had a minor error which is one of the plane cannot move left, while discussing with Yee Siang i find out is because i put it the wrong keycode. So after switching the keycode every was able to work perfectly.

I discuss Yee Siang whether i should create the restart function so when they lose they are able to restart. Yee Siang did say yes and we are trying to make the function work . and if they didnt press restart it will automatic go back to main interface.

So that will my final week consultation objective which able to let the to work and have perfect interaction cycle.

When i reach i done some thinking and though i think i just make the game restart without letting restart if the player want to continue the can just press start in the main then start the game again. this is use to prevent people staying over the installation for too long.

Accelerator part two (Creating two different speed)

After consulting with lecturer Yee Siang we notice that there is some issue like if i am a player and i tilt my phone a lot but it is still on the same speed isn't it not logical. so Yee Siang ask me to try created two different kind of speed so when user move more than a number then will trigger another function which will make the ship move faster than normal speed.

as you can see i had remove the up down left right button away then add in the accelerometer to check the current status to trigger the function.

Base on what we discuss one creating two different speed i create a condition to check that if the data received from accelerometer is less than 3 it will be normal speed then if the data is more than 3 then will trigger the function that all the ship to move faster.

so i had create two different kind of left and two different kinds of right. left2 and right2 is the one trigger the faster speed.

so as i had explain in the accelerometer part one, when the game received the data from the socket they will check on what data had been received and trigger different function.

the ship will move base on the function that been called. for the faster speed i just basic x2 on the normal speed to make it move faster.