Skip to content

Instantly share code, notes, and snippets.

@HuangStanley050

HuangStanley050/index.html

Created December 2, 2017 11:35
Show Gist options
  • Save HuangStanley050/00dd46b2a208210fcea5af3f0280bb97 to your computer and use it in GitHub Desktop.
Save HuangStanley050/00dd46b2a208210fcea5af3f0280bb97 to your computer and use it in GitHub Desktop.
Download ZIP
Simon Game
Raw
index.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>Simon</title>
<audio id="green_sound" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" ></audio>
<audio id="red_sound" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" ></audio>
<audio id="yellow_sound" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" ></audio>
<audio id="blue_sound" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" ></audio>
</head>
<body>
<h1>Simon Game</h1>
<div class="score_board">
<table>
<tr>
<th>
<div id="step">
<h2 id="score">0</h2>
</div>
</th>
<th>
<div class="start_button" onclick="push_sequence()">
</div>
</th>
<th>
<div id="strict_button" onclick="set_strict()" >
</div>
</th>
</tr>
<tr>
<th>
<h3 id="count">Count</h3></th>
<th>
<h3 id="start">Start</h3></th>
<th>
<h3 id="strict">Strict</h3></th>
</tr>
</table>
<button id="on_button" onclick="change_On()">On</button>
</div>
<div id="simon_circle">
<div onclick="get_color(this.id)"id="green" class="quarter"></div>
<div onclick="get_color(this.id)"id="red" class="quarter"></div>
<div onclick="get_color(this.id)"id="yellow" class="quarter"></div>
<div onclick="get_color(this.id)"id="blue" class="quarter"></div>
</div>
</body>
</html>
Raw
script.js
var on_status = 1;
var off_status = 0;
var color_change;
var color_flash;
var GREEN = 0;
var BLUE = 0;
var RED = 0;
var YELLOW = 0;
var step = document.getElementById("score");
var strict = 0;
//var color_sequence = ["RED","Yellow","BLUE","GREEN"];
var memory = [];
var last_step = 1;
var current_step = 0;
var color;
var pushORnot = 0;
/* q1 = 1 green
q2 = 2 red
q3 = 3 yellow
q4 = 4 blue
*/
//achieve one objective, generate random moves, user can select and can set the winning moves to any numbers.
//after user gets the right button, flash all the color again up to where the user last clicked plus the next sequence
//hardest part of this project is to get settimeout work properly in a loop and also the basic idea of running the game
/*
https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.
*/
function change_On() {
//pause or resume game button
var on_off = document.getElementById("on_button");
if (on_status == 1) {
on_off.innerHTML = "OFF";
on_off.style.backgroundColor = "red";
off_status = 1;
on_status = 0;
//restart everything and start with the first step
strict = 0;
//turns the color of strict_mode back to yellow
var strict_mode = document.getElementById("strict_button");
strict_mode.style.backgroundColor = "yellow";
//end turing color part;
//Change the score board count to 0, before new game starts when user press start
step.innerHTML = "0";
//end
current_step=0;
last_step=1;
memory=[];
} else {
on_off.innerHTML = "ON";
on_off.style.backgroundColor = "blue";
on_status = 1;
off_status = 0;
}
}
function get_color(clicked_color) {
//console.log(clicked_color);
if (clicked_color == "blue") {
color = "BLUE";
/*if(last_step == 5){
alert("you win");
}
*/
playAudio("blue_sound");
action();
}
if (clicked_color == "yellow") {
color = "YELLOW";
/*if(last_step == 5){
alert("you win");
}
*/
playAudio("yellow_sound");
action();
}
if (clicked_color == "green") {
color = "GREEN";
/*if(last_step == 5){
alert("you win");
}
*/
playAudio("green_sound");
action();
}
if (clicked_color == "red") {
color = "RED";
/*if(last_step == 4){
alert("you win");
}
*/
playAudio("red_sound");
action();
}
}
function getSequence() {
var index = Math.floor(Math.random() * 4);
if (index == 0) {
return "RED";
}
if (index == 1) {
return "YELLOW";
}
if (index == 2) {
return "BLUE";
}
if (index == 3) {
return "GREEN";
}
}
function store_color(next_seq) {
memory.push(next_seq);
}
function push_sequence() {
var seq = getSequence();
var i = 0;
//once you get the sequence, store in array then flash the color
store_color(seq); //after storing the color, flash on screen
step.innerHTML = last_step;
for (i = 0; i < memory.length; i++) {
//flash(memory[i]);
console.log(memory[i]);
}
flash_all();
}
function action() {
if (current_step != last_step) {
if (color == memory[current_step]) {
current_step++;
alert("it's the right color");
console.log("Current step is-->" + current_step);
} else {
alert("wrong color");
//need to implement the non strict mode
//the memory doesn't reset
//just flash all the colors again up to last step
if (strict == 1) {
//strict_mode, resets everything, start again
memory = [];
current_step = 0;
step.innerHTML = current_step;
last_step = 1;
push_sequence();
} else {
//not strict mode, flash all colors
console.log("not strict, will show all colors again");
console.log("last step--->" + last_step);
current_step = 0;
flash_all();
}
}
}
if (current_step == last_step) {
//set 5 steps for game winnig move for now
//should be 20 moves
if (current_step && last_step == 20) {
alert("You win!");
memory = [];
current_step = 0;
last_step = 1;
push_sequence(); //game starts over again once you win
} else {
last_step++;
current_step = 0;
push_sequence();
console.log(memory);
}
}
}
//get color_id, change to black after delay and change the color back to original
function flash(color_ID) {
if (color_ID == "BLUE") {
//console.log("BLUE");
color_flash = document.getElementById("blue");
//color_flash.style.backgroundColor = "black";
BLUE = 1;
change_colors();
}
if (color_ID == "YELLOW") {
//console.log("YELLOW");
color_flash = document.getElementById("yellow");
//color_flash.style.backgroundColor = "black";
YELLOW = 1;
change_colors();
}
if (color_ID == "RED") {
//console.log("RED");
color_flash = document.getElementById("red");
//color_flash.style.backgroundColor = "black";
RED = 1;
change_colors();
}
if (color_ID == "GREEN") {
//console.log("GREEN");
color_flash = document.getElementById("green");
//color_flash.style.backgroundColor = "black";
GREEN = 1;
change_colors();
}
}
//var x;
//var test = document.getElementById("blue");
//var test = document.getElementById("green");
function change_colors() {
color_change = 1;
setTimeout(change, 1000);
change();
}
function change() {
if (color_change === 1) {
color = "black";
color_change = 0;
} else {
if (GREEN == 1) {
color = "green";
color_change = 1;
GREEN = 0;
}
if (RED == 1) {
color = "red";
color_change = 1;
RED = 0;
}
if (BLUE == 1) {
color = "blue";
color_change = 1;
BLUE = 0;
}
if (YELLOW == 1) {
color = "yellow";
color_change = 1;
YELLOW = 0;
}
}
color_flash.style.backgroundColor = color;
}
//before flashing the new color, flash everything user has correctly pressed from the beginning
/*function flash_all(){
var counter;
var temp_color;
//have to do a callback before the result comes back
for(counter = 0; counter<memory.length;counter++){
temp_color = memory[counter];
flash(temp_color);
console.log(counter);
}
/*if (seq == "RED"){
flash("RED");
}
if (seq == "YELLOW"){
flash("YELLOW");
}
if (seq == "GREEN"){
flash("GREEN");
}
if (seq == "BLUE"){
flash("BLUE");
}
*/
//}
//seems to work in a for loop by passing a counter variable, time out every second
function doScaledTimeout(i, value) {
setTimeout(function() {
//console.log(i);
flash(value);
//playAudio(value);
if (value == "RED") {
playAudio("red_sound");
}
if (value == "BLUE") {
playAudio("blue_sound");
}
if (value == "GREEN") {
playAudio("green_sound");
}
if (value == "YELLOW") {
playAudio("yellow_sound");
}
}, i * 2000);
}
function flash_all() {
var counter;
var temp;
for (counter = 0; counter < memory.length; counter++) {
temp = memory[counter];
doScaledTimeout(counter, temp);
}
}
function playAudio(color) {
var audio = document.getElementById(color);
audio.play();
}
function set_strict() {
strict = 1;
var strict_mode = document.getElementById("strict_button");
strict_mode.style.backgroundColor = "black";
}
/*function test(){
for ( var i = 0; i<5; i++) {
doScaledTimeout(i,"RED");
}
}
*/
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
* {
box-sizing: border-box;
}
body {
background-color: lavender;
}
h1 {
text-align: center;
font-family: serif;
color: DodgerBlue;
font-size: 90px;
}
h2 {
text-align: right;
}
.score_board {
width: 400px;
height: 250px;
margin: auto;
background-color: Aquamarine;
border-style: solid;
border-width: 5px;
border-color: black;
position: relative;
}
#step {
display: inline-block;
width: 150px;
height: 65px;
background-color: DarkGrey;
margin: 10px;
border-style: solid;
}
.start_button {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border-color: black;
border-style: solid;
margin: 15px;
}
#strict_button {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
border-color: black;
border-style: solid;
margin: 15px;
}
#count {
margin-top: 1px;
margin-left: 50px;
}
#start {
margin-top: 1px;
margin-left: 15px;
}
#strict {
margin-top: 1px;
margin-left: 15px;
}
#on_button {
display: inline-block;
/*widith: 40px;*/
padding: 15px 35px;
font-size: 24px;
cursor: pointer;
text-align: center;
color: #fff;
background-color: blue;
border: none;
border-radius: 15px;
/*box-shadow: 0 9px #999;*/
position: absolute;
bottom: 0;
right: 0;
}
#simon_circle {
margin-top: 10px;
margin-left: 225px;
width: 400px;
height: 400px;
background: cyan;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 200px;
/*border-width: 200px;
border-style: solid;
border-color: red blue yellow green;
transform: rotate(45deg);*/
overflow: hidden;
}
.quarter {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
}
#green {
background-color: green;
}
#red {
background-color: red;
}
#yellow {
background-color: yellow;
}
#blue {
background-color: blue;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment