css code:
html and javascript code:#stage{width: 300px;height: 33px;position: relative;}#scale{width: 300px;height: 33px;position: absolute;top: 0px;left: 5px;background-image: url(../images/scale.png);}#arrow{width: 13px;height: 22px;position: absolute;top: 10px;left: 0px;background-image: url(../images/arrow.png);/*Transition*/-webkit-transition: left 0.5s ease-out 0s;-moz-transition: left 0.5s ease-out 0s;transition: left 0.5s ease-out 0s;}button{font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #fff;padding: 10px 20px;border: 2px solid #000;cursor: pointer;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background:-webkit-linear-gradient(top, #a3a3a3, #000);background:-moz-linear-gradient(top, #a3a3a3, #000);background: linear-gradient(top, #a3a3a3, #000);-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);box-shadow: 5px 5px 3px rgba(0,0,0,0.5);-webkit-user-select: none;-moz-user-select: none;user-select: none;}button:hover{background: -webkit-linear-gradient(top, #acc7a3, #506651);background: -moz-linear-gradient(top, #acc7a3, #506651);background: linear-gradient(top, #acc7a3, #506651);}button:active{background: -webkit-linear-gradient(top, #858565, #c5c9a9);background: -moz-linear-gradient(top, #858565, #c5c9a9);background: linear-gradient(top, #858565, #c5c9a9);}
<!doctype html><meta charset="utf-8"><title>Đoán số</title><link type='text/css' rel='stylesheet' href='css/style.css' /><div id="stage"><div id="scale"></div><div id="arrow"></div></div><p id="output">Đây là một số trong khoảng từ 1 đến 99</p><input id="input" type="text" placeholder="Điền số..." autofocus><button>Kiểm tra</button><script>//Game variablesvar mysteryNumber = Math.floor(Math.random() * 100);console.log(mysteryNumber);var playersGuess = 0;var guessesRemaining = 10;var guessesMade = 0;var gameState = "";var gameWon = false;//The input and output fieldsvar input = document.querySelector("#input");var output = document.querySelector("#output");//The buttonvar button = document.querySelector("button");button.addEventListener("click", clickHandler, false);button.style.cursor = "pointer";//The arrowvar arrow = document.querySelector("#arrow");function render(){//Position the arrow//Multipy the players guess by 3 to get the//correct pixel position on the scalearrow.style.left = playersGuess * 3 + "px";}//Listen for enter key presseswindow.addEventListener("keydown", keydownHandler, false);function keydownHandler(event){if(event.keyCode === 13){validateInput();}}function clickHandler(){validateInput();}function validateInput(){playersGuess = parseInt(input.value);if(isNaN(playersGuess)){output.innerHTML = "Điền vào số.";}else{playGame();}}function playGame(){guessesRemaining = guessesRemaining - 1;guessesMade = guessesMade + 1;gameState = " Số lần đã đoán: " + guessesMade + ", Còn lại: " + guessesRemaining;playersGuess = parseInt(input.value);if(playersGuess > mysteryNumber){output.innerHTML = "Số này cao hơn số bí mật." + gameState;//Check for the end of the gameif (guessesRemaining < 1){endGame();}}elseif(playersGuess < mysteryNumber){output.innerHTML = "Số này thấp hơn số bí mật." + gameState;//Check for the end of the gameif (guessesRemaining < 1){endGame();}}else if(playersGuess === mysteryNumber){gameWon = true;endGame();}//Update the graphic displayrender();}function endGame(){if (gameWon){output.innerHTML = "Số " + mysteryNumber + " chính là số cần tìm!" + "<br>" + "Bạn mất " + guessesMade + " lần đoán.";}else{output.innerHTML = "Không còn lựa chọn nào!" + "<br>" + "Số bí mật là: " + mysteryNumber + ".";}//Disable the buttonbutton.removeEventListener("click", clickHandler, false);button.disabled = true;//Disable the enter keywindow.removeEventListener("keydown", keydownHandler, false);//Disable the input fieldinput.disabled = true;}</script>
First, we add this code to display scale and arrow image. Each div have its id, to display background image by html and css below.html code:
<div id="stage">
<div id="scale"></div>
<div id="arrow"></div>
</div>
css code:
function render()
{
arrow.style.left = playersGuess * 3 + "px";
}
this function is call in they function playGame(). So that it is called everytime we guess a number.
To make the transition more smooth, we use the css bellow:
#stage
{
width: 300px;
height: 33px;
position: relative;
}
#scale
{
width: 300px;
height: 33px;
position: absolute;
top: 0px;
left: 5px;
background-image: url(../images/scale.png);
}
#arrow
{
width: 13px;
height: 22px;
position: absolute;
top: 10px;
left: 0px;
background-image: url(../images/arrow.png);
/*Transition*/
-webkit-transition: left 0.5s ease-out 0s;
-moz-transition: left 0.5s ease-out 0s;
transition: left 0.5s ease-out 0s;
}Everytime we add new number, we caculate position of the arrow, then call a function to change value of its css by the code bellow:
function render()
{
arrow.style.left = playersGuess * 3 + "px";
}
this function is call in they function playGame(). So that it is called everytime we guess a number.
To make the transition more smooth, we use the css bellow:
-webkit-transition: left 0.5s ease-out 0s;-moz-transition: left 0.5s ease-out 0s;transition: left 0.5s ease-out 0s;
No comments:
Post a Comment