Color Name Game
How do I make an color name game?
The color names are sourced from the xkcd color survey, specifically this compilation by Charles Reid.. What is a color name game? How do you make a color name game? This script and codes were developed by Khalkeus on 11 November 2022, Friday.
Color Name Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Name Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class = "modal" id = "lost"> <div class = "modal-content"> <div><br>Awww you lost...</div> <button class = "button" id="restart">Play again?</button> </div> </div> <h1 id = "level">0</h1> <div class = "swatch" id = "swatch"></div> <div class = "holder"> <button class = "button" id = "left" onclick="left()"></button> <button class = "button" id = "right" onclick="right()"></button> <div style="text-align: justified; width: 30%; margin: 0 auto;">Use your arrow keys or the buttons to select the correct color name.</div> </div> <script src="js/index.js"></script>
</body>
</html>
Color Name Game - Script Codes CSS Codes
body, html{ width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; font-family: courier; font-size: 12px; color: #333322; font-weight: bold;
}
canvas{ width: 100%; height: 100%;
}
.swatch{ width: 30%; height: 30%; border-style: solid; border-right: 5px solid; border-bottom: 8px solid; border-radius: 10px; border-color: #333322; background-color: white; margin: 0 auto; margin-top: 2%;
}
.holder{ text-align: center;
}
.button{ margin: 2%; margin-top: 2%; display:inline-block; height: 50px; width: 20%; background-color: white; border: 2px solid; border-right: 4px solid; border-bottom: 5px solid; border-color: #333322; border-radius: 10px; font-family: courier; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #333322;
}
.button:hover{ cursor: pointer; color: white; background-color: #333322; border-color: white;
}
.button:active{ cursor: grabbing; height: 48px;
}
h1{ text-align: center; margin-top: 3%; font-size: 20px;
}
.modal{ display: none; position: fixed; z-index: 10; width: 100%; height: 100%; left: 0; top: 0; overflow: auto;
}
.modal-content{ background-color: white; color: #333322; box-shadow: 10px 20px 5px #333322; border-radius: 10px; margin: 0 auto; margin-top: 10%; width: 50%; height: 120px; text-align: center;
}
Color Name Game - Script Codes JS Codes
var game;
function randomFromArray(arr){ return arr[Math.floor(Math.random() * arr.length)];
}
function getColorComp(c) { return [parseInt(c.slice(1, 3), 16), parseInt(c.slice(3, 5), 16), parseInt(c.slice(5, 7), 16)];
}
function getColorDist(c1, c2) { c1 = getColorComp(c1); c2 = getColorComp(c2); return Math.sqrt((c1[0] - c2[0])*(c1[0] - c2[0]) + (c1[1] - c2[1])*(c1[1] - c2[1]) + (c1[2] - c2[2])*(c1[2] - c2[2]));
}
function Game(colorDict, swatch, levelDiv, button1, button2, losePopup){ this.level; this.currentColor; this.colorDict = colorDict; this.offColor; this.buttons = [button1, button2]; this.swatch = swatch; this.levelDiv = levelDiv; this.losePopup = losePopup; this.lost = false; this.init = function(){ this.lost = false; this.level = 0; this.newColor(); } this.newColor = function(){ this.level++; this.currentColor = randomFromArray(Object.keys(this.colorDict)); this.offColor = randomFromArray(Object.keys(this.colorDict)); for(var i = 0; i < this.level; i++){ var newColor = randomFromArray(Object.keys(this.colorDict)); if(getColorDist(this.colorDict[this.currentColor], this.colorDict[this.offColor]) > getColorDist(this.colorDict[this.currentColor], this.colorDict[newColor]) && newColor != this.currentColor){ this.offColor = newColor; } } this.levelDiv.innerHTML = this.level; while(this.currentColor == this.offColor){ this.offColor = randomFromArray(Object.keys(this.colorDict)); } this.swatch.style.backgroundColor = this.colorDict[this.currentColor]; if(Math.random() < .5){ this.buttons[0].innerHTML = this.currentColor; this.buttons[1].innerHTML = this.offColor; }else{ this.buttons[1].innerHTML = this.currentColor; this.buttons[0].innerHTML = this.offColor; } } this.init(); this.chose = function(buttonNum){ if(this.currentColor == this.buttons[buttonNum].innerHTML){ this.newColor(); }else{ this.lose(); } } this.lose = function(){ this.lost = true; this.losePopup.style.display = "block"; }
}
function right(){ if(game != undefined){ game.chose(1) }
}
function left(){ if(game != undefined){ game.chose(0) }
}
function restart() { if(game != undefined && game.losePopup.style.display === "block"){ document.getElementById("lost").style.display = "none"; game.init(); }
}
document.getElementById("restart").onclick = function () { restart();
}
window.onkeydown = function(e){ if(e.keyCode === 37 && !game.lost){ left(); }else if(e.keyCode === 39 && !game.lost){ right(); }else{ restart(); }
}
window.onload = function () { var currentLevel = 0; var colorsDict; game; fetch("https://raw.githubusercontent.com/charlesreid1/xkcd-colors/master/xkcd-colors.json") .then(res => res.json()) .then((out) => { colorsDict = out; game = new Game(colorsDict, document.getElementById("swatch"), document.getElementById("level"), document.getElementById("left"), document.getElementById("right"), document.getElementById("lost")); }) .catch(err => console.error(err));
}
Developer | Khalkeus |
Username | khalkeus |
Uploaded | November 11, 2022 |
Rating | 3.5 |
Size | 3,245 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Random walkers | 2,512 Kb |
Css loaders ii | 2,294 Kb |
Warpspeed | 2,409 Kb |
Planet Generator | 2,984 Kb |
Fish pond | 3,799 Kb |
Flowers | 2,588 Kb |
Particle fire | 3,152 Kb |
Capybaras | 2,775 Kb |
Soft | 2,727 Kb |
Live pixel sorting | 2,314 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Resize image | Happyhj | 1,892 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Out of the blue | Giaco | 2,537 Kb |
Algorithm practice | Abensur | 5,620 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!