Simon Game

Developer
Jimmy Lin
Size
3,485 Kb
Views
16,192
  1. Simon Game Previews
  2. Simon Game HTML Codes
  3. Simon Game CSS Codes
  4. Simon Game JS Codes

How do I make an simon game?

What is a simon game? How do you make a simon game? This script and codes were developed by Jimmy Lin on 11 December 2022, Sunday.

Simon Game Previews
IQ Test

Simon Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon Game</title> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container-fluid text-center"> <h1> Simon Game </h1> <div class="row"> <div class="container"> <div class="green"></div> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> <div class="status"> <div class="wrong" style="display:none"><i class="fa fa-times"></i></div> <div class="correct" style="display:none"><i class="fa fa-check"></i></div> <div class="trophy" style="display:none"><i class="fa fa-trophy"></i></div> </div> </div> <br> <div class="leveltext">LEVEL <div class="level">1</div> </div> <!-- end: class level text --> <br> <button class="btn btn-primary play">Start/Replay</button> <button class="btn btn-primary reset">Reset Game</button> <br> <br> <div class="strictcontainer btn btn-primary"> <input type="checkbox" name="strict" value="strict" class="strict"> <span class="leveltext">Strict Mode</span> </div> </div> <div class="row text-center"> </div> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simon Game - Script Codes CSS Codes

body { font-family:lobster; background-size:cover;
}
h1 { padding:0px; font-size:50px; margin-bottom: 40px;
}
a:link {color:#B24900; text-decoration:none}
a:visited {color:#B24900; text-decoration:none}
a:hover {color:#FF8633; text-decoration:underline};
.trophy { position: absolute; border-radius: 50%; width: 40px; height: 40px; background-color: orange; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; line-height: 40px; box-sizing: border-box;
}
.container { position: relative; width: 500px; margin: 0 auto; text-align: center; border-radius: 50%;
}
.status { position: absolute; border-radius: 50%; width: 50px; height: 50px; background-color: #FFF6B2; top: 50%; left: 50%; margin-top: -25px; /* Half the height */ margin-left: -25px; line-height: 50px;
}
.green,
.red,
.yellow,
.blue { display: inline-block; border:15px solid black;
}
.green {
width:200px; height:200px; background-color:green; border-top-left-radius:100%; display:inline-block;
}
.red { width:200px; height:200px; background-color:red; border-top-right-radius:100%; display:inline-block;
}
.blue { width:200px; height:200px; background-color:blue; border-bottom-right-radius:100%; display:inline-block;
}
.yellow { width:200px; height:200px; background-color:yellow; border-bottom-left-radius:100%; display:inline-block;
}
.enabled { cursor: pointer;
}
.active { background-color: white; border-style: solid; border-color: white;
}
.strict { color: white;
}
.strictcontainer { width: 150px; margin: 0 auto; padding: 5px; border-radius: 5px;
}

Simon Game - Script Codes JS Codes

var turns = [];
var colors = ["green", "red", "blue", "yellow"];
var recording = [];
var speed = 200;
var strictMode = false;
var running;
//Changes strict mode value
$(".strict").change(function() { strictMode = !strictMode;
});
//Audio files for button sounds
var green = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
var red = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
var yellow = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
var blue = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
var obj = { "green": green, "red": red, "yellow": yellow, "blue": blue
};
function setSoundSpeed(x) { for (var k in obj) { obj[k].playbackRate = x; obj[k].preload = "auto"; }
}
setSoundSpeed(2);
function addRandomColor() { turns.push(colors[Math.floor(Math.random() * colors.length)]); var level = turns.length; $('.level').text(level);
}
addRandomColor();
$('button.play').on('click', function() { nextItemActivate(turns);
});
// Animation callback to start next fade-in
function nextItemActivate(items) { // Fade in the first element in the collection $('.' + items[0]).addClass('active', speed, function() { obj[items[0]].play(); }).removeClass('active', speed, function() { // Recurse, but without the first element nextItemActivate(items.slice(1)); }); if (items.length === 0) { $('.green, .red, .yellow, .blue').addClass('enabled'); }
}
$('body').on('click', '.enabled', function() { if (running){ return false; } running = true; $(this).addClass('active', speed, function() { obj[$(this).attr('class').split(' ')[0]].play(); }).removeClass('active', speed, function() { recording.push($(this).attr('class').split(' ')[0]); var currentMoves = recording.length var currentLevel = turns.length if (recording[currentMoves - 1] === turns[currentMoves - 1]) { if (currentMoves === currentLevel) { if (currentMoves !== 20) { recording = []; $('.green, .red, .yellow, .blue').removeClass('enabled'); $('.correct').fadeIn(500, function() { $('.correct').fadeOut(500, function() { addRandomColor(); setTimeout( function() { nextItemActivate(turns); }, 200); }); }); } else { $('.trophy').fadeIn(1000, function() { green.play(); red.play(); yellow.play(); blue.play(); $('.trophy').fadeOut(1000, function() { reset(); }) }); } } } else { recording = []; $('.green, .red, .yellow, .blue').removeClass('enabled'); $('.wrong').fadeIn(500, function() { $('.wrong').fadeOut(500, function() { setTimeout( function() { if (strictMode) { turns = []; addRandomColor(); } nextItemActivate(turns); }, 200); }); }); } running = false; });
})
function reset() { if ($('.green, .red, .yellow, .blue').hasClass('enabled')) { turns = []; recording = []; speed = 200; setSoundSpeed(1.5); addRandomColor(); nextItemActivate(turns); }
}
$('button.reset').on('click', function() { reset();
})
Simon Game - Script Codes
Simon Game - Script Codes
Home Page Home
Developer Jimmy Lin
Username odylic
Uploaded December 11, 2022
Rating 3
Size 3,485 Kb
Views 16,192
Do you need developer help for Simon Game?

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!

Jimmy Lin (odylic) Script Codes
Name
Firefly tribute
Mark Down Previewer
Portfolio Trial 1
Twitch JSON API
Calculator
Tic Tac Toe Game
TwitchTV JSON API 2
Wikipedia Viewer
Pomodoro Clock
Random Quote Generator
Create amazing marketing copy 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!