700===Dev Project/자바스크립트 놀기

1:1 게임 점수 기록

블로글러 2019. 1. 16. 07:41

자바스크립트로 구현한 간단한 게임 점수 기록



SCOREKEEP.html (FRONT)


1 점수 표시 및 버튼 표시


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css" src="scorekeeper.css"></style>
    <title>Score Keeper</title>
</head>
<body style="text-align: center">
 
    <h1><span id="p1Show">0</span> to <span id="p2Show">0</span></h1>
 
    <p><span>5</span> 회차 </p>
 
    <input type="number">
    <br>
    <button id=p1 style="column-span: 10px">1p </button>
    <button id="p2" style="column-span: 10px">2p </button>
    <br><br>
    <button id="reset">초기화</button>
 
<script type="text/javascript" src="scorekeeper.js"></script>
 
</body>
</html>
cs



scorekeeper.js (BACK)


1 점수 보관. p1,p2 각 버튼에 클릭 이벤트 메소드 구현.

2 원하는 점수 달성시 게임끝 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
var p1Btn=document.querySelector("#p1");
var p2Btn=document.getElementById("p2");
var p1Show=document.querySelector("#p1Show");
var p2Show=document.querySelector("#p2Show");
 
var resetBtn=document.getElementById("reset");
var numInput=document.querySelector("input[type='number']");
var p=document.querySelector("p");
var winningScoreShow=document.querySelector("p span");
 
var p1Score=0;
var p2Score=0;
var gameOver=false;
var winningScore=5;
 
//console.log(p2Show);
 
//버튼 1
p1Btn.addEventListener("click", function(){
    //console.log("클릭 1 !");
    if(!gameOver){
    p1Score++;
    console.log(p1Score, winningScore);
    
        if(p1Score === winningScore){
            //console.log("GAME OVER!");
            p1Show.classList.add("winner"); //css 추가
            gameOver=true;    
        }
 
    p1Show.textContent=p1Score;
    }
});
 
//1버튼 2
p2Btn.addEventListener("click", function(){
    //console.log("클릭 2 !");
    if(!gameOver){
    p2Score++;
        if(p2Score === winningScore){
            //console.log("GAME OVER!");
            //이기면 css style 추가하기 
            p2Show.classList.add("winner");
            gameOver=true;
            
        }
    //console.log("p2 클릭!");
    p2Show.textContent=p2Score;
    
    }
});
 
//console.log(resetBtn);
 
resetBtn.addEventListener("click", function(){
    //console.log("reset click");
    reset();
});
 
//초기화
function reset(){
    p1Score=0;
    p2Score=0;
    
    p1Show.textContent=0;
    p2Show.textContent=0;
    
    p1Show.classList.remove("winner");
    p2Show.classList.remove("winner");
    
    gameOver=false;
}
 
//INPUT FORM- 플레이 수 
numInput.addEventListener("change", function(){
    console.log("changed");
    //winningScoreShow.textContent=numInput.value;
    winningScoreShow.textContent=this.value;
    
    //값 초과시 스트링으로 바뀌는 문제 해결 
    //winningScore=Number(numInput.value);
    winningScore=Number(this.value);
});
cs


728x90
저작자표시 비영리

'700===Dev Project > 자바스크립트 놀기' 카테고리의 다른 글

JS TO-DO LIST ❄️  (0) 2020.11.25
기본 AJAX 문법  (1) 2019.01.16
AJAX로 JSON 데이터 가져오기  (1) 2019.01.15
자바스크립트 color toggle  (0) 2019.01.15

'700===Dev Project/자바스크립트 놀기'의 다른글

  • 현재글1:1 게임 점수 기록

관련글

티스토리툴바