Rzeczywiście kod jest nieco chaotyczny. Brak mi jeszcze wystarczającej wiedzy z zakresu inżynierii, planowania oraz doświadczenia. Niemniej - projekt jest malutki i działa.
html
<!DOCTYPE html> <html> <head> <meta lang="en"> <meta charset="utf-8"> <title>Guess game</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href='https://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'> </head> <body> <div class="text-center" id="board"> <div class="vbox" id="baner"> <div class="vmiddle"> <div class="vinner"> Guess game </div> </div> </div> <div> <div id="output">Guess the number 1 - 100.</div> <input id="input" type="text" placeholder="Enter the number..." autofocus><br /> <button id="button">Guess</button> <button id="again">Again?</button> <div id="state"></div> Last guess: <div id="history"></div> </div> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>
css
/* Guess game - style css */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; } body { background-image: url('../images/bgr.png'); font-family: 'Arimo', sans-serif; } button { min-width: 150px; min-height: 40px; color: white; } button#button { background-color: #3D73FF; } button#again { background-color: red; } button:hover { background-color: #325ED1; } button:active { background-color: #89AAFF; } .text-center { margin: auto; text-align: center; } /* Vertical align */ .vbox { width: 100%; display: table; #position: relative; overflow: hidden; } .vmiddle { #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; } .vinner { #position: relative; #top: -50% } .disabled { background-color: #417F2C;} /* Basic structure */ #board { width: 400px; margin-top: 20px; border-radius: 0px; background-color: rgba(255, 254, 202, 0.6); border-bottom: 2px solid #325ED1; border-top: 2px solid #FFF; color: #222; } #baner { min-height: 50px; background: -webkit-linear-gradient(#89AAFF, #325ED1); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#89AAFF, #325ED1); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#89AAFF, #325ED1); /* For Firefox 3.6 to 15 */ background: linear-gradient(#89AAFF, #325ED1); /* Standard syntax */ color: white; text-shadow: 2px 2px 0 #555; font-weight: bold; font-size: 20px; } #input { border-radius: 5px; min-height: 30px; text-align: center; margin: 0px; } #output { margin: 10px; } #input { margin: 10px; } #input:focus { outline: none; margin: 10px; } #state { margin: 10px; } #history { margin: 10px; }
js
///////////////////////////////////////////// // SIMPLE "GUESS A NUMBER" JAVASCRIPT GAME // ///////////////////////////////////////////// //Game variables var mysteryNumber = Math.floor((Math.random() * 100) + 1); var playersGuess = 0; var guessRemaining = 10; var guessMade = 0; var guessState = ""; var array = new Array; //The input, output and other fields var input = document.getElementById("input"); var output = document.getElementById("output"); var state = document.getElementById("state"); var egame = document.getElementById("endgame"); var hist = document.getElementById("history"); //The button var buttonBtn = document.getElementById("button"); var againBtn = document.getElementById("again"); againBtn.style.display = "none"; //Listeners buttonBtn.addEventListener("click", clickHandler, false); againBtn.addEventListener("click", gameInit, false); window.addEventListener("keydown", keydownHandler, false); //Functions function clickHandler() { validateInput(); } function keydownHandler(event) { if(event.keyCode === 13) { validateInput(); } } function validateInput() { playersGuess = parseInt(input.value); if (isNaN(playersGuess)) { output.innerHTML = "Give me a number value!"; input.value=""; } else { playGame(); } } function playGame() { guessRemaining--; guessMade++; guessState = " Guess: " + guessMade + ". Remaining: " + guessRemaining + "."; state.innerHTML = guessState; // history of inputs hist.innerHTML = ""; array.push(input.value); for (i = array.length-1; i>-1; i--) { hist.innerHTML = hist.innerHTML + array[i] + "<br/>"; } if (guessRemaining<=0) { endGame(false); } else { if(playersGuess > mysteryNumber) { output.innerHTML = "That's too high."; } else if(playersGuess < mysteryNumber) { output.innerHTML = "That's too low."; } else if(playersGuess === mysteryNumber) { endGame(true); } } input.value=""; } function endGame(verdict) { window.removeEventListener("keydown", keydownHandler, false); buttonBtn.style.display = "none"; againBtn.style.display = ""; input.disabled=true; input.setAttribute("placeholder", "End"); if (verdict) { output.innerHTML = "Got it!"; var audio = new Audio('audio/yeah.mp3'); audio.play(); } else { input.setAttribute("placeholder", mysteryNumber); output.innerHTML = "Looooser!"; var audio = new Audio('audio/farting.mp3'); audio.play(); } } function gameInit () { window.addEventListener("keydown", keydownHandler, false); buttonBtn.style.display = ""; againBtn.style.display = "none"; input.disabled=false; input.setAttribute("placeholder", "Enter the number..."); output.innerHTML = "Guess the number 1 - 100."; hist.innerHTML = ""; for (var i = array.length - 1; i >= 0; i--) { array.pop(); }; mysteryNumber = Math.floor((Math.random() * 100) + 1); playersGuess = 0; guessRemaining = 10; guessMade = 0; guessState = " Guess: " + guessMade + ". Remaining: " + guessRemaining + "."; state.innerHTML = guessState; input.focus(); }
images
poniżej znajduje się obrazek tła, ale ma 5x5 px, więc ledwie go widać...
G