Created
September 14, 2020 08:26
-
-
Save joshron/ed574d28c6db14719c304198c51a8d3f to your computer and use it in GitHub Desktop.
Typing game canvas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <h1>Canvas Testing</h1> | |
| </header> | |
| <canvas id="test-canvas" width="400px" height="200px"></canvas> | |
| <div id="display"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var yval = 0; | |
| var currentIndex = 0; | |
| var typedWord = ""; | |
| var someWord = "CHEESE"; | |
| var wordArray = [ | |
| "ALPHA", | |
| "BRAVO", | |
| "CHARLIE", | |
| "DELTA", | |
| "ECHO", | |
| "FOXTROT", | |
| "GOLF", | |
| "HOTEL", | |
| "INDIA", | |
| "JULIET", | |
| "KILO", | |
| "LIMA", | |
| "MIKE", | |
| "NOVEMBER", | |
| "OSCAR", | |
| "PAPA", | |
| "QUEBEC", | |
| "ROMEO", | |
| "SIERRA", | |
| "TANGO", | |
| "UNIFORM", | |
| "VICTOR", | |
| "WHISKEY", | |
| "XRAY", | |
| "YANKEE", | |
| "ZULU" | |
| ]; | |
| function randomNumberGenerator() { | |
| const number = Math.floor(Math.random() * wordArray.length); | |
| return number; | |
| } | |
| var randomIndexNumber = randomNumberGenerator(); | |
| window.onload = (event) => { | |
| const displayArea = document.getElementById("display"); | |
| document.addEventListener("keydown", checkKey); | |
| function checkKey(event) { | |
| displayArea.innerHtml = ""; | |
| if (event.keyCode >= 65 && event.keyCode <= 90) { | |
| let key = event.code; | |
| key = key[3]; | |
| displayArea.innerText = key; | |
| } else { | |
| displayArea.innerText = ":("; | |
| } | |
| } | |
| function animation() { | |
| window.requestAnimationFrame(draw); | |
| } | |
| function draw() { | |
| const currentLetter = displayArea.innerText; | |
| const ctx = document.getElementById("test-canvas").getContext("2d"); | |
| let position = 200; | |
| ctx.clearRect(0, 0, 400, 200); | |
| ctx.font = "50px sans-serif"; | |
| ctx.fillStyle = "white"; | |
| ctx.fillText(wordArray[randomIndexNumber], position, yval); | |
| ctx.textAlign = "center"; | |
| const metrics = ctx.measureText(typedWord); | |
| const width = metrics.width; | |
| const height = metrics.height; | |
| ctx.fillStyle = "black"; | |
| ctx.fillRect(position, yval - 50, width, 200); | |
| ctx.font = "50px sans-serif"; | |
| ctx.fillStyle = "red"; | |
| ctx.fillText(typedWord, position, yval); | |
| ctx.textAlign = "center;"; | |
| if (currentLetter === wordArray[randomIndexNumber][currentIndex]) { | |
| typedWord = typedWord + wordArray[randomIndexNumber][currentIndex]; | |
| currentIndex++; | |
| displayArea.innerHTML = ""; | |
| } | |
| yval = yval + 0.5; | |
| if (currentIndex === wordArray[randomIndexNumber].length || yval > 250) { | |
| randomIndexNumber = randomNumberGenerator(); | |
| typedWord = ""; | |
| currentIndex = 0; | |
| yval = 0; | |
| } | |
| window.requestAnimationFrame(draw); | |
| } | |
| animation(); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background-color: lightcoral; | |
| text-align: center; | |
| font-family: sans-serif; | |
| } | |
| header { | |
| background-color: white; | |
| width: fit-content; | |
| margin: 1rem auto; | |
| padding: 0.5rem; | |
| } | |
| #test-canvas { | |
| background-color: black; | |
| margin-bottom: 1rem; | |
| border: 1rem solid white; | |
| } | |
| #display { | |
| width: 40px; | |
| height: 30px; | |
| background-color: white; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment