After getting the connection to send data from mobile browser to computer browser, I am able to create a communication chat room. During the holiday i start to research on how to create the games structure. As i had propose in my presentation and proposal, i am going to create a space shooting games.
So i start to search on tutorial how to create a game with HTML5 canvas, since my connection is base on internet browser is good to create the game with HTML. I saw a few tutorial online but this is the one the suited me the best. So i follow the the tutorial that are separated into 5 part to create a sample so when i want to create my game is can modify from this sample.
The tutorial was share by Steven Lambert in http://blog.sklambert.com/, which is site that developer and programmer share their knowledge. (Personally, i will recommend for people who want to know more about coding can try visit this site.)
For this game we will be creating on canvas. First, open any software that you are suitable with to code a website.
Part 1 : Panning the background
HTML
We will start with the html page. Create a background for canvas and style it with CSS.
Javascript
The we will be focusing on the javascript code. As the tutorial we had 5 part in part 1 we be creating the background and pan the background to create the plan is always moving forward. For the code you can get it here.
References
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].
Part 2 : The Player
After Part 1 : Panning the background, we will continue on the coding on creating the player which is the spaceship. in this tutorial will create the control key and shooting bullet.
HTML
As always we will start with the html pages by adding canvas to store the player and css style to position the canvas.
Javascript
Then we will be focusing on the javascript codes. For the second part of the tutorial we are going to focusing on creating the spaceship by calling the spaceship image in the img folders then assigned the keyboard keycode to control the spaceship to move up, down, left and also right. After then we will also create the bullet and shooting function for the spaceship. Below are the code and explanation on every section of the code. For the code you can get it here.
References
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].
Part 3 : The Enemy Ships
In Part 3 we will be focus on the javascript, there are no changes in the HTML section.
Javascript
In this part we will focusing on how to create the enemy ships and the bullet the will shooting out. In this section, the code will be more tricky since the oare much condition need to be careful with like how many enemy bullets will be shooted out by the enemy ships. Beside that , which are the are they will be appear. And this part we will focusing on the section of the code. For the code you can get it here.
References
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].
Part 4 : 2D Collision Detection
In Part 4 we also will be focus on the javascript, there are no changes in the HTML section.
Javascript
In this part we will focusing on when the the player shoot and hit enemies will now results in the enemy disappearing. For the purposes of this demonstration, your ship will not disappear when you get hit by an enemy bullet. It now implements 2D collision detection fairly quickly. it is also a good technique for helping speed up collision detection by implementing a quadtree to reduce collision checks. For the code you can get it here.
References
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].
Part 5 : 2D Collision Detection
In Part 5, we will focus on the finishing touches to our game such as sound, score, and a game over screen.
HTML
We’ll start out this tutorial by adding the player score and the game over screen. Both are done by modifying the HTML page.
Javascript
In this part we will focusing adding the player score, sound effect and the game over screen. Beside that as in part 4 we notice that the player will not get any effect after getting shooted by the enemy ship. We will adding this condition in the javascript coding as well. After you lose in the game, we provide a restart button, for player to restart the games. For the code you can get it here.
References
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].
Each part had it on tutorial which is well link the section, this is just one of the tutorial i use to create my mock up of my games. Since i had no much knowledge of canvas by doing practice it allowed me to understand more about the programming codes.
For those they will like to apply this code you are able to head to this two sites.
1) http://blog.sklambert.com/html5-canvas-game-panning-a-background/
The full set of the codes are uploaded in github. Feel free to download and play with the codes.
2) https://github.com/straker/galaxian-canvas-game
All the code are assign with description on every lines of codes . Due to this is not the code i create i will cite this code to Steven Lambert. and a special thank for sharing such useful tutorial online. For more reading can go in the sharing site which i had cite on the references in the end of the blog.
References
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].
No comments:
Post a Comment