Project : Simon Game

vancouver·2023년 5월 3일

javascript이해하기

목록 보기

8/22

html

<!DOCTYPE html>
<html lang="ko" 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 class="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.6.4/jquery.min.js"></script>
  <script src="game.js" charset="utf-8"></script>
</body>

</html>

javascript

var buttonColours = ["red", "blue", "green", "yellow"]; // button color의 배열

var gamePattern = []; //추가되는 gamePattern
var userClickedPattern = []; //user가 클릭하는 버튼의 Pattern

var started = false; // 최초 start

var level = 0; //최초 level을 0으로 정의

$(document).keypress(function() {  //최초 Press Any Key Start 그 이후에 비활성
    if (!started) { //strated가 true일때

    $("#level-title").text("level " + level); //level-title의 텍스트를 레벨이 올라감에 반응
    nextSequence(); //다음 레벨로 이동
    started = true;
    }
    
});

$(".btn").click(function() { //게임을 시작한 후 user의 클릭에 반응

    var userChosenColour = $(this).attr("id"); //user의 선택하는 button을 변수정의
    userClickedPattern.push(userChosenColour); //userClickedPattern의 배열을 userChosenColour로 배열의 오른쪽 부터 쌓음. (ex. 파란색, 빨강, 노랑 클릭 ["blue", "red", "yellow"])

    playSound(userChosenColour); //sound를 userChosenColour가 활성화되면서 같이 반응
    animatePress(userChosenColour); //ainmatePress를 userChosenColour가 활성화되면서 같이 반응

    checkAnswer(userClickedPattern.length-1);
});

function checkAnswer(currentLevel) {  //게임을 시작하고 level이 점차 올라가며 gamePattern이 쌓이는 과정을 반응 맞추면 다음단계로 이동,틀리면 wrong을 반응
    if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { //gamePattern과 userClickedPattern이 같으면 console창의 sucess출력
        console.log("sucess");

    if (userClickedPattern.length === gamePattern.length){ //userClickedPattern의 길이와 gamePattern의 길이가 같으면 1000밀리초 후 다음 시퀀스로 이동

        setTimeout(function() {
            nextSequence();
        }, 1000);
    }
    
} else {
  
    console.log("wrong"); //틀릴경우 콘솔창의 "worng"출력

    playSound("wrong");  //sound의 "wrong"출력
  
    $("body").addClass("game-over"); //배경이 200밀리초동안 빨강으로 깜빡임
    setTimeout ( function() {
        $("body").removeClass("game-over");
    }, 200);

    $("#level-title").text("Game Over, Press Any Key to Restart"); //"level-title"의 텍스트가 "Game Over, Press Any Key to Restart로 변경"

    startOver(); // 게임 restart 
    }

}

function nextSequence() { //게임을 시작하고 gamePattern의 배열이 무작위로 추가됨
    userClickedPattern = [];
    level++;
    $("#level-title").text("level "+ level);

    var randomNumber = Math.floor(Math.random() * 4);
    var randomChosenColour = buttonColours[randomNumber];
    gamePattern.push(randomChosenColour);
    
$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
 playSound(randomChosenColour);
}

function playSound(name) {  //button의 sound를 추가
    var audio = new Audio("sounds/" + name + ".mp3");
 audio.play();
}

function animatePress(currentColour){   //user의 클릭의 반응하며 애니메이션 효과 부여
    $("#" + currentColour).addClass("pressed");
    setTimeout (function() {
       $("#" + currentColour).removeClass("pressed")
    }, 100);
}

function startOver(){ // 게임 restart
    
    level = 0;
    gamePattern = [];
    started = false;
}

CSS

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;
}

https://brrkak.github.io/Simon-game/

vancouver

이전 포스트

jQuery

다음 포스트

Project : Simon Game

javascript이해하기

html

javascript

CSS

jQuery

function (Challenge)

0개의 댓글