Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script src="scripts/jquery-3.2.1.min.js"></script>
- <style>
- /* K6ik stiilid on siin */
- header {
- color: aquamarine;
- }
- td {
- width: 17vw;
- height: 17vw;
- }
- button {
- margin-top: 2vh;
- }
- </style>
- <body>
- <center>
- <!-- Veebilehe kood l2heb siia -->
- <h1>Clicker Game</h1>
- <p>Score: <text id="score">0</text></p>
- <table border="1">
- <tr>
- <td id="11"></td>
- <td id="12"></td>
- <td id="13"></td>
- <td id="14"></td>
- <td id="15"></td>
- </tr>
- <tr>
- <td id="21"></td>
- <td id="22"></td>
- <td id="23"></td>
- <td id="24"></td>
- <td id="25"></td>
- </tr>
- <tr>
- <td id="31"></td>
- <td id="32"></td>
- <td id="33"></td>
- <td id="34"></td>
- <td id="35"></td>
- </tr>
- <tr>
- <td id="41"></td>
- <td id="42"></td>
- <td id="43"></td>
- <td id="44"></td>
- <td id="45"></td>
- </tr>
- <tr>
- <td id="51"></td>
- <td id="52"></td>
- <td id="53"></td>
- <td id="54"></td>
- <td id="55"></td>
- </tr>
- </table>
- <button id="startGame">Start</button>
- </center>
- </body>
- <script>
- let score = 0;
- let timeout = 1000; // in ms
- let squareColor = "rgb(255, 0, 0)";
- let gameStarted = false;
- function getRandomSquareId() {
- let min = 1;
- let max = 5;
- let x = Math.floor(Math.random() * max) + min;
- let y = Math.floor(Math.random() * max) + min;
- return y.toString() + x.toString();
- }
- function clearTheBoard() {
- for (let y = 1; y <= 5; y++) {
- for (let x = 1; x <= 5; x++) {
- let id = "#" + y.toString() + x.toString();
- $(id).css("background-color", "white");
- }
- }
- }
- function renewPointSquare() {
- clearTheBoard();
- let randomID = getRandomSquareId();
- $("#" + randomID).css("background-color", squareColor);
- setTimeout(renewPointSquare, timeout);
- timeout = timeout * 0.95;
- if (timeout < 150) {
- timeout = 150;
- }
- }
- // M2ngu loogika
- $("#startGame").click(function() {
- if (gameStarted) {
- location.reload();
- } else {
- gameStarted = true;
- renewPointSquare();
- $("td").click(function() {
- if ($(this).css("background-color") == squareColor) {
- score += 1;
- } else {
- score -= 1;
- }
- $("#score").text(score);
- });
- }
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement