Project/축구모임 홈페이지개발

[축구모임 홈페이지개발] 02/12 개발일지 Nodejs css / 승부차기 게임 구현

한33 2024. 2. 12. 22:06
app.get('/gamezone-shooting',  this.isLoggedIn, async (req, res, next) => {
  let mvpboardDic = await db.collection('mvpboard').find().sort({ _id: -1 }).limit(1).toArray();
  let mvpboard = mvpboardDic[0].member_score;
  let ShootingScore = await db.collection('gamezone_shooting').find().toArray();
console.log(ShootingScore)

  res.render('gamezone-shooting.ejs', {mvpboard : mvpboard, ShootingScore : ShootingScore });
});

app.get('/gamezone-shooting-scoreboard', async (req, res) => {
  let score = req.query.score;
  let username = req.user.username;

  // Find the user in the collection
  let existingUser = await db.collection('gamezone_shooting').findOne({ name: username });

  if (existingUser) {
    // If the user exists in the collection, check if the new score is higher
    if (score > existingUser.top_score) {
      // Update the top_score if the new score is higher
      await db.collection('gamezone_shooting').updateOne(
        { name: username },
        { $set: { top_score: score } }
      );
      console.log(`${username}'s top_score updated to ${score}`);
    } else {
      console.log(`${username}'s score is not higher than the existing top_score`);
    }
  } else {
    // If the user does not exist in the collection, insert a new record
    await db.collection('gamezone_shooting').insertOne({
      name: username,
      top_score: score
    });
    console.log(`${username}'s record inserted with top_score ${score}`);
  }

  res.redirect('back');
});

 

 

.gamezone-main {
    width: 800px;
    background-color: #002832;
    margin: 10% auto 0px auto;
    color: white;
    text-align: center;
    padding-top: 100px;
}

.gamezone-area {
    display: block;
    width: 100%;
    height: 400px;
    background-color: white;
}

.gamezone-start-button {
    width: 70%;
    height: 70px;
}

.gaolpost-area {
    position: relative;  /* 위치를 relative로 설정 */
    background-color: white;
    height: 60%;
    padding-top: 35px;
}

.goalpost {
    width: 250px;
    height: 120px;
    border: 5px solid black;
    border-bottom: white;
    margin: 0px auto 0px auto;
    display: flex;
}

.goalpost-left {
    background-color: #eaeff1;
    width: 33%;
}
.goalpost-center {
    background-color: #eaeff1;
    width: 34%;
}
.goalpost-right {
    background-color: #eaeff1;
    width: 33%;
}

.gamezone-ball-area {
    width: 100px;
    height: 100px;
    margin: 0px auto 10px auto;
    background-color: white;
   
}
.gamezone-ball-area img {
    width: 100%;
    height: auto;
}

.shoot-way-bt-area {
    display: flex;
    height: 20%;
    text-align: center;
    justify-content: center;
    background-color: white;
}

.shoot-way-bt {
    width: 20%;
    height: 65%;
    background-color: #002832;
    color: white;
    font-size: 130%;
    justify-content: center;
    align-items: center;
    margin: 0px 10px 0px 10px;
    border: 1px transparent;
    border-radius: 8px;
    display: flex;
}

.shoot-way-bt :hover {
    color: deeppink;
}

.gamezone-scorearea {
    padding-top: 0px;
    background-color: white;
    color: black;
    font-size: 400%;
    margin-bottom: 400px;
}

.selected {

    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 1;  
}

.keeper {
    background-repeat: no-repeat;
    background-size: 170%;
    background-position: 50% 2px;
    z-index: 0;  /* 다른 요소 뒤에 나오도록 낮은 z-index 설정 */
}

.red {
    background-color: red;
}

