Skip to content

Instantly share code, notes, and snippets.

@ambethia

ambethia/guessing_game.js

Last active June 29, 2018 14:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ambethia/4c3120fc980481b73599 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ambethia/4c3120fc980481b73599 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
guessing_game.js
const MIN = 1
const MAX = 1000
let guess, upper, lower, tries
const startGame = () => {
updateGame()
document.querySelector('#intro').style.display = 'none'
document.querySelector('#game').style.display = 'block'
}
const updateGame = () => {
guess = Math.round((lower + upper) / 2)
document.querySelector('#guess').textContent = guess
tries++
}
const endGame = () => {
document.querySelector('#tries').textContent = tries
document.querySelector('#game').style.display = 'none'
document.querySelector('#victory').style.display = 'block'
}
const resetGame = () => {
lower = MIN
upper = MAX
tries = 0
document.querySelector('#intro').style.display = 'block'
document.querySelector('#victory').style.display = 'none'
}
const guessLower = () => {
upper = guess - 1
updateGame()
}
const guessHigher = () => {
lower = guess + 1
updateGame()
}
const main = () => {
document.querySelector('#min').textContent = MIN
document.querySelector('#max').textContent = MAX
document.querySelector('#dif').textContent = Math.round(Math.log(MAX) / Math.log(2))
document.querySelector('#ok').addEventListener('click', startGame)
document.querySelector('#lower').addEventListener('click', guessLower)
document.querySelector('#higher').addEventListener('click', guessHigher)
document.querySelector('#yes').addEventListener('click', endGame)
document.querySelector('#reset').addEventListener('click', resetGame)
}
document.addEventListener('DOMContentLoaded', main)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<script src="guessing_game.js"></script>
<link rel="stylesheet" href="styles.css" media="screen">
</head>
<body>
<div id="intro">
<p>
Think of a number between <span id="min">MIN</span> and <span id="max">MAX</span>.
<br> I will be able to guess in <span id="dif">N</span> tries or less.
</p>
<p>
<button id="ok">OK?</button>
</p>
</div>
<div id="game">
<p>Is your number <span id="guess">N</span>?</p>
<p>
<button id="yes">Yes</button> or No, it's
<button id="lower">Lower</button> or
<button id="higher">Higher</button>.
</p>
</div>
<div id="victory">
<p>I got it in only <span id="tries">N</span> tries!</p>
<p>
<button id="reset">Again?</button>
</p>
</div>
</body>
</html>
Raw
step_01.js
const MIN = 1
const MAX = 1000
const main = () => {
document.querySelector('#min').textContent = MIN
document.querySelector('#max').textContent = MAX
document.querySelector('#dif').textContent = Math.round(Math.log(MAX) / Math.log(2))
}
document.addEventListener('DOMContentLoaded', main)
Raw
step_02.js
const MIN = 1
const MAX = 1000
let guess, upper, lower
const startGame = () => {
lower = MIN
upper = MAX
guess = Math.round((lower + upper) / 2)
document.querySelector('#guess').textContent = guess
document.querySelector('#intro').style.display = 'none'
document.querySelector('#game').style.display = 'block'
}
const main = () => {
document.querySelector('#min').textContent = MIN
document.querySelector('#max').textContent = MAX
document.querySelector('#dif').textContent = Math.round(Math.log(MAX) / Math.log(2))
document.querySelector('#ok').addEventListener('click', startGame)
}
document.addEventListener('DOMContentLoaded', main)
Raw
step_03.js
const MIN = 1
const MAX = 1000
let guess, upper, lower
const startGame = () => {
lower = MIN
upper = MAX
guess = Math.round((lower + upper) / 2)
document.querySelector('#guess').textContent = guess
document.querySelector('#intro').style.display = 'none'
document.querySelector('#game').style.display = 'block'
}
const guessLower = () => {
upper = guess - 1
guess = Math.round((lower + upper) / 2)
document.querySelector('#guess').textContent = guess
}
const main = () => {
document.querySelector('#min').textContent = MIN
document.querySelector('#max').textContent = MAX
document.querySelector('#dif').textContent = Math.round(Math.log(MAX) / Math.log(2))
document.querySelector('#ok').addEventListener('click', startGame)
document.querySelector('#lower').addEventListener('click', guessLower)
}
document.addEventListener('DOMContentLoaded', main)
Raw
step_04.js
const MIN = 1
const MAX = 1000
let guess, upper, lower
const startGame = () => {
lower = MIN
upper = MAX
updateGame()
document.querySelector('#intro').style.display = 'none'
document.querySelector('#game').style.display = 'block'
}
const updateGame = () => {
guess = Math.round((lower + upper) / 2)
document.querySelector('#guess').textContent = guess
}
const guessLower = () => {
upper = guess - 1
updateGame()
}
const guessHigher = () => {
lower = guess + 1
updateGame()
}
const main = () => {
document.querySelector('#min').textContent = MIN
document.querySelector('#max').textContent = MAX
document.querySelector('#dif').textContent = Math.round(Math.log(MAX) / Math.log(2))
document.querySelector('#ok').addEventListener('click', startGame)
document.querySelector('#lower').addEventListener('click', guessLower)
document.querySelector('#higher').addEventListener('click', guessHigher)
}
document.addEventListener('DOMContentLoaded', main)
Raw
step_05.js
const MIN = 1
const MAX = 1000
let guess, upper, lower, tries
const startGame = () => {
lower = MIN
upper = MAX
tries = 0
updateGame()
document.querySelector('#intro').style.display = 'none'
document.querySelector('#game').style.display = 'block'
}
const updateGame = () => {
guess = Math.round((lower + upper) / 2)
document.querySelector('#guess').textContent = guess
tries++
}
const endGame = () => {
document.querySelector('#tries').textContent = tries
document.querySelector('#game').style.display = 'none'
document.querySelector('#victory').style.display = 'block'
}
const guessLower = () => {
upper = guess - 1
updateGame()
}
const guessHigher = () => {
lower = guess + 1
updateGame()
}
const main = () => {
document.querySelector('#min').textContent = MIN
document.querySelector('#max').textContent = MAX
document.querySelector('#dif').textContent = Math.round(Math.log(MAX) / Math.log(2))
document.querySelector('#ok').addEventListener('click', startGame)
document.querySelector('#lower').addEventListener('click', guessLower)
document.querySelector('#higher').addEventListener('click', guessHigher)
document.querySelector('#yes').addEventListener('click', endGame)
}
document.addEventListener('DOMContentLoaded', main)
Raw
step_06.js
// See guessing_game.js
Raw
styles.css
@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
body,
html {
height: 100%;
}
body {
font-family: 'Alegreya Sans', sans-serif;
font-size: 24pt;
background-color: #FEECA4;
color: #0FA6BE;
display: flex;
align-items: center;
justify-content: center;
}
span {
font-weight: bold;
color: #A00C75;
}
button {
font-family: 'Alegreya Sans', sans-serif;
font-size: 1em;
border: none;
background-color: #A00C75;
color: #D3E318;
}
button:hover {
background-color: #352549;
}
button:active {
background-color: #352549;
color: #A00C75;
}
button:focus {
outline: 0;
}
#game {
display: none;
}
#victory {
display: none;
}
#game, #victory, #intro {
width: 18em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment