Browse » Home » Archives for 2019

Improve the game guessing number

9:50 PM Huong Giang

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:


I am thinking of a number between 0 and 99.
 

[Read More...]


HTML5 - Guessing number game

9:50 PM Huong Giang


In this game, we will familiar with properties placeholder of HTML 5 and javascript function querySelector instead of selectElementById in previous version.
<!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 variables
var mysteryNumber = 50;
var playersGuess = 0;
//The input and output fields
var input = document.querySelector("#input");
var output = document.querySelector("#output");
//The button
var 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>
 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.
Finally, in this example, we know how to add an event on a button by command button.addEventListener("click", clickHandler, false);

[Read More...]


Beat monster game by HTML5

9:49 PM Huong Giang

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:




[Read More...]


Subscribe to: Posts (Atom)
 

Link Liên kết

Thông tin liên hệ

YH: huonggiangdhtn
Skype: tthuonggiang
Return to top of page Copyright © 2010 | joomla extensions jw-extension.net