PPM blog

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.

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