JS.Events.Forms.Game.v3

9/22/2018 - 7:46 AM

@import url('https://fonts.googleapis.com/css?family=Creepster');

body {
   /* font-family: 'Creepster', Monospace;
    background: rgba(0, 0, 0, 0.6);*/
    font-size: 18px;
    font-family: Verdana, Geneva, sans-serif;
}

h1{
	font-family: 'Creepster', cursive;
	font-size: 60px;
	color:black;
	text-align: center;
	text-shadow: 1px 1px 3px #FFFFFF;
}

/*.begining {
    height: 100%;
    background: url("../img/fondo.jpg")no-repeat center center fixed;
    max-width: 100%;
    background-size: 100% 100%;
}*/

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#bar {
  width: 1%;
  height: 20px;
  background-color: #4CAF50;
}

section{
	margin: 0 auto;
	height: 50%;
	width: 50%;
	border-radius: 16px;
	box-shadow: 8px 8px 13px #808080;
	border: 4px solid #696969;
}

section > div{
	margin: 5%;
}

.center-input{
	text-align: center;
}

.subTit{
	font-size: 18px;
}

.pull-right{
	float: right;
}

.input-form{
	margin: 3%;
}

textarea {
	font-size: 18px;
    resize: none;
    width: 100%;
  	height: 70px;
  	background-color: #feffe6;
}

.border-line{
	border: 1px solid #6794f4;
}

.word{
	margin: 6px;
	text-align: justify;
	font-family: monospace;	
    width: 100%;
  	height: 70px;
}

.box{
	border: 1px solid #000;
	display: inline-block;	
	width: 80px;
  	height: 70px;
}

.btn{
	font-size: 18px;
    text-align: center;
    margin: 4px 2px;
	padding: 5px;
	width: 12vw;
}

.btn-def{
	background-color: #4CAF50; /* Green */
	border: 2px solid #4CAF50;
    color: white;
}

.btn-def:hover {
    background-color: white; /* Green */
    color: #4CAF50;
    border: 2px solid #4CAF50;
	font-weight: bold;
}

.btn-stop{
	background-color: red; /* Green */
	border: 2px solid red;
    color: white;
}

.btn-stop:hover {
    background-color: white; /* Green */
    color: red;
    border: 2px solid red;
	font-weight: bold;
}

.status{
    display: inline-block;
    border: 1px solid black;
    background-color: #f6e7e7;
    width: 7vw;
    height: 5rem;    
}

.block{
	display: inline-block;
}

.statusvalue{
	font-size: 1.5rem;
    font-weight: bolder;
    text-align: right;
   /* border: 1px solid black;*/
    border-top: 0px;
    /*margin: 0.5rem;
    padding: 0.5rem;
    margin-top: 0px;*/
}

.statuslabel{    
    background-color: #aac1f2;
    width: 7vw;
    font-size: 0.8rem;
    height: 1.5rem;  
    /*margin: 0.5rem;
    margin-bottom: 0px;
    padding: 0.1rem 0.5rem 0.1rem 0.5rem;*/
}

.statuslabel > b{
	padding-top: 4px;
}

.statusvalue > b{
	padding-top: 10px;
	padding-right: 10px;
}

script.js


var sectionOne;
var sectionTwo;
var sectionThree;
var textAreaText;
var word;
var message;
var bar;
var bNumWordsBad;
var bNumWordsGood;
var bLevel;
var bTime;
var width = 1;
var index;
var timeOut = false;
var level = 1;
var setIntervalBar;
var setIntervalTime;
var arrayWords_L1 = ['Un pericotito Murió','ability','able','about','above','accept','according',
'account','across','act','action','activity','actually','add','address',
'administration','admit','adult','affect','after','again','against','age','agency',
'agent','ago','agree','agreement','ahead','air','all','allow','almost',
'alone','along','already','also','although','always','American','among',
'amount','analysis','and','animal','another','answer','any','anyone','anything',
'appear','apply','approach','area','argue','arm','around','arrive','art','article',
'artist','as','ask', 'assume', 'at', 'attack', 'attention', 'attorney'];
const L1_LENGTH = arrayWords_L1.length;
var numWordsGood = 0;
var numWordsBad = 0;
var goodWord = false;
var velocity = 50;


function init(){
  sectionOne = document.querySelector('#one');
  sectionTwo = document.querySelector('#two');
  sectionThree = document.querySelector('#three');
  textAreaText = document.querySelector('#textToEvaluate');
  word = document.querySelector('#word');
  message = document.querySelector('#message');
  bar = document.querySelector('#bar');   
  bNumWordsBad = document.querySelector('#numWordsBad');
  bNumWordsGood = document.querySelector('#numWordsGood');    
  bLevel = document.querySelector('#level');
  bTime = document.querySelector('#time');

  textAreaText.addEventListener('keyup', evaluateText);
  document.addEventListener('keyup', evaluateEnter);
}

function evaluateEnter(evt){
  if(evt.keyCode === 13) startGame();   
}

function evaluateText(evt){
  let textLength = textAreaText.value.length;
  if(textLength===0){
    textAreaText.style.backgroundColor = '#feffe6';
    message.innerHTML = ' ';
  }else{
    message.style.visibility = 'visible';
    if ((textAreaText.value.length == word.innerHTML.length) && (textAreaText.value === word.innerHTML)) {
           
      numWordsGood++;
      bNumWordsGood.innerHTML = numWordsGood;
      goodWord = true;
      cargarWord(); 
    }else if(textAreaText.value === word.innerHTML.substring(0, textLength)){          
      textAreaText.style.backgroundColor = '#feffe6';
      message.innerHTML = 'Vamos bien.';      
    }else{
      textAreaText.style.backgroundColor = '#fdc0c0'; 
      message.innerHTML = 'Upps..! Algo va mal.';
    }
  }  
}

