Step by step to launch my installation

Step 1

Get a router.

Define the local server.

Go to DHCP-address Reservation

Add new.

Insert your computer MAC address

In the reserved IP Address : 192.168.0.103, then save.

Step 2

Go into folder “Software and Source” -> “installer” folder.

Installed node.js and xampp ( in the folder had provided software for mac and window).

Step 3

Go to folder “Artefact” and copy “websock-mastering” folder to your desktop.

Go to folder “Artefact” and copy “game” folder to Xampp/htdocs.

Step 4

Launch “Terminal” for Mac and “Command Prompt” for window.

Launch “ node index.js”

Step 5

Launch “XAMPP”, then press start all.

Step 6

Off all the internet connection of your mobile devices and computer and connect to the router when you setup your personal server. For mobile device also need to off the mobile data.

Step 7

After connecting to the specific connection/router, Main screen (computer) launch the internet browser (“Chrome”) then key in ”http://192.168.0.103/game/main.htm”

Step 8

For mobile devices connected to “http://192.168.0.103/game/p1.htm” for player one;

For mobile devices connected to “http://192.168.0.103/game/p2.htm” for player two.

or

Scan the QR code.

Step 9

Enjoy the game.

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.]

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.

Computer Break Down

Speechless and panic. My mac went down on me during such important time. This week i had been working hard to upgrade my final project. I did a lot of changes to my games and control but my laptop decided to give up on me at the most important time.

My laptop had turn in to blue screen and when restart, the laptop cannot be started. I had find a lot of friend and cousin that are good in computer to help on settling this problem. but end up the some of the hard drive been destroy because the heaviness of the software and time that i am using my laptop to do work. 

I had no mood to talk about it but this is some of the evidence to show that my laptop problem and i waste two week time just to send to repair and i don't have to chance to back up my latest document. Which i need to start from the previous version which i back up in hard drive.

Want to personally thank Melissa Koh for borrowing me her laptop for 4 days.

Because of this i need to spend money to get a desktop to start back all my work.

So i will update my progress in my blog but now i need to rush my work to get back on track or at least finish as much as i can to fulfill the requirement.

Accelerator as control

I found this tutorial online (http://www.albertosarullo.com/demos/accelerometer/), i get the code by by right click inspected code then i copy down to modified.

For this project i only required the X accelerometer so i remove the y and z and just get the X code to use it move my space ship.

I had made the code to send a data like "z" to the server every when the accelerometer is trigger. then check whether is positive or negative. each send different data.

From here i bring in the code to my game control.  

Using the same theory like i modified above. now i use it to trigger function when accelerometer was being trigger. when positive the space ship will move right. negative then move left.

When accelerometer meter move positive then it will call the function sendtoleft1() then when sendtoleft1() was call it will send "a" to the game browser.

So when game browser received the data "a" it will call another function which is left(); which is a function send it a key press code. and the key is press the ship will get the signal and move to left.

References

References

Albertosarullo.com,. 'Accelerometer Javascript Test'.[online] Available at: http://www.albertosarullo.com/demos/accelerometer  [Accessed 11 Jan. 2014]

My Alpha Test form

So basically my survey had only 8 question which i will like to focus on and base on the review of the guest it help me to focus on the area i need to focus on. This survey form are created for the alpha testing, so i am able to collect some information for refinement.

Refinement on temporary control design and inserting game graphic.

After able to control and play the game is time to create and insert some graphic into the website so is able to slightly enhance the experience a tiny little bit. ( for your information this is still not the final finishing design) 

This is the main page the graphic are created by illustrator. I had share some of the graphic in the previous blog.

This is the interface for the controller. Basically the design are main code with CSS styling, which turn out so welcoming.

The plane and the enemy ship are also design in adobe illustrator and the time and score were just decorated with CSS styling.

Work in Progress ( add button and control)

After getting the circle as the prototype . I start to test how to move the object to move in different direction. because of using mobile as controller i cannot use keycode to control the object i need to use button to send data to server. when the server received the data then the object with base on the code.

Below is how i key in the button, when on click it will trigger the javascript and send a code to the server.

Below is the javascript to send data to the server, when the button left is being trigger it will send "a" to the server.

Below is the javascript on the received end of the code which is also the display html, which mean when the code "a" had be received this code will trigger and the function left will be trigger.

When the function left be trigger, the object x will -2; same go to different direction.

Below is a video example to show how it work.

I used firebug to check the data that being send and received after trigger the button.

to download go to the link below:

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

References

Getfirebug.com,. 'Firebug Lite For Google Chrome : Firebug'.  [online] Available at:http://getfirebug.com/releases/lite/chrome/[Accessed 23 Dec. 2014].

Countdown Timer

For my game i need to create a timer to just let the user play for a limited time. since this project is just to let user know about the technology and experience how fantastic it will be that we are able to control and interact with our personal mobile devices.

While searching online to find how to create a timer with java script, I was guide to this specific website from Google.

From this website i am able to copy and modified my personal timer from here. As always i am will start in new working files to test is it the code i want then only bring in to my actual working files.

I am going make my game duration around 1 minute to 1 minute 30 seconds, so for var i use 90 then the var minutes = Math.round(second-30)/60 with round out to the time i want then when it is being trigger it will minus when it reach 0:00 the will stop the timer and show the player they had win the game.

This is the code in html inside body. 

And i code style the CSS to make it appear like the image below.

So that is how i get my game timer.

References

Phpjabbers.com,. 'Javascript Countdown Timer | Javascript Tutorial'.  [online] Available at:http://www.phpjabbers.com/javascript-countdown-timer-php46.html [Accessed 29 Dec. 2014].