joomla tutorials: January 2019

Browse » Home » Archives for January 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...]

Improve the game guessing number

HTML5 - Guessing number game

Beat monster game by HTML5

joomla tutorials

About Me

Followers

Blog Archive

Danh Mục

Link Liên kết

Thông tin liên hệ