Skip to content

Instantly share code, notes, and snippets.

@JonnoFTW

JonnoFTW/index.html

Created December 21, 2022 00:33
Show Gist options
  • Save JonnoFTW/4209dc8fe7b932f4e1e587d06dc64f44 to your computer and use it in GitHub Desktop.
Save JonnoFTW/4209dc8fe7b932f4e1e587d06dc64f44 to your computer and use it in GitHub Desktop.
Download ZIP
aigame
Raw
index.html
<html>
<head>
<title>AI vs Old Master</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: black;
color: white;
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<div style="display: flex; align-items: center; height: 100%; flex-direction: column; justify-content: flex-start;font-size: 2em">
<h1 style="text-align: center;">Can you guess if this is the work of an AI, or an old master?</h1>
<h2 id="progress"></h2>
<img src="" id="image" style="width: 66%; margin: auto;">
<div id="buttons" style="display: flex; justify-content: space-between;">
<button id="aiGuess" onclick="guess('ai')" style="width: 50%; font-size: 2em; margin: 20px;padding: 20px;">AI</button>
<button id="masterGuess" onclick="guess('master')" style="width: 50%; font-size: 2em; margin: 20px; padding: 20px;">Old Master</button>
</div>
<div id="result" style="margin: auto; font-size: 2em;"></div>
<button id="nextButton" onclick="next()" style="width: 37.5%; font-size: 2em; margin: 5px; margin-bottom: 50px; padding:20px">Next</button>
<script>
let imageName;
let imageIndex = -1;
let correct = 0
const nextButton = document.getElementById("nextButton")
const resultBox = document.getElementById("result")
const imageElement = document.getElementById("image");
function setButtons(disabled) {
['aiGuess', 'masterGuess'].forEach((x) => {
document.getElementById(x).disabled = disabled
})
}
function guess(who) {
const guessCorrect = imageName.startsWith(who)
resultBox.textContent = guessCorrect ? "Correct" : "Wrong";
if (guessCorrect) {
correct++;
}
nextButton.disabled = false
updateProgress()
setButtons(true)
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
function updateProgress() {
document.getElementById("progress").textContent = `${correct}/${imageNames.length} correct guesses`
}
function showEnd() {
imageElement.src = "";
['image', 'buttons', 'result', 'nextButton'].forEach((x) => {
document.getElementById(x).style.display = "none"
})
}
function next() {
imageIndex++;
if (imageIndex === imageNames.length) {
return showEnd()
}
imageName = imageNames[imageIndex];
imageElement.src = imageName;
updateProgress()
nextButton.disabled = true
resultBox.textContent = ""
setButtons(false)
}
const imageNames = [
"ai-image-1.png",
"ai-image-2.png",
"ai-image-3.png",
"ai-image-4.png",
"ai-image-5.png",
"ai-image-6.png",
"ai-image-7.png",
"ai-image-8.png",
"ai-image-9.png",
"ai-image-10.png",
"ai-image-11.png",
"ai-image-12.png",
"ai-image-13.png",
"ai-image-14.png",
"ai-image-15.png",
"ai-image-16.png",
"ai-image-17.png",
"ai-image-18.png",
"ai-image-19.png",
"ai-image-20.png",
"ai-image-21.png",
"ai-image-22.png",
"ai-image-23.png",
"ai-image-24.png",
"ai-image-25.png",
"ai-image-26.png",
"ai-image-27.png",
"ai-image-28.png",
"ai-image-29.png",
"ai-image-30.png",
"ai-image-31.png",
"ai-image-32.png",
"ai-image-33.png",
"ai-image-34.png",
"ai-image-35.png",
"ai-image-36.png",
"ai-image-37.png",
"ai-image-38.png",
"ai-image-39.png",
"ai-image-40.png",
"ai-image-41.png",
"ai-image-42.png",
"ai-image-43.png",
"ai-image-44.png",
"ai-image-45.png",
"ai-image-46.png",
"ai-image-47.png",
"ai-image-48.png",
"ai-image-49.png",
"master-image-1.jpg",
"master-image-2.jpg",
"master-image-3.jpg",
"master-image-4.jpg",
"master-image-5.jpg",
"master-image-6.jpg",
"master-image-7.jpg",
"master-image-9.jpg",
"master-image-10.jpg",
"master-image-11.jpg",
"master-image-12.jpg",
"master-image-13.jpg",
"master-image-14.jpg",
"master-image-15.jpg",
"master-image-16.jpg",
"master-image-17.jpg",
"master-image-18.jpg",
"master-image-19.jpg",
"master-image-20.jpg",
"master-image-21.jpg",
"master-image-22.jpg",
"master-image-23.jpg",
"master-image-24.jpg",
"master-image-25.jpg",
"master-image-26.jpg",
"master-image-27.jpg",
"master-image-29.jpg",
"master-image-30.jpg",
"master-image-31.jpg",
"master-image-32.jpg",
"master-image-33.jpg",
"master-image-34.jpg",
"master-image-35.jpg",
"master-image-36.jpg",
"master-image-37.jpg",
"master-image-38.jpg",
"master-image-39.jpg",
"master-image-40.jpg",
"master-image-41.jpg",
"master-image-42.jpg",
"master-image-43.jpg",
"master-image-44.jpg",
"master-image-45.jpg",
"master-image-46.jpg",
"master-image-47.jpg",
"master-image-48.jpg",
"master-image-49.jpg",
"master-image-50.jpg"];
shuffleArray(imageNames)
next()
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment