-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4797 from somilyadav7/main
Added Word Sprint Game
- Loading branch information
Showing
8 changed files
with
859 additions
and
1 deletion.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # **Word Sprint** | ||
|
|
||
| --- | ||
|
|
||
| <br> | ||
|
|
||
| ## **Description 📃** | ||
| <!-- add your game description here --> | ||
| Word Sprint is an exciting and fast-paced game designed to test and improve your typing speed and accuracy. In this game, you are presented with a list of words that you must type correctly before the timer runs out. The goal is to type all the words as quickly as possible to score the highest points. | ||
| </p> | ||
|
|
||
| ## **functionalities 🎮** | ||
| <!-- add functionalities over here --> | ||
| - Type the Words: A list of words appears on the screen. You must type each word correctly before moving on to the next. | ||
| - Beat the Timer: The challenge is to type all the words before the timer for each word hits zero. | ||
| - Score Points: Your score is based on how quickly and accurately you can type the words. Each correct word typed before the timer runs out adds to your score. | ||
| <br> | ||
|
|
||
| ## **How to play? 🕹️** | ||
| - Open the index.html file | ||
| - Start typing the words before timer hits zero | ||
| - If timer Hits zero you will loose | ||
| - Type word as fast as you can to score points | ||
|
|
||
| <br> | ||
|
|
||
| ## **Screenshots 📸** | ||
|
|
||
| ### Home | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ### Game | ||
|
|
||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <html> | ||
| <head> | ||
| <link rel="icon" href="6.png"> | ||
| <title>Word Sprint</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link href="https://fonts.googleapis.com/css?family=Paytone+One|Montserrat" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="left"> | ||
| <div id="timeLeft"> | ||
| <p id="counthead">Countdown</p> | ||
| <p id="secs">4</p> | ||
| </div> | ||
| <div id="wordlist"> | ||
| <div id="arrow"></div> | ||
| <div id="scrollingwords"> | ||
| <ul style="list-style: none;"> | ||
|
|
||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div id="center"> | ||
| <div id="circular"> | ||
| <div class="quaters movers" id="q1"></div> | ||
| <div class="quaters movers" id="q2"></div> | ||
| <div class="quaters movers" id="q3"></div> | ||
| <div class="quaters movers" id="q4"></div> | ||
| <div class="bouncy"></div> | ||
| <p id="word"></p> | ||
| </div> | ||
| <div id="inputCover"> | ||
| <input id="input" type="text" placeholder="Type the text above to begin..." spellcheck="false" /> | ||
| </div> | ||
| <div id="message"> | ||
| Level-0 | ||
| </div> | ||
| </div> | ||
| <div id="stats"> | ||
| <div style="display:flex;"> | ||
| <div id="current"> | ||
| <p id="scorehead">Score</p> | ||
| <p id="score">0</p> | ||
| </div> | ||
| <div id="high"> | ||
| <p id="highhead">Your High Score</p> | ||
| <p id="highscore">0</p> | ||
| </div> | ||
| </div> | ||
| <div id="graph"> | ||
| <canvas id="wpmchart" width="100%" height="100%"></canvas> | ||
| </div> | ||
| </div> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,274 @@ | ||
| var words =[ | ||
| [ | ||
| "next", | ||
| "short", | ||
| "nice", | ||
| "bottle", | ||
| "full", | ||
| "soda", | ||
| "vast", | ||
| "glue", | ||
| "close", | ||
| "hurry", | ||
| "robin", | ||
| "trace", | ||
| "rock", | ||
| "absent", | ||
| "cover", | ||
| "note", | ||
| "burst", | ||
| "relax", | ||
| "group", | ||
| "sad", | ||
| "rob", | ||
| "yell", | ||
| "pop", | ||
| "mix", | ||
| "fix", | ||
| "hot", | ||
| "pin", | ||
| "hill", | ||
| "wiry", | ||
| "dirt", | ||
| ], | ||
| [ | ||
| "paddle", | ||
| "answer", | ||
| "awesome", | ||
| "distance", | ||
| "fertile", | ||
| "wakeful", | ||
| "belief", | ||
| "slippery", | ||
| "bizarre", | ||
| "learned", | ||
| "vivacious", | ||
| "grandmother", | ||
| "illegal", | ||
| "thirsty", | ||
| "wholesale", | ||
| "tenuous", | ||
| "skillful", | ||
| "deteriorate", | ||
| "poised", | ||
| "humorous", | ||
| "scrape", | ||
| "replace", | ||
| "languid", | ||
| "adjoining", | ||
| "interesting", | ||
| "stranger", | ||
| "polite", | ||
| "scissors", | ||
| "brainy", | ||
| "interrogation", | ||
| ], | ||
| [ | ||
| "return;", | ||
| "#include", | ||
| "'helloworld'", | ||
| "obj:1", | ||
| "call()", | ||
| "<html>", | ||
| "not_easy", | ||
| "more-dashes", | ||
| "camelCase", | ||
| "ASCII", | ||
| "array[]", | ||
| "printf('')", | ||
| "</html>", | ||
| "^regex$", | ||
| "System.out.println()", | ||
| ], | ||
| [ | ||
|
|
||
|
|
||
| ], | ||
| ] | ||
|
|
||
| var pointer = 0; | ||
| var level = 0; | ||
| var current = words[level][pointer]; | ||
| var input = document.getElementById("input"); | ||
| var box = document.getElementById("scrollingwords"); | ||
| var orignamOffset = 133; | ||
| var offset = 133; | ||
| var nextOffset = 31; | ||
| var red = 0, green = 255, blue = 0; | ||
| var rotationOffset = -90; | ||
| var colorAddition = 25.5; | ||
| var rotationAddition = 9; | ||
| var countdown = 4; | ||
| var quaters = document.querySelectorAll('.quaters'); | ||
| var score = 0; | ||
| var highscore = 0; | ||
|
|
||
| window.onload = function() { | ||
| var final = ""; | ||
| for(var i = 0; i < words[level].length; i++) { | ||
| final += "<li>" + words[level][i] + "</li>"; | ||
| } | ||
| document.getElementsByClassName("bouncy")[0].classList.add("bouncyIntro"); | ||
| document.getElementById("q1").classList.add("q1c"); | ||
| document.getElementById("q2").classList.add("q2c"); | ||
| document.getElementById("q3").classList.add("q3c"); | ||
| document.getElementById("q4").classList.add("q4c"); | ||
| document.getElementsByTagName("ul")[0].innerHTML = final; | ||
| document.getElementById("word").innerHTML = current; | ||
| var currentScroll = document.getElementsByTagName("li")[pointer]; | ||
| currentScroll.style.fontSize = "19pt"; | ||
| currentScroll.style.fontWeight = "bold"; | ||
| currentScroll.style.color = "rgba(255, 255, 255, 0.7)"; | ||
| } | ||
|
|
||
| input.onfocus = function() { | ||
| input.placeholder = ""; | ||
| } | ||
|
|
||
| input.onblur = function() { | ||
| input.placeholder = "Type the text above to begin..."; | ||
| } | ||
|
|
||
| function setColors() { | ||
| if (green === 255 && red < 255 && blue === 0) { | ||
| red += colorAddition; | ||
| rotationOffset += rotationAddition; | ||
| for (var i = 1; i < 4; i++) { | ||
| document.getElementsByClassName('movers')[i].style.transform = "rotate(" + rotationOffset.toString() + "deg)"; | ||
| } | ||
| } | ||
| else if (green > 0 && red === 255 && blue === 0) { | ||
| green -= colorAddition; | ||
| rotationOffset += rotationAddition; | ||
| for (var i = 2; i < 4; i++) { | ||
| document.getElementsByClassName('movers')[i].style.transform = "rotate(" + rotationOffset.toString() + "deg)"; | ||
| } | ||
| } | ||
| else if (green === 0 && red === 255 && blue < 255) { | ||
| blue += colorAddition; | ||
| rotationOffset += rotationAddition; | ||
| for (var i = 3; i < 4; i++) { | ||
| document.getElementsByClassName('movers')[i].style.transform = "rotate(" + rotationOffset.toString() + "deg)"; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function changeLevel(newLevel) { | ||
| input.value = ""; | ||
| document.getElementById("q1").classList.add("q1c"); | ||
| document.getElementById("q2").classList.add("q2c"); | ||
| document.getElementById("q3").classList.add("q3c"); | ||
| document.getElementById("q4").classList.add("q4c"); | ||
| red = blue = 0; | ||
| green = 255; | ||
| rotationOffset = -90; | ||
| quaters.forEach(quater => { | ||
| var c = "rgb(" + red.toString() + "," + green.toString() + "," + blue.toString() + ")"; | ||
| quater.style.borderLeftColor = c; | ||
| quater.style.borderTopColor = c; | ||
| quater.style.transform = "rotate(" + rotationOffset.toString() + "deg)"; | ||
| }) | ||
| level = newLevel; | ||
| pointer = 0; | ||
| current = words[level][pointer]; | ||
| var final = ""; | ||
| for(var i = 0; i < words[level].length; i++) { | ||
| final += "<li>" + words[level][i] + "</li>"; | ||
| } | ||
| document.getElementsByTagName("ul")[0].innerHTML = final; | ||
| document.getElementById("word").innerHTML = current; | ||
| offset = orignamOffset; | ||
| var currentScroll = document.getElementsByTagName("li")[pointer]; | ||
| currentScroll.style.fontSize = "19pt"; | ||
| currentScroll.style.fontWeight = "bold"; | ||
| currentScroll.style.color = "rgba(255, 255, 255, 0.7)"; | ||
| var setLevel = level===2?"Coding":level; | ||
| document.getElementById("message").innerHTML = "Level-" + level.toString(); | ||
| box.style.marginTop = offset.toString() + "px"; | ||
| } | ||
|
|
||
| function setScore() { | ||
| score += countdown; | ||
| document.getElementById("score").innerHTML = score.toString(); | ||
| } | ||
|
|
||
| function setHighScore() { | ||
| if (score > highscore) { | ||
| highscore = score; | ||
| document.getElementById("highscore").innerHTML = highscore.toString(); | ||
| } | ||
| score = 0; | ||
| document.getElementById("score").innerHTML = score.toString(); | ||
| } | ||
|
|
||
| function decodeHtml(html) { | ||
| var textArea = document.createElement("textarea"); | ||
| textArea.innerHTML = html; | ||
| return textArea.value; | ||
| } | ||
|
|
||
| input.oninput = function() { | ||
| if (level === 0 && pointer === 0 && input.value.length === 1) { | ||
| var timed = setInterval(clockHandler, 1000); | ||
| function clockHandler() { | ||
| if (countdown > 0) { | ||
| countdown--; | ||
| if (countdown === 0) { | ||
| document.getElementById("message").innerHTML = "Game Over"; | ||
| input.blur(); | ||
| input.value = ""; | ||
| setTimeout(() => { | ||
| clearInterval(timed); | ||
| changeLevel(0); | ||
| countdown = 4; | ||
| setHighScore(); | ||
| document.getElementById("secs").innerHTML = countdown; | ||
| }, 1000); | ||
| } | ||
| } | ||
| document.getElementById("secs").innerHTML = countdown; | ||
| } | ||
| } | ||
| document.getElementsByClassName("bouncy")[0].classList.remove("bouncyIntro"); | ||
| document.getElementsByClassName("bouncy")[0].style.opacity = "1"; | ||
| document.getElementById("q1").classList.remove("q1c"); | ||
| document.getElementById("q2").classList.remove("q2c"); | ||
| document.getElementById("q3").classList.remove("q3c"); | ||
| document.getElementById("q4").classList.remove("q4c"); | ||
| document.getElementsByClassName("bouncy")[0].classList.remove("bounce"); | ||
| if (input.value === decodeHtml(words[level][pointer])) { | ||
| setColors(); | ||
| setScore(); | ||
| if (level === 0 && pointer >=19 && pointer != 29) | ||
| countdown = 3; | ||
| else | ||
| countdown = 4; | ||
| document.getElementById("secs").innerHTML = countdown; | ||
| if (blue === 255) { | ||
| var n = level + 1; | ||
| changeLevel(n); | ||
| } | ||
| else { | ||
| pointer += 1; | ||
| current = words[level][pointer]; | ||
| document.getElementById("word").innerHTML = current; | ||
| var currentScroll = document.getElementsByTagName("li")[pointer-1]; | ||
| currentScroll.style.fontSize = "13pt"; | ||
| currentScroll.style.fontWeight = ""; | ||
| currentScroll.style.color = "rgba(255, 255, 255, 0.2)"; | ||
| currentScroll = document.getElementsByTagName("li")[pointer]; | ||
| currentScroll.style.fontSize = "19pt"; | ||
| currentScroll.style.fontWeight = "bold"; | ||
| currentScroll.style.color = "rgba(255, 255, 255, 0.7)"; | ||
| document.getElementsByClassName("bouncy")[0].classList.add("bounce"); | ||
| offset = offset - nextOffset; | ||
| quaters.forEach(quater => { | ||
| var c = "rgb(" + red.toString() + "," + green.toString() + "," + blue.toString() + ")"; | ||
| quater.style.borderLeftColor = c; | ||
| quater.style.borderTopColor = c; | ||
| }) | ||
| box.style.marginTop = offset.toString() + "px"; | ||
| input.value = ""; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.