Monday, February 17, 2014

Trò chơi đoán số

HTML 5 có một số thuộc tính mới so với HTML trước đây. Trong trò chơi này, chúng ta sẽ làm quen với placeholder và một số hàm javascript như querySelector và addEventListener


Trò chơi như sau:
+ Cho một số, yêu cầu người chơi đoán, nếu đúng trả về thông báo đúng, nếu cao hơn, hoặc thấp hơn điền thông báo cao hoặc thấp hơn.
+ Code chương trình như sau:
<!doctype html>
<title>Đoán số</title>
    <p id="output">Con số may mắn của ngày hôm nay là</p>
    <input id="input" type="text" placeholder="Điền số nhé...">
    <button>Dò số</button>
    <script type="text/javascript">
    //Game variables
    var mysteryNumber = 50;
    var playersGuess = 0;
    //The input and output fields
    var input = document.querySelector("#input"); //xác định biến input, output, buttton
    var output = document.querySelector("#output");
    //The button
    var button = document.querySelector("button");
    button.style.cursor = "pointer"; // thiết lập kiểu chuột
    button.addEventListener("click", clickHandler, false); //thêm một sự kiện cho nút bấm
    function clickHandler()
    {
        playGame(); // gọi hàm chơi trò chơi
    }
    function playGame()
    {
        playersGuess = parseInt(input.value);
        if(playersGuess > mysteryNumber)
        {
            output.innerHTML = "Số cao quá.";
        }
        else if(playersGuess < mysteryNumber)
        {
            output.innerHTML = "Số thấp quá.";
        }
        else if(playersGuess === mysteryNumber)
        {
            output.innerHTML = "Bạn đã đúng!";
        }
    }
</script>

No comments:

Post a Comment