4.11.R16

<html>

<head>
<meta charset=”utf-8? />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width” />
<meta http-equiv=”Content-Security-Policy” content=”default-src * ‘unsafe-inline’; style-src ‘self’ ‘unsafe-inline’; media-src *” />
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<title>Interactive Page</title>

</head>
<style>
    body{
        font-size: 200%;
    }
    img {
        max-width:100%;
        height:auto;
    }
    .game{
        height: 30vw;
        width: 30vw;
    }

    table, td, tr {
        border: 2px solid black;
    }

    .clickable{
        background-color: red;
    }

    .ui-btn{
        font-size: 200%;
    }

</style>

<body>
    <center>
    <div>
        <h1>Awesome Game</h1>
        <p>Your score: <text id="myScore">0</text></p>
    </div>

    <div style="padding-top: 30px">
        <table>
            <tr><td id="1" class="game"></td><td id="2" class="game"></td><td id="3" class="game"></td></tr>
            <tr><td id="4" class="game"></td><td id="5" class="game"></td><td id="6" class="game"></td></tr>
            <tr><td id="7" class="game"></td><td id="8" class="game"></td><td id="9" class="game"></td></tr>
        </table>

    </div>
        <div style="height:20vh">
        <button id="startGameBtn" class="ui-btn">Start game!</button>
    </div>

    </center>
</body>

<script>
    var score = 0;
    var gameStarted = false;
    var lastColoredSquare = -1;

    function getRandomNumber(intFrom, intTo){
        return Math.floor((Math.random() * intTo) + intFrom);
    }

    function addScore(){
        score = score + 1;
        $("#myScore").html(score);
    }

    function colorRandomSquare(){
        var idToColor = getRandomNumber(1,9);
        if(idToColor != lastColoredSquare){
            lastColoredSquare = idToColor;
            $("#" + idToColor).addClass("clickable");
        }else{
            colorRandomSquare();
        }

    }

    $("#startGameBtn").click(
        function(){
            if(!gameStarted){
                gameStarted = true;
                colorRandomSquare();
                $("#startGameBtn").html("End game!");
            }else{
                gameStarted = false;
                score = 0;
                lastColoredSquare = -1;
                $("#myScore").html(score);
                $("#startGameBtn").html("Start game!");
                for(var squareID = 1; squareID <= 9; squareID++){
                    $("#" + squareID).removeClass("clickable");
                }
            }

        }
    );

    $(".game").click(
        function(){
            console.log();
            if($(this).attr("class") == "game clickable"){
                addScore();
                $(this).removeClass("clickable");
                colorRandomSquare();
            }
        }
    );


</script>

</html>