function cargarBar() {  
  clearInterval(setIntervalBar);
  setIntervalBar = setInterval(frame, velocity);
  width = 1;
  bar.style.backgroundColor = '#4CAF50';
  function frame() {
    if (width >= 100) {   
      clearInterval(setIntervalBar);
      cargarWord();
      if(!goodWord){
        numWordsBad++;
        bNumWordsBad.innerHTML = numWordsBad;
      } 
    }else{     
      width++; 
      bar.style.width = width + '%';  
      switch(width) {
        case 25:
            bar.style.backgroundColor = '#cfd837';
            break;
        case 50:
            bar.style.backgroundColor = '#dd9322';
            break;
        case 75:
            bar.style.backgroundColor = '#dd2222';
            break;
      }
      goodWord = false;
    }
  }
}

function cargarWord(){
  let index;
  let wordNow;
  textAreaText.style.backgroundColor = '#feffe6';
  message.innerHTML = ' ';
  textAreaText.value='';
  index = Math.floor((Math.random() * L1_LENGTH) + 1); 
  wordNow = arrayWords_L1[index]; 
  word.innerHTML = wordNow;
  width = 1;  
  if((numWordsGood!=0) && (goodWord) && ( numWordsGood % 8 === 0)){
    level++;
    velocity -= 10;
  }
  bLevel.innerHTML = level;
  cargarBar();
}

function startGame(){
  document.removeEventListener('keyup', evaluateEnter);
  sectionTwo.style.display = 'block';
  sectionOne.style.display = 'none';
  textAreaText.readOnly = false;
  textAreaText.focus();
  cargarWord();
  bTime.innerHTML = '200.0';
  setIntervalTime = setInterval(timing, 100);
}

function stopGame(){
  clearInterval(setIntervalBar);
  clearInterval(setIntervalTime);
  word.innerHTML='';
  message.style.visibility = 'hidden';
  textAreaText.readOnly = true;
  bTime.innerHTML='0.0';
  bLevel.innerHTML='0';
  bNumWordsBad.innerHTML='0';
  bNumWordsGood.innerHTML='0';
  numWordsGood = 0;
  numWordsBad = 0;
  goodWord = false;
  velocity = 50;
  width = 1;
  timeOut = false;
  level = 1;
  width = 1;
  bar.style.width = width + '%';  
  bar.style.backgroundColor = '#4CAF50';  
}

function timing(){
  if (bTime.innerHTML === '0.0') {
    clearInterval(setIntervalTime);
    clearInterval(setIntervalBar);
    bTime.innerHTML = 'END';
    message.innerHTML = 'Game Over... :(';
    message.style.visibility = 'visible';
    textAreaText.readOnly = true;
  }else{
    bTime.innerHTML = (bTime.innerHTML - 0.1).toFixed(1);
  }
}

js-events-forms-game-v3.markdown

Rendered
Source

JS.Events.Forms.Game.v3

A Pen by Pan Doul on CodePen.

License.

index.html

<!DOCTYPE html>
<html lang="es">
<head>
	<title> Drag Div </title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/config.js"></script>
	<link rel="stylesheet" type="text/css" href="css/design.css">
</head>
<body onload="init();">
	<h1> Type Or Died </h1>
	<section id="one">
		<div>			
			<p>You will have to type the letters of this word as fast as you can.</p>			
			<div class="center-input">
				<button class="btn btn-def" id="btnStart" onclick="startGame();"> START GAME! </button>
			</div>
		</div>		
	</section>

	<section id="two" style="display: none;">
		<div>
			<b  class="subTit"> You must write: 
				<b style="color:red;"> Take care of Uppercase and Undercase. </b>
			</b><br><br>
			<div class="center-input">				
				<div class="border-line">
					<p id="word" class="word">Un pericotito Murió</p>	
				</div> <br>
				<div id="myProgress">
					<div id="bar"></div>
				</div>
				<button onclick="move()" style="display: none;">Click Me!</button> 
				<br>				
				<textarea id="textToEvaluate"></textarea>
				<p id="message" style="font-weight: bold; visibility: hidden;">Upps..! Algo va mal.</p>				
			</div>
		</div>		
		<div>
			<div class="status">
				<div class="statuslabel"><b>Time(s):</b></div>
				<div id="" class="statusvalue"><b id="time" >0</b></div>		    	
			</div>

			<div class="status">
				<div class="statuslabel"><b>Level:</b></div>
				<div id="" class="statusvalue"><b id="level" >0</b></div>				
			</div>	

			<div class="status">
				<div class="statuslabel"><b>(+) Words:</b></div>
				<div class="statusvalue"><b id="numWordsGood" >0</b></div>				
			</div>	
			<div class="status">
				<div class="statuslabel"><b>(-) Words:</b></div>
				<div class="statusvalue"><b id="numWordsBad" style="color: red;">0</b></div>				
			</div>	
			<div class="block" style="float: right;">
				<button class="btn btn-def pull-right" onclick="startGame();"> RESTART GAME </button>    <br>
				<button class="btn btn-stop pull-right" onclick="stopGame();"> STOP GAME </button>    
			</div>
		</div>
	</section>

	<section id="three" style="display: none;">
		<div>	
			<div class="center-input">
				<h1> You Lose...! </h1><br>
				<button class="btn btn-def" id="btnRestart" onclick="startGame();"> RESTART GAME </button>
			</div>
		</div>		
	</section>
</body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

JS.Events.Forms.Game.v3

JS.Events.Forms.Game.v3