Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wordtyping-game #37

Merged
merged 2 commits into from
Oct 13, 2022
Merged

Wordtyping-game #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
feca088
Add files via upload
meetkool Oct 12, 2022
693dc21
Add files via upload
meetkool Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions wordtyping-game/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Wordtyping-game

Word typing game made using HTML & CSS

Type each word in the given amount of seconds to score. To play again, just type the current word. Your score will reset
http://meetssh.ml/wordtyping-game


![image](https://user-images.githubusercontent.com/96396841/195467247-95a851cf-722a-464d-a9cd-36957fa985e2.png)

## Use

Run index.html in a browser

Try it - [WordBeater Game]()
69 changes: 69 additions & 0 deletions wordtyping-game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wordtyping-game</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body class="bg-dark text-white ">
<header class="bg-secondary text-center p-3 mb-5">
<h1>wordtyping-game</h1>
</header>
<div class="container text-center">

<!-- Word & Input -->
<div class="row">
<div class="col-md-6 mx-auto">
<p class="lead">Type The Given Word Within
<span class="text-success" id="seconds">5</span> Seconds:</p>
<h2 class="display-2 mb-5" id="current-word">hello</h2>
<input type="text" class="form-control form-control-lg" placeholder="Start typing..." id="word-input" autofocus>
<h4 class="mt-3" id="message"></h4>

<!-- Time & Score Columns -->
<div class="row mt-5">
<div class="col-md-6">
<h3>Time Left:
<span id="time">0</span>
</h3>
</div>
<div class="col-md-6">
<h3>Score:
<span id="score">0</span>
</h3>
</div>
<br><br>
<div class="col">
<h3>High Score:
<span id="highscore">0</span>
</h3>
</div>
</div>

<!-- Instructions -->
<div class="row mt-5">
<div class="col-md-12">
<div class="card card-body bg-secondary text-white">
<h5>Instructions</h5>
<p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your
score
will reset</p>
<p>
nardcart
</p>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="js/main.js"></script>
</body>

</html>
164 changes: 164 additions & 0 deletions wordtyping-game/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
window.addEventListener('load', init);

function load_more_words()
{
var xmlhttp;
if (window.XMLHttpRequest)
{

xmlhttp=new XMLHttpRequest();
}
else
{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
words=xmlhttp.responseText.split("\n");
}
}
xmlhttp.open("GET","words.txt",true);
xmlhttp.send();
}

// Globals

// Available Levels
const levels = {
easy: 5,
medium: 3,
hard: 1
};

// To change level
const currentLevel = levels.medium;

let time = currentLevel;
let score = 0;
let isPlaying;

// DOM Elements
const wordInput = document.querySelector('#word-input');
const currentWord = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');
const highscoreDisplay = document.querySelector('#highscore');

var words = [
'hat',
'river',
'lucky',
'statue',
'generate',
'stubborn',
'cocktail',
'runaway',
'joke',
'developer',
'establishment',
'hero',
'javascript',
'nutrition',
'revolver',
'echo',
'siblings',
'investigate',
'horrendous',
'symptom',
'laughter',
'magic',
'master',
'space',
'definition',
'champion',
'ghost',
'fierce'
];

// Initialize Game
function init() {
// Show number of seconds in UI
seconds.innerHTML = currentLevel;
// Load word from array
showWord(words);
// Start matching on word input
wordInput.addEventListener('input', startMatch);
// Call countdown every second
setInterval(countdown, 1000);
// Check game status
setInterval(checkStatus, 50);
// Fetch more words
setTimeout(load_more_words(),1000)
}


function startMatch() {
if (matchWords()) {
isPlaying = true;
time = currentLevel + 1;
showWord(words);
wordInput.value = '';
score++;
}


if (typeof sessionStorage['highscore'] === 'undefined' || score > sessionStorage['highscore']) {
sessionStorage['highscore'] = score;
} else {
sessionStorage['highscore'] = sessionStorage['highscore'];
}


if (sessionStorage['highscore'] >= 0) {
highscoreDisplay.innerHTML = sessionStorage['highscore'];
}


if (score === -1) {
scoreDisplay.innerHTML = 0;
} else {
scoreDisplay.innerHTML = score;
}
}


function matchWords() {
if (wordInput.value === currentWord.innerHTML) {
message.innerHTML = 'Correct!!!';
return true;
} else {
message.innerHTML = '';
return false;
}
}


function showWord(words) {

const randIndex = Math.floor(Math.random() * words.length);

currentWord.innerHTML = words[randIndex];
}


function countdown() {
if (time > 0) {

time--;
} else if (time === 0) {
isPlaying = false;
}
timeDisplay.innerHTML = time;
}

function checkStatus() {
if (!isPlaying && time === 0) {
message.innerHTML = 'Game Over!!!';
score = -1;
}
}
Loading