Friday, February 6, 2015

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.

Thursday, February 5, 2015

Annotation

References
Tutorial
Albertosarullo.com,. 'Accelerometer Javascript Test'.[online] Available at: http://www.albertosarullo.com/demos/accelerometer  [Accessed 11 Jan. 2014].
  • I used this linked to learn how to access to accelerometer and get the data then modified into my own code to control the ship.

Classicgaming.cc,. 'Classic Arcade Games - Space Invaders'. [online] Available at:http://www.classicgaming.cc/classics/spaceinvaders/sounds.php  [Accessed 5 Feb. 2015].
  • I am able to collect some of my game sound effect from this website. This website provide the legendary game, Space Invaders ( which my game references on ) sound effect and background. I download and edited them in Audition.

Lambert, S. (2012). HTML5 Canvas Game: Panning a Background - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-panning-a-background/ [Accessed 22 Dec. 2014].
  • This is a series of codes that teach user how to create a space shooting games. For this particular webpage is use to teach how to create a panning loop background.


Lambert, S. (2012). HTML5 Canvas Game: Moving with Dirty Rectangles - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-the-player-ship/ [Accessed 22 Dec. 2014].
  • This particular webpage teach user how to control the ship with keyboard and keycodes.

Lambert, S. (2013). HTML5 Canvas Game: The Enemy Ships - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-the-enemy-ships/ [Accessed 22 Dec. 2014].
  • In this webpage, it teach how to create the enemy and make them shoot bullet and spawn when every enemy is being destroyed.

Lambert, S. (2013). HTML5 Canvas Game: 2D Collision Detection - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-2d-collision-detection/ [Accessed 22 Dec. 2014].
  • This tutorial provide the step to creating collision detection which are to check and create when the enemy or player being shoot what will happen. So this is the key one making the games fun.

Lambert, S. (2013). HTML5 Canvas Game: HTML5 Audio and Finishing Touches - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-html5-audio-and-finishing-touches/ [Accessed 22 Dec. 2014].
  • This is the final step of the series of tutorial codes, it tell what are thing that can or need to refine due to the changes of codes so that everything can work perfectly.

Lambert, S. (2014). straker/galaxian-canvas-game. [online] GitHub. Available at: https://github.com/straker/galaxian-canvas-game [Accessed 22 Dec. 2014].
  • In this page, it provide all the sources files of the 5 tutorial that he share in the HTML5 canvas games tutorial which allow user to download and modify the codes.

Phpjabbers.com,. 'Javascript Countdown Timer | Javascript Tutorial'.  [online] Available at:http://www.phpjabbers.com/javascript-countdown-timer-php46.html [Accessed 29 Dec. 2014].
  • From this site i am able to learn how to create a countdown timer for my games.

Pinterest,. 'Dune'. N.p., 2015 [online] Blog.sklambert.com. Available at: https://www.pinterest.com/pin/265079128042721891/ [Accessed 24 Dec. 2014].
  • I use this images as a reference to help create my own design for my game interface.

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].
  • This tutorial teach me how to create a keypress and key on hold function to enable user to press on the button the make the ship move.

Stackoverflow.com,. 'Playing Audio With Javascript?'. [online] Available at: http://stackoverflow.com/questions/9419263/playing-audio-with-javascript [Accessed 5 Feb. 2015].
  • This website was find while i am google search for tutorial of playing audio with Javascript. In the site it provide different kind of way to play a audio file with javascript

Strongholdgames.com,. 'Stronghold Games » Time ‘N’ Space – Soundtrack!'.[online] Available at: http://strongholdgames.com/time-n-space-soundtrack/  [Accessed 5 Feb. 2015].
  • This website provide some cool background music for space shooting game, which i download and edit/modified for my final installation.


The Gundam Wiki,. 'ZGMF-X56S/Α Force Impulse Gundam' [online] Blog.sklambert.com. Available at: http://gundam.wikia.com/wiki/ZGMF-X56S/%CE%B1_Force_Impulse_Gundam[Accessed 24 Dec. 2014].
  • I use this images as a reference to help create my own design for my game character.

W3schools.com,. 'HTML5 Canvas'. [online] Available at: http://stackoverflow.com/questions/702165/how-do-i-implement-press-and-hold-button-javascript [Accessed 23 Dec. 2014].
  • I learn how to create a simple canvas with this tutorial in W3School.

W3schools.com,. 'Javascript Timing Events' [online] Available at: http://www.w3schools.com/js/js_timing.asp [Accessed 30 Jan. 2015].
  • I learn to create the timing event with this tutorial. With this tutorial i understand the way to create SetInterval in Javascript.

Winterhillwargamers.myfreeforum.org,. 'Winter Hill Wargamers :: Cyberpunk Models'. [online] Blog.sklambert.com. Available at: http://winterhillwargamers.myfreeforum.org/Cyberpunk_Models_about154.html [Accessed 24 Dec. 2014].
  • I use this images as a reference to help create my own design for my game character.

Software

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

  • I use Xampp for the server connection.

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

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

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

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

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

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

Harvard referencing

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


Classicgaming.cc,. 'Classic Arcade Games - Space Invaders'. [online] Available at:http://www.classicgaming.cc/classics/spaceinvaders/sounds.php  [Accessed 5 Feb. 2015].


Lambert, S. (2012). HTML5 Canvas Game: Panning a Background - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-panning-a-background/ [Accessed 22 Dec. 2014].


Lambert, S. (2012). HTML5 Canvas Game: Moving with Dirty Rectangles - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-the-player-ship/ [Accessed 22 Dec. 2014].


Lambert, S. (2013). HTML5 Canvas Game: The Enemy Ships - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-the-enemy-ships/ [Accessed 22 Dec. 2014].


