Simon Game without jquery

Developer
Omran Abazid
Size
3,370 Kb
Views
28,336
  1. Simon Game without jquery Previews
  2. Simon Game without jquery HTML Codes
  3. Simon Game without jquery CSS Codes
  4. Simon Game without jquery JS Codes

How do I make an simon game without jquery?

What is a simon game without jquery? How do you make a simon game without jquery? This script and codes were developed by Omran Abazid on 15 September 2022, Thursday.

Simon Game without jquery Previews
IQ Test

Simon Game without jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon Game without jquery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="circle"> <div id='btn-group' class="btn-group"> <button class='btn one'></button> <button class='btn two'></button> <button class='btn three'></button> <button class='btn four'></button> </div> <div class="circle-center"> <button id='btn-on' class="button btn-on">OFF</button> <button id='btn-start' class="button btn-start">Start</button> <label for="strict"><input id='strictCheck' type="checkbox" name="strict" value="">Strict</label> <br> <label id="level"></label> </div> </div> </div> <script src="js/index.js"></script>
</body>
</html>

Simon Game without jquery - Script Codes CSS Codes

*{ box-sizing: border-box;
}
.container{ width:600px; display:block; margin: 150px auto; position:relative;
}
.circle{ position:relative; width:550px; height: 550px; border-radius: 100%; background-color: #2c2c2d; border:25px solid #2c2c2d;
}
.circle-center{ position:absolute; top:150px; left:150px; width:200px; height: 200px; border-radius: 100%; background: #2c2c2d; text-align: center; padding:40px; color:#fff; line-height: 2; font-family: helvetica; font-weight: bold;
}
.btn-group{ width: 600px;
}
.btn{ margin:0px; padding:0px; width:250px; display:inline-block; height: 250px; border:10px solid #2c2c2d; outline: none;
}
.one{ border-top-left-radius:100%; background: #ff6100;
}
.one.active{ border-top-left-radius:100%; background: #fd893b;
}
.two{ border-top-right-radius:100%; background: #f1f1f4;
}
.two.active{ border-top-right-radius:100%; background: #d9d9db;
}
.three{ border-bottom-left-radius:100%; background: #e1353e;
}
.three.active{ border-bottom-left-radius:100%; background: #e0646b;
}
.four{ border-bottom-right-radius:100%; background: #83cedf;
}
.four.active{ border-bottom-right-radius:100%; background: #b1d5dd;
}
.button{ background: #fff; border:none; color:#000; padding:10px; border-radius: 20px; display:block; margin:0 auto; margin-bottom: 10px; width:100px; outline:none;
}
.btn-start:hover{ background: #e1353e;
}
.circle-center input[type='checkbox']{ margin-right: 10px; -webkit-appearance:none; width:15px; height:15px; background:white; border-radius:15px; outline:none; vertical-align: middle;
}
.circle-center input[type='checkbox']:checked { background: #e1353e;
}

Simon Game without jquery - Script Codes JS Codes

var simon = (function(){
var on=false;
var level=0;
var strict = false;
var levels=[];
var fillIndex=0;
var filled = [];
var i=0;
var sound=[];
sound[0] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
sound[1] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
sound[2] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
sound[3] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
//caching the dom
var btnGroup = document.getElementById('btn-group');
var btnOn=document.getElementById('btn-on');
var btnStart= document.getElementById('btn-start');
//events
btnGroup.addEventListener("click", fill);
btnStart.addEventListener("click", start);
btnGroup.addEventListener("mousedown", function(e){ var target = e.target; if(hasClass(target, 'btn')){ target.className += " active"; switch(target){ case btnGroup.children[0]: sound[0].play(); break; case btnGroup.children[1]: sound[1].play(); break; case btnGroup.children[2]: sound[2].play(); break; case btnGroup.children[3]: sound[3].play(); break; } }
});
btnGroup.addEventListener("mouseup", function(e){ var target = e.target; if(hasClass(target, 'btn')){ removeClass(target); }
});
btnOn.addEventListener("click", onn);
//custom functions
function onn(){ if(on){ on=false; btnOn.innerHTML="OFF"; } else{ on = true; btnOn.innerHTML="ON"; btnOn.style.background="#83CEDF"; }
}
function start(){ if(on){ reset(); playAndListen(); btnStart.style.background="#e1353e"; }
}
function reset(){ level=0; levels= []; fillIndex=0; filled=[]; i=0;
}
function playAndListen(){ levels.push(Math.floor(Math.random()*3)); document.getElementById("level").innerHTML="Level "+(level+1); playSecuence();
}
function playSecuence(){
var playLevel = function(){ switch(levels[i]){ case 0: btnGroup.children[0].className +=" active"; sound[0].play(); setTimeout(function() { removeClass(btnGroup.children[0]); }, 500); break; case 1: btnGroup.children[1].className +=" active"; sound[1].play(); setTimeout(function() { removeClass(btnGroup.children[1]); }, 500); break; case 2: btnGroup.children[2].className +=" active"; sound[2].play(); setTimeout(function() { removeClass(btnGroup.children[2]); }, 500); break; case 3: btnGroup.children[3].className +=" active"; sound[3].play(); setTimeout(function() { removeClass(btnGroup.children[3]); }, 500); break; } i++ setTimeout(function (){ if(i<levels.length){ playLevel(); } },1000);
}
playLevel();
}
function compare(){ var check = false; var equal = levels.every(function(element, index) { return element === filled[index]; }); if(!equal){ document.getElementById("level").innerHTML = "No! Restart "+level+1; check=true; if(document.getElementById("strictCheck").checked){ start(); }else{ i=0; filled=[]; fillIndex=0; setTimeout(function(){ playSecuence(); },1000); } } else{ console.log("completed"); if(level==3){ document.getElementById("level").innerHTML="Win!"; }else{ filled=[]; fillIndex=0; level++; i=0; setTimeout(function(){ playAndListen(); },1000); } }
}
function fill(e){ var target = e.target; if(hasClass(target, 'btn')){ filled[fillIndex] = Array.prototype.indexOf.call(btnGroup.children, target); console.log(filled[fillIndex]); fillIndex++; if(fillIndex == levels.length){ compare(); } }
}
function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function removeClass(node){ node.className = node.className.replace( /(?:^|\s)active(?!\S)/g , '' );
}
})();
Simon Game without jquery - Script Codes
Simon Game without jquery - Script Codes
Home Page Home
Developer Omran Abazid
Username OmranAbazid
Uploaded September 15, 2022
Rating 3
Size 3,370 Kb
Views 28,336
Do you need developer help for Simon Game without jquery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Omran Abazid (OmranAbazid) Script Codes
Name
A Pen by Omran Abazid
Weather App
FCC Campers News
Pomodora Timer
Wikipedia Search using the API
Bootstrap Portfolio Website
Bootstrap-jquery Address Book
Bootstrap page Header Template
Convert data into d3 format
Quote Machine
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!