Skip to content

Instantly share code, notes, and snippets.

@gaearon
Created January 15, 2022 03:26
Embed
What would you like to do?
tiny worldle clone i built during a stream https://www.youtube.com/watch?v=K77xThbu66A
<h1>Wordle</h1>
<div id="grid"></div>
<style>
body, html {
background: #111;
color: white;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
}
h1 {
font-size: 42px
}
.cell {
width: 60px;
height: 60px;
line-height: 60px;
border: 1px solid #aaa;
display: inline-block;
margin: 10px;
font-size: 40px;
font-weight: bold;
}
</style>
<script src="index.js"></script>
'use strict'
let wordList = [
'patio',
'darts',
'piano',
'horse',
'hello',
'water',
'pizza',
'sushi',
'crabs'
];
let randomIndex = Math.floor(Math.random() * wordList.length)
let secret = wordList[randomIndex]
let currentAttempt = ''
let history = []
let grid = document.getElementById('grid')
buildGrid()
updateGrid()
window.addEventListener('keydown', handleKeyDown)
function handleKeyDown(e) {
let letter = e.key.toLowerCase()
if (letter === 'enter') {
if (currentAttempt.length < 5) {
return
}
if (!wordList.includes(currentAttempt)) {
alert('Not in my thesaurus')
return
}
history.push(currentAttempt)
currentAttempt = ''
} else if (letter === 'backspace') {
currentAttempt = currentAttempt.slice(0, currentAttempt.length - 1)
} else if (/[a-z]/.test(letter)) {
if (currentAttempt.length < 5) {
currentAttempt += letter
}
}
updateGrid()
}
function buildGrid() {
for (let i = 0; i < 6; i++) {
let row = document.createElement('div')
for (let j = 0; j < 5; j++) {
let cell = document.createElement('div')
cell.className = 'cell'
cell.textContent = ''
row.appendChild(cell)
}
grid.appendChild(row)
}
}
function updateGrid() {
let row = grid.firstChild
for (let attempt of history) {
drawAttempt(row, attempt, false)
row = row.nextSibling
}
drawAttempt(row, currentAttempt, true)
}
function drawAttempt(row, attempt, isCurrent) {
for (let i = 0; i < 5; i++) {
let cell = row.children[i]
if (attempt[i] !== undefined) {
cell.textContent = attempt[i]
} else {
// lol
cell.innerHTML = '<div style="opacity: 0">X</div>'
}
if (isCurrent) {
cell.style.backgroundColor = '#111'
} else {
cell.style.backgroundColor = getBgColor(attempt, i)
}
}
}
function getBgColor(attempt, i) {
let correctLetter = secret[i]
let attemptLetter = attempt[i]
if (
attemptLetter === undefined ||
secret.indexOf(attemptLetter) === -1
) {
return '#212121'
}
if (correctLetter === attemptLetter) {
return '#538d4e'
}
return '#b59f3b'
}

some of these are completed, others are up to you

  • you provide five char guesses
  • each guess must be a word
  • when you press enter,
    • board
      • you see the status of your last guess
        • letters that are in wrong places are yellow
        • missing letters are grey
        • correct guesses + positions are green
        • shake the active row on word we don't know
    • keyboard
      • reflects same data
      • third row is enter [...] backspace
      • you can still input by typing
      • when you press enter, each letter animates into rotating from black to grey one
    • you only see past + active attempt
    • if you make too many attempts you probably die
    • initial visual state
      • all rows are empty
      • as i fill out my guess, background is black
      • filled out cells have slight border highight
@FabianoLothor
Copy link

@DragonRydrz indeed.

Thanks for the feedback.

Actually I wasn't trying to achieve the same behaviors and visual of Wordle.

I did things to achieve my needs, my thought was that this could increase difficulty to the game and avoid misspelled words.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment