First of all, check over the game as below:
Tuesday 25 February 2014
Beat monster game by HTML5
From last article about animation, today we move to the game beat monster.
In this game, we create a map as matrix 4x4. Then, each time users click or mouse over monster, we change its location. If user click on head of monster, he ore she get one point. In this game, we learn how to make sound every click of user.
First of all, check over the game as below:
First of all, check over the game as below:
Sunday 23 February 2014
image animation with html5 tag CANVAS
This time we will learn how to make animation by canvas like this example:
or link below: http://tmtn.vn/html5/monster/
Everytime we press a key, it will open its mouth.
<canvas> is a tag to display image or video. In this article, we use canvas to display animation image.
or link below: http://tmtn.vn/html5/monster/
Everytime we press a key, it will open its mouth.
<canvas> is a tag to display image or video. In this article, we use canvas to display animation image.
Thursday 20 February 2014
Alien Attack - HTML5 game
See example bellow:
This game is similar to guessing number game, but now we have x and y which is represent the position x, y of the screen. Now the player have to guess 2 numbers. Players can only guess 10 times. There is no new function or properties in this game.
This game is similar to guessing number game, but now we have x and y which is represent the position x, y of the screen. Now the player have to guess 2 numbers. Players can only guess 10 times. There is no new function or properties in this game.
How to make image transition effect by css and html5
we often use javascript to make image move, but it is quite easy when using css. Countinues the previous game: guessing number, we now add an image of ruler and an arrow to show where is the number.
Wednesday 19 February 2014
gradient and shadow button with html5
Thanks for html5 and css 3, a beautiful button can be done by some css lines. See this button:
In this article we will learn:
In this article we will learn:
- To determines how rounded the corners of the button is use border-radius: example: border-radius: 10px;
- To set a gradient background use the properties background: linear-gradient(top, #a3a3a3, #000); , the first color is the start color and the second color is the end color.
- top is the start position, it can be left, right, or bottom. You can set it to 300deg (means 300 degree) to display an angle.
- Top drop shadow, use box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
- To prevent from player from select button, please use: user-select: none;
Tuesday 18 February 2014
Improve the game guessing number
In previous game, we have leant some new properties of HTML 5.
In this version, we learn some new function in javascript below:
- to generate a random number from 1 to 100: Math.floor(Math.random() * 100);
- to catch the event keydown in all over the site: window.addEventListener("keydown", keydownHandler, false);
- to remove event Handler when we don't want that element (ex: button) catch an event: button.removeEventListener("click", clickHandler, false);
Example:
In this version, we learn some new function in javascript below:
- to generate a random number from 1 to 100: Math.floor(Math.random() * 100);
- to catch the event keydown in all over the site: window.addEventListener("keydown", keydownHandler, false);
- to remove event Handler when we don't want that element (ex: button) catch an event: button.removeEventListener("click", clickHandler, false);
Example:
I am thinking of a number between 0 and 99.
Monday 17 February 2014
HTML5 - Guessing number game
In this game, we will familiar with properties placeholder of HTML 5 and javascript function querySelector instead of selectElementById in previous version.
In this game, when users fill textbox a number, and click on guess button, it will return the result of number. Effect of properties placeholder is take a lot of command in javascript in the pass, now it is so easy.<!doctype html><title>Number guessing game</title><p id="output">I am thinking of a number between 0 and 99.</p><input id="input" type="text" placeholder="Enter your guess..."><button>guess</button><script type="text/javascript">//Game variablesvar mysteryNumber = 50;var playersGuess = 0;//The input and output fieldsvar input = document.querySelector("#input");var output = document.querySelector("#output");//The buttonvar button = document.querySelector("button");button.style.cursor = "pointer";button.addEventListener("click", clickHandler, false);function clickHandler(){playGame();}function playGame(){playersGuess = parseInt(input.value);if(playersGuess > mysteryNumber){output.innerHTML = "That's too high.";}else if(playersGuess < mysteryNumber){output.innerHTML = "That's too low.";}else if(playersGuess === mysteryNumber){output.innerHTML = "You got it!";}}</script>
Finally, in this example, we know how to add an event on a button by command button.addEventListener("click", clickHandler, false);
Subscribe to:
Posts (Atom)