tie keyboard into game
This commit is contained in:
parent
356edb2024
commit
1b075f299d
GPG Key ID:
20609519444A1269
31
game.js
31
game.js
@ -7,13 +7,16 @@ const word = wordlist[Math.floor(Math.random()*wordlist.length)];
|
||||
var gameCompleted = null
|
||||
|
||||
// HTML items
|
||||
const gameContainer = document.getElementById("game_container")
|
||||
const body = document.getElementsByTagName("body")[0]
|
||||
const endScreen = document.getElementById("end_screen")
|
||||
const endScreenGuesses = document.getElementById("end_screen_guesses")
|
||||
const endScreenMessage = document.getElementById("end_screen_message")
|
||||
const endScreenTime = document.getElementById("end_screen_time")
|
||||
const gameContainer = document.getElementById("game_container")
|
||||
const gridItems = []
|
||||
const kbLetters = Array.from(document.getElementsByClassName("kb_letter")).filter(kbl => kbl.id === '')
|
||||
const kbEnter = document.getElementById("kb_enter")
|
||||
const kbBackspace = document.getElementById("kb_backspace")
|
||||
|
||||
// helper functions
|
||||
const gridItemId = (row, column) => "grid_item_" + row + "_" + column
|
||||
@ -168,17 +171,33 @@ function endGame(won) {
|
||||
endScreenMessage.innerHTML = "damn. better luck nex time"
|
||||
}
|
||||
|
||||
endScreenGuesses.innerHTML = `guesses: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
|
||||
endScreenGuesses.innerHTML = `guesses used: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
|
||||
endScreen.style.display = "";
|
||||
}
|
||||
|
||||
|
||||
function runClickAnimation(el) {
|
||||
console.log(el)
|
||||
el.classList.add("clicked")
|
||||
setTimeout(() => el.classList.remove("clicked"), 500)
|
||||
}
|
||||
// create event listeners
|
||||
document.addEventListener('keyup', (e) => {
|
||||
console.log(e)
|
||||
setNextLetter(e)
|
||||
document.addEventListener('keyup', e => setNextLetter(e))
|
||||
kbBackspace.addEventListener('click', () => {
|
||||
runClickAnimation(kbBackspace)
|
||||
setNextLetter({code: "Backspace", key: "Backspace"})
|
||||
})
|
||||
kbEnter.addEventListener('click', () => {
|
||||
runClickAnimation(kbEnter)
|
||||
setNextLetter({code: "Enter", key: "Enter"})
|
||||
})
|
||||
kbLetters.forEach(kbl => {
|
||||
kbl.addEventListener('click', () => {
|
||||
runClickAnimation(kbl)
|
||||
setNextLetter({code: kbl.innerHTML, key: kbl.innerHTML })
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// start game
|
||||
init()
|
||||
console.log(word)
|
||||
11
index.html
11
index.html
@ -7,7 +7,7 @@
|
||||
<title>words by alv</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>words by alv</h1>
|
||||
<h1 style="text-align: center">words by alv</h1>
|
||||
|
||||
<div id="game_container">
|
||||
</div>
|
||||
@ -42,7 +42,7 @@
|
||||
<p class="kb_letter">l</p>
|
||||
</div>
|
||||
<div class="kb_row" id="kb_row3">
|
||||
<p class="kb_letter"><i class="fas fa-sign-in-alt"></i></p>
|
||||
<p class="kb_letter" id="kb_enter"><i class="fas fa-sign-in-alt"></i></p>
|
||||
<p class="kb_letter">z</p>
|
||||
<p class="kb_letter">x</p>
|
||||
<p class="kb_letter">c</p>
|
||||
@ -50,12 +50,13 @@
|
||||
<p class="kb_letter">b</p>
|
||||
<p class="kb_letter">n</p>
|
||||
<p class="kb_letter">m</p>
|
||||
<p class="kb_letter"><i class="fas fa-backspace"></i></p>
|
||||
<p class="kb_letter" id="kb_backspace"><i class="fas fa-backspace"></i></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<p>built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p>
|
||||
<p>thanks to Lancaster University for the wordlist and you can find it <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a></p>
|
||||
<p>thanks to Lancaster University for the wordlist, which you can find <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a> </p>
|
||||
</div>
|
||||
|
||||
<script type="application/javascript" src="wordlist.js"></script>
|
||||
<script type="application/javascript" src="game.js"></script>
|
||||
|
||||
49
styles.css
49
styles.css
@ -15,6 +15,11 @@
|
||||
--brown: #a16946;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#game_container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -26,19 +31,23 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#footer { margin-top: 4em; }
|
||||
|
||||
.grid_row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.grid_item {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
width: 8vw;
|
||||
max-width: 3em;
|
||||
height: 8vw;
|
||||
max-height: 3em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 0.2em solid var(--default-fg);
|
||||
margin: 1em;
|
||||
margin: 3vw;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
transition: 0.5s;
|
||||
@ -61,6 +70,10 @@
|
||||
animation: incorrect 0.5s;
|
||||
}
|
||||
|
||||
.clicked {
|
||||
animation: clicked 0.5s;
|
||||
}
|
||||
|
||||
@keyframes correct {
|
||||
0% {
|
||||
background: var(--default-bg);
|
||||
@ -85,6 +98,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clicked {
|
||||
0% {
|
||||
background: var(--default-bg);
|
||||
}
|
||||
50% {
|
||||
background: var(--dark-bg);
|
||||
}
|
||||
100% {
|
||||
background: var(--default-bg);
|
||||
}
|
||||
}
|
||||
|
||||
#end_screen {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
@ -102,18 +127,28 @@
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#keyboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kb_row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.kb_row * {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
width: min(10vw, 3em);
|
||||
height: min(10vw, 3em);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kb_row .kb_filler {
|
||||
width: 1.5em;
|
||||
.kb_filler {
|
||||
width: min(5vw, 1.5em);
|
||||
}
|
||||
|
||||
.kb_letter {
|
||||
line-height: min(10vw, 3em)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user