API tools faq
paste
Advertisement
Foxxything

Simon Says Clone

Foxxything
Mar 24th, 2023
892
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Simon Says Clone</title>
  5.     <style>
  6.       #gamepad {
  7.         display: flex;
  8.         flex-wrap: wrap;
  9.         justify-content: center;
  10.         align-items: center;
  11.         width: 200px;
  12.         height: 200px;
  13.         border: 2px solid black;
  14.         border-radius: 50%;
  15.         margin: 0 auto;
  16.       }
  17.  
  18.       .button {
  19.         width: 90px;
  20.         height: 90px;
  21.         border-radius: 50%;
  22.         margin: 5px;
  23.         cursor: pointer;
  24.       }
  25.  
  26.       .red {
  27.         background-color: #ff6347;
  28.       }
  29.  
  30.       .green {
  31.         background-color: #2ecc71;
  32.       }
  33.  
  34.       .blue {
  35.         background-color: #3498db;
  36.       }
  37.  
  38.       .yellow {
  39.         background-color: #f1c40f;
  40.       }
  41.  
  42.       .active {
  43.         opacity: 0.5;
  44.       }
  45.     </style>
  46.  
  47.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
  48.   </head>
  49.   <body>
  50.     <div class="container mt-5">
  51.       <h1 class="text-center">Simon Says Clone</h1>
  52.       <div class="row justify-content-center">
  53.         <div class="col-auto">
  54.           <div id="gamepad">
  55.             <div class="button red"></div>
  56.             <div class="button green"></div>
  57.             <div class="button blue"></div>
  58.             <div class="button yellow"></div>
  59.           </div>
  60.           <div class="row mt-3">
  61.             <div class="col text-center">
  62.               <button class="btn btn-primary start-button">Start Game</button>
  63.             </div>
  64.           </div>
  65.         </div>
  66.       </div>
  67.     </div>
  68.  
  69.     <!-- Add Bootstrap JS and jQuery -->
  70.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
  71.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  72.    
  73.     <script>
  74.       var sequence = [];
  75.       var playerSequence = [];
  76.       var level = 0;
  77.       var gameStarted = false;
  78.       var flashing = false;
  79.  
  80.       // Start the game
  81.       $('.start-button').click(function() {
  82.         if (!gameStarted) {
  83.           level = 0;
  84.           sequence = [];
  85.           playerSequence = [];
  86.           gameStarted = true;
  87.           startRound();
  88.         }
  89.       });
  90.  
  91.       // Start a new round
  92.       function startRound() {
  93.         level++;
  94.         $('.start-button').text('Level ' + level);
  95.         var buttonColors = ['red', 'green', 'blue', 'yellow'];
  96.         var randomColor = buttonColors[Math.floor(Math.random() * buttonColors.length)];
  97.         sequence.push(randomColor);
  98.         flashSequence();
  99.       }
  100.  
  101.       // Flash the sequence
  102.       function flashSequence() {
  103.         flashing = true;
  104.         var i = 0;
  105.         var interval = setInterval(function() {
  106.           if (i === sequence.length) {
  107.             clearInterval(interval);
  108.             flashing = false;
  109.             playerSequence = [];
  110.             $('.button').removeClass('active');
  111.           } else {
  112.             flashButton(sequence[i]);
  113.             i++;
  114.           }
  115.         }, 1000);
  116.       }
  117.  
  118.       // Flash a button
  119.       function flashButton(color) {
  120.         var button = $('.' + color);
  121.         button.addClass('active');
  122.         var audio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
  123.         audio.play();
  124.         setTimeout(function() {
  125.           button.removeClass('active');
  126.         }, 500);
  127.       }
  128.  
  129.       // Handle button clicks
  130.       $('.button').click(function() {
  131.         if (flashing) {
  132.           return;
  133.         }
  134.         var color = $(this).attr('class').split(' ')[1];
  135.         playerSequence.push(color);
  136.         flashButton(color);
  137.         checkSequence();
  138.       });
  139.  
  140.       // Check the sequence
  141.       function checkSequence() {
  142.         for (var i = 0; i < playerSequence.length; i++) {
  143.           if (playerSequence[i] !== sequence[i]) {
  144.             gameOver();
  145.             return;
  146.           }
  147.         }
  148.         if (playerSequence.length === sequence.length) {
  149.           setTimeout(startRound, 1000);
  150.         }
  151.       }
  152.  
  153.       // Game over
  154.       function gameOver() {
  155.         alert('Game Over! You made it to level ' + level + '.');
  156.        
  157.         gameStarted = false;
  158.         sequence = [];
  159.         playerSequence = [];
  160.         level = 0;
  161.         flashing = false;
  162.         $('.start-button').text('Start Game');
  163.         var audio = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
  164.         audio.play();
  165.       }
  166.  
  167.     </script>
  168.   </body>
  169. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!