Simon Game
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 - 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();
})
Developer | Jimmy Lin |
Username | odylic |
Uploaded | December 11, 2022 |
Rating | 3 |
Size | 3,485 Kb |
Views | 16,192 |
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!
Name | Size |
Firefly tribute | 2,476 Kb |
Portfolio Template | 2,581 Kb |
Twitch JSON API | 2,556 Kb |
Local Weather | 2,560 Kb |
Random Quote Generator | 2,674 Kb |
Calculator | 2,544 Kb |
TwitchTV JSON API 2 | 2,691 Kb |
Tic Tac Toe Game | 2,701 Kb |
Mark Down Previewer | 3,062 Kb |
Pomodoro Clock | 2,384 Kb |
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!
Name | Username | Size |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
RAQuote | Naderk007 | 4,412 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Rotate Demo | Agelber | 3,061 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!