Thiết kế website giá rẻ

Question

I have various variables that act like counters and when the game is over I created a startOver function which resets all these variables, but it seems that even with this function the game although it starts, it doesn’t react when the buttons are pressed.

var buttonColors = ["red", "green", "blue", "yellow"];
var gamePattern = [];
var userClickedPattern = [];
var level = 0;
var started = false;


$(document).keydown(function() {
    setTimeout(() => {
        if (!started) {
            nextSequence();
            started = true;
        }
    }, 500);
});

function nextSequence() {
    level += 1;
    

    var randomNumber = Math.floor(Math.random() * 4);
    var randomChosenColor = buttonColors[randomNumber];
    gamePattern.push(randomChosenColor);

    playSound(randomChosenColor);
    $("h1").text("Level " + level);
}


$(".btn").click(function(event){
    console.log("i got pressed")
    userClickedPattern.push(event.target.id);
        
    playSound(event.target.id);
    animatePress(event.target.id);
    
    if (userClickedPattern.length < level) {
        if (userClickedPattern[userClickedPattern.length - 1] === gamePattern[userClickedPattern.length - 1]) {
            console.log("OK");
        }
        else {
            gameFailed();
            startOver();
        }
    }
    else if (userClickedPattern.length === level) {
        UserPatternCorrect(level);
    }
});



function playSound(name) {
    switch (name) {
        case "red":
            var redAudio = new Audio('sounds/red.mp3');
            redAudio.play();
            $("#red").fadeOut(80).fadeIn(80);
            break;

        case "green":
            var greenAudio = new Audio('sounds/green.mp3');
            greenAudio.play();
            $("#green").fadeOut(80).fadeIn(80);
            break;

        case "blue":
            var blueAudio = new Audio('sounds/blue.mp3');
            blueAudio.play();
            $("#blue").fadeOut(80).fadeIn(80);
            break;

        case "yellow":
            var yellowAudio = new Audio('sounds/yellow.mp3');
            yellowAudio.play();
            $("#yellow").fadeOut(80).fadeIn(80);
            break;
    
        default:
            console.log(name);
            break;
    }
}

function animatePress(currentColor) {
    $("#" + currentColor).addClass("pressed");
    setTimeout(() => {
        $("#" + currentColor).removeClass("pressed");
    }, 100);
}

function UserPatternCorrect(currentLevel) {
    if (userClickedPattern[currentLevel - 1] === gamePattern[gamePattern.length - 1]) { 
        
        setTimeout(() => {
            nextSequence();
        }, 1000);
    
            
        userClickedPattern = [];
        }
        else {
            gameFailed();
            startOver();   
        }
    }


function gameFailed() {
    $("h1").text("Game Over, Press Any Key to Restart")
    
    var gameOverAudio = new Audio('sounds/wrong.mp3');
        gameOverAudio.play();
    
    $("body").addClass("game-over");

    setTimeout(() => {
        $("body").removeClass("game-over");
    }, 200);
    
}

function startOver() {
    level = 0;
    started = false;
    gamePattern = [];
}

body {
  text-align: center;
  background-color: #011F3F;
}

#level-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 3rem;
  margin:  5%;
  color: #FEF2BF;
}

.container {
  display: block;
  width: 50%;
  margin: auto;

}

.btn {
  margin: 25px;
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  border-radius: 20%;
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pressed {
  box-shadow: 0 0 20px white;
  background-color: grey;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Simon</title>
  <link rel="stylesheet" href="styles.css">
  
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>

<body>
  <h1 id="level-title">Press A Key to Start</h1>
  <div class="container">
    <div lass="row">

      <div type="button" id="green" class="btn green">

      </div>

      <div type="button" id="red" class="btn red">

      </div>
    </div>

    <div class="row">

      <div type="button" id="yellow" class="btn yellow">

      </div>
      <div type="button" id="blue" class="btn blue">

      </div>

    </div>

  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="./index.js"></script>
</body>

</html>

At this point I don’t even know what to try out any more.

Thiết kế website giá rẻ

Danh mục

Creating a Simon game in JS, but after resetting the game the click event doesn’t work [closed]