@media only screen and (max-width: 1000px) {
    .gamezone-main {
        width: 98%;
    }
}

    @media only screen and (max-width: 354px) {
        .shoot-way-bt {
            font-size: 100%;
        }


}

 

 

    <script>
        function GameStart() {
            var gamezoneArea = document.getElementById('gamezone-area');
            gamezoneArea.style.display = 'block';
            var gamezoneStartButton = document.getElementById('gamezone-start-button');
            gamezoneStartButton.style.display = 'none';
        }

        function shoot(choice) {
            var start_ball = document.getElementById('gamezone-ball')
            start_ball.style.display = 'none';

            var areas = document.querySelectorAll('.goalpost-area');
            areas.forEach(function (area) {
                area.classList.remove('selected', 'red');
            });

            var selectedArea = document.getElementById('goalpost-1');
            if (choice === 2) {
                selectedArea = document.getElementById('goalpost-2');
            } else if (choice === 3) {
                selectedArea = document.getElementById('goalpost-3');
            }


            selectedArea.classList.add('selected');

            var randomIndex = Math.floor(Math.random() * 3) + 1; // 1부터 3까지의 랜덤한 숫자
            var randomArea = document.getElementById('goalpost-' + randomIndex);
            var scoreArea = document.getElementById('gamezone-scorearea');
            var currentScore = parseInt(scoreArea.textContent.replace('골 : ', ''));

            if (randomArea.classList.contains('selected')) {
                randomArea.classList.add('red');
                setTimeout(function () {
                    alert('막힘.');

                    location.href = `/gamezone-shooting-scoreboard?score=${encodeURIComponent(currentScore)}`;
                    setTimeout(function () {
                        var scoreArea = document.getElementById('gamezone-scorearea');
                        scoreArea.textContent = '골 : 0';
                    }, 100);
                }, 100);


            } else {
                randomArea.classList.add('red');

                var scoreArea = document.getElementById('gamezone-scorearea');
                var currentScore = parseInt(scoreArea.textContent.replace('골 : ', ''));
                var newScore = currentScore + 1;
                scoreArea.textContent = '골 : ' + newScore;
            }


        }
    </script>

</head>

<body>
    <%- include('nav.ejs') %>

        <div class="gamezone-main">
            <!-- <button id="gamezone-start-button" class="gamezone-start-button" onclick="GameStart()">시작하기</button> -->
            <div id="gamezone-area" class="gamezone-area">
                <div class="gaolpost-area">
                    <div class="goalpost">
                        <div id="goalpost-1" class="goalpost-area goalpost-left"></div>
                        <div id="goalpost-2" class="goalpost-area goalpost-center"></div>
                        <div id="goalpost-3" class="goalpost-area goalpost-right"></div>
                    </div>
                </div>
                <div class="gamezone-ball-area">
                    <img id="gamezone-ball"
                        alt="ball">
                </div>
                <div class="shoot-way-bt-area">
                    <button onclick="shoot(1)" id="shoot-way-bt-left" class="shoot-way-bt">왼쪽</button>
                    <button onclick="shoot(2)" id="shoot-way-bt-center" class="shoot-way-bt">중앙</button>
                    <button onclick="shoot(3)" id="shoot-way-bt-right" class="shoot-way-bt">오른쪽</button>
                </div>
                <div id="gamezone-scorearea" class="gamezone-scorearea">골 : 0</div>
            </div>

            <div style="margin-top: 200px;" class="MvpBoard-Container">
                <div class="MvpBoard-ti tle">
                    BOARD
                </div>
                <div class="MvpBoard-menu">
                    <div style="width: 20%; text-align: center;">RANK</div>
                    <div class="MvpBoard-bar"></div>
                    <div style="width: 60%; text-align: center;">NAME</div>
                    <div class="MvpBoard-bar"></div>
                    <div style="width: 20%; text-align: center;">SCORE</div>
                </div>
                <%
                const shootingScoreArray = Object.entries(ShootingScore);
                shootingScoreArray.sort((a, b) => b[1].top_score - a[1].top_score);
                for (let i = 0; i < shootingScoreArray.length; i++) {
                %>
                  <div class="MvpBoard-area">
                    <div class="MvpBoard-area-rank">
                      <%= i + 1 %>
                    </div>
                    <div class="MvpBoard-area-name">
                      <%= shootingScoreArray[i][1].name %>
                    </div>
                    <div class="MvpBoard-area-rank">
                      <%= shootingScoreArray[i][1].top_score %>
                    </div>
                  </div>
                <% } %>


            </div>
        </div>
</body>

 

저작자표시