자바스크립트를 사용해서 핑퐁게임을 만들어봤다!

처음이라 미흡한 부분이 많지만 결과물이 잘 나와서 아주 만족~😎

 

앞으로 더 열심히 공부해서 퀄리티 높은 작업물을 만들 수 있도록 노력해야겠다 !!

핑퐁게임 하러가기  ↓↓↓

https://shinye-developmentdiary.tistory.com/14

 

JavaScript ping pong game - 자바스크립트로 만든 핑퐁 게임

공 튕기기 게임 #can{ background-color: rgb(224, 216, 217); display: block; margin: 0 auto; } var canvas = document.getElementById('can'); var ctx = canvas.getContext('2d'); var x = canvas.width/2; var y = canvas.height-20; var ballRadius = 10; var dx

shinye-developmentdiary.tistory.com

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>공 튕기기 게임</title>
    <style>
        #can{
            background-color: rgb(224, 216, 217);
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="can" width="480" height="320"></canvas>
</body>
<script>
    var canvas = document.getElementById('can');
    var ctx = canvas.getContext('2d');
    var x = canvas.width/2; //240 중앙에 위치
    var y = canvas.height-20; //300 밑에서 띄움
    var ballRadius = 10;
    var dx = 2; 
    var dy = -2;
    var paddleWidth = 50;
    var paddleHeight = 10;
    var paddleX = x-paddleWidth/2;
    var paddleY = canvas.height-paddleHeight;
    var rightPressed = false; //오른쪽 키 눌렸는지 확인
    var leftPressed = false;
    //점수
    var score = 0;

    //생명
    var life = 3; //*변수랑 함수명 중복 불가
    
    document.addEventListener("keydown",keyDown); //keyDown & keyUp 이벤트 = 키보드 눌렀을 때, 뗐을 때 발생
    document.addEventListener("keyup",keyUp);

    //키보드 이벤트 발생시 패들 움직이는 함수
    //발생한 이벤트는 (e) -> e 안에 담긴다.
    //키보드 오른쪽 키의 번호 39, 왼쪽 키의 번호 37 -> 내가 누른 키가 39(오른쪽)이면 이동
   
    function keyDown(e){
        if(e.keyCode == 39){
            rightPressed = true;
        }

        if(e.keyCode == 37){
            leftPressed = true;
        }
    }

    function keyUp(e){ 
        if(e.keyCode == 39){
            rightPressed = false;
        }

        if(e.keyCode == 37){
            leftPressed = false;
        }
    }

    //생명 생성
    function gameLife(){
        ctx.beginPath();
        ctx.font = "20px Arial";
        ctx.fillStyle = "blue";
        ctx.fillText("life:"+life, canvas.width-65, 20 );
    }
    
    //점수판 만들기
    function gameScore(){
        ctx.beginPath();
        ctx.font = "16px Arial"
        ctx.fillStyle = "green"
        ctx.fillText("score: "+score, 8, 20); //출력(텍스트,좌표,좌표)  
        score++; //score = score+1; 
    }

    //패들 만들기 함수
    function paddle(){
        ctx.beginPath();
        ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight); //사각형 그리기 시작위치 x,y 끝위치 x,y
        ctx.fillStyle = "black";
        ctx.fill();
    }

    //공 만들기 함수
    function ball(){
        ctx.beginPath(); //그려진 것을 무시하고 종이를 새로 깜
        ctx.arc(x, y, ballRadius , 0 , Math.PI*2); //동그라미 그림 (X축, Y축, 반지름크기,)
        ctx.fillStyle = "green";
        ctx.fill();
        
    }

    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height); //그리기 전에 지움(캔버스 초기화) ctx.clearRect(좌측x, 좌측y, 우측x, 우측y) 좌표      
        ball();
        paddle();
        gameScore();
        gameLife();
        
        //패들 움직이기
        if(rightPressed == true && paddleX < canvas.width-paddleWidth){
            paddleX = paddleX + 7;
        }

        if(leftPressed == true && paddleX > 0){
            paddleX = paddleX - 7;
        }


        //공 튕기기
        if(x+dx >= canvas.width-ballRadius || x+dx <= ballRadius){
            dx = -dx;
        }else if(y >= paddleY &&(x >= paddleX-ballRadius && x<= paddleX+paddleWidth+ballRadius)){
            dx= -dx;
        }

  
        if(y+dy <= ballRadius){
            dy = -dy;
        }else if(y+dy >= canvas.height - ballRadius - paddleHeight && (x >= paddleX && x <= paddleX+paddleWidth)){
            dy = -dy;   
        }else if(y+dy > canvas.height-ballRadius){
            if(life > 1){ 
                x = canvas.width/2; 
                y = canvas.height-50;
                dx = 2;
                dy = -2;
                paddleX = x-paddleWidth/2;
                life--;
            }else{
                life--;              
                alert("게임종료\n점수는"+score); 
                ctx.clearRect(canvas.width-65, 0, 100, 20);
                gameLife(); 
                clearInterval(interval)        
            }
               
        }
         //x는 공의 x축(가로)

     

        x = x+dx;
        y = y+dy;
    }

        var interval = setInterval(draw, 10) //해당 시간마다 반복 실행


</script>
</html>

'FE > javascript(jQuery)' 카테고리의 다른 글

JavaScript Bingo game source code - 자바스크립트 빙고게임 코드  (0) 2022.12.31
JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기)  (0) 2022.12.31
JavaScript ping pong game - 자바스크립트로 만든 핑퐁 게임  (0) 2022.12.30
제이쿼리(JQuery)를 사용하는 이유와 사용법  (0) 2022.10.13
자바스크립트(javascript) 기초 _ 함수와 매개변수 사용  (0) 2022.10.13

티스토리툴바