Lambert, S. (2013). HTML5 Canvas Game: 2D Collision Detection - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-2d-collision-detection/ [Accessed 22 Dec. 2014].


Lambert, S. (2013). HTML5 Canvas Game: HTML5 Audio and Finishing Touches - Programming Tutorials, Tips, and Tricks. [online] Blog.sklambert.com. Available at: http://blog.sklambert.com/html5-canvas-game-html5-audio-and-finishing-touches/ [Accessed 22 Dec. 2014].


Lambert, S. (2014). straker/galaxian-canvas-game. [online] GitHub. Available at: https://github.com/straker/galaxian-canvas-game [Accessed 22 Dec. 2014].


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


Pinterest,. 'Dune'. N.p., 2015 [online] Blog.sklambert.com. Available at: https://www.pinterest.com/pin/265079128042721891/ [Accessed 24 Dec. 2014].


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


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


Strongholdgames.com,. 'Stronghold Games » Time ‘N’ Space – Soundtrack!'.[online] Available at: http://strongholdgames.com/time-n-space-soundtrack/  [Accessed 5 Feb. 2015].


The Gundam Wiki,. 'ZGMF-X56S/Α Force Impulse Gundam' [online] Blog.sklambert.com. Available at: http://gundam.wikia.com/wiki/ZGMF-X56S/%CE%B1_Force_Impulse_Gundam[Accessed 24 Dec. 2014].


W3schools.com,. 'HTML5 Canvas'. [online] Available at: http://stackoverflow.com/questions/702165/how-do-i-implement-press-and-hold-button-javascript [Accessed 23 Dec. 2014].


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


Winterhillwargamers.myfreeforum.org,. 'Winter Hill Wargamers :: Cyberpunk Models'. [online] Blog.sklambert.com. Available at: http://winterhillwargamers.myfreeforum.org/Cyberpunk_Models_about154.html [Accessed 24 Dec. 2014].


Software

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

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.




Wednesday, February 4, 2015

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

Friday, January 30, 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.]

Friday, January 23, 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.



Sunday, January 18, 2015

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.


Friday, January 16, 2015

Consultation with Yee Siang (16/112015)

I was very sorry that, my laptop break down at the very important day before my consultation. My laptop pass away a day before my consultation make need to go borrow Melissa's laptop and update my old files back to the newest files. I am glad that i had back the previous files but i am sad that i back up not seldom enough because the code i back up is before i successfully code accelerometer. Which make need to code again in class but this time even faster.

In this week tutorial i am unable to reach my target to make two speed. So I code it inside class. we was trying to think a better to code the two different speed java script but the first few method doesnt work. Suddenly i got idea of creating a separate function to for different speed, so when check the condition if more the digit then will trigger the second function which will make the ship move faster. The Yee Siang ask me try and was able to work. Then is almost 5 pm i finish the all while i reach home.

Tuesday, January 13, 2015

Result of Alpha Testing With Level Junior

Today i am very please that our lecturer, Sweii invited our level 4 junior to participate in our Alpha Testing. Some of my classmate me was setting up at the student lounge cause our classroom and IIS is not available or too pack for us to set up our installation there.

(i just manage to capture one image with my phone because my installation require to use a mobile devices)

During the Alpha test i had 12 tester tested my installation and below are the data that are collect.

12 tester
Age : is between 18 to 21 (teenager)

 Gender:
10 Female 2 Male

1 ) Do you know what is Websocket ?
7 say Yes 5 say No

2 ) Do you understand what is this interactive installation design for?
9 say Provide new installation interactive option 3 say Gaming controller

3 ) Which tool would you prefer to interact with a specific installation.
11 say Personal Mobile Devices 1 say Controller (such as mouse, and keyboard)

4 ) Are the connection instruction clear?
12 say  Yes 0 say No

5 ) Is the interactive duration enough to experience the installation?
12 Yes 0 say No

6 )  Please rate from 1 (low) - 5 (high), how interesting is the idea of the installations?
0 say 1 0 say 2 4 say 3 4 say 4 4 say 5

7 )  Please rate from 1 (low) - 5 (high), how interesting is the games play?
0 say 1 1 say 2 7 say 3 1 say 4 2 say 5

8) Please write down if you have any suggestion:
  1. The controller is a bit hard to control.
  2. just the control and the color the contrast
  3. graphic can be more interesting (like adding effect); Add music, sound effect will more great
  4. Add in Power up features
  5. Add more features
  6. Add more animation
  7. Movement of plane can be smoother
  8. Increase the difficulties
  9. Game should be more challenging and fun. Add levels or environment.
  10. It would be interesting if this installation can provide educational benefits for younger children.
  11. This is really impressive idea for anew method to solve an interactive event. But the game is okay for only develop idea.
  12. The idea of the installation is new and interactive. Most of the people do always like to use their mobile to interact with bigger screen. For the game experience, it's fine but very good to use the new tech as the controller. It is a confusing of the hierarchy of the first page design layout.

Base on the Alpha test i get very solid feedback for tester. Most of the tester know about the objective of my project and idea concept interesting level is above average and high. But the game design is on the average level.

Due to my project in focus on the web socket and interaction of user using phone to interact. Game is just a content use to showcase how the technology work. Most of the tester think the game is no difficult enough but only one tester finish the game, which make me question is it still not hard enough. But the graphic and effect will be add in to enhance the full experience.

As for the control still need to improve because by absorbing how the tester play i can see they will try to tilt more to see whether it move faster or not. So i will be enhance on the specific section.

For the sound effect and background music , actually there are sound just that the two installation beside me is too loud so the user can't listen to it.

For the game play and design i will try my best to refine it for the submission but if there are not enough time to finish. i will enhance it during the two month before my degree exhibition. I am really glad that our junior had given me such good feedback and allow my project to improve and see whether i had achieve my objective.