코딩/1-JavaScript

05_게임_오목

tree0505 2025. 6. 12. 16:57
반응형
  • 05_게임_오목
  • omok.html
  • <!DOCTYPE html>
    <html lang="ko">
    <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>Document</title>
        <style>
            #game{
                width: 100%;
            }
            #game .layout{
                margin: 0 auto;
                text-align: center;
            }
            #game .title{
                padding: 10px 0px;
            }
           
            .menu{
                padding-top: 10px;
            }
        </style>
    </head>
    <body>
        <div id="game">
            <div class="layout">
                <div class="title">
                    <h1>오목</h1>
                </div>
                <canvas id="myCanvas" width="550" height="550" style="border: 1px solid black;"></canvas>  
                <div class="menu">
                    <button id="gridCheck">그리드 확인</button>
                    <button id="reset">리셋</button>        
                </div>
                <div class="testText"></div>
            </div>
        </div>
       
        <script src="omok.js"></script>
    </body>
    </html>

    <!--
        참고사이트
    -->
  • omok.js

  • function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if(showGrid){
            for(let i = 0; i < areaArcList.length; i++){    
                drawArc(areaArcList[i]);        
            }
        }
        drawGrid();
        for(let i = 0; i < whiteArcList.length; i++){    
            drawArc(whiteArcList[i]);        
        }
        for(let i = 0; i < blackArcList.length; i++){    
            drawArc(blackArcList[i]);        
        }

    }
    function setAreaArcList(){
       
        let originx = 50; // 시작위치
        let originy = 50; // 시작위치
        let linegap = 50;  // 그리드 간격
        let lineCount = 10; // 선 개수조절
        for(let i = 0; i < lineCount; i++){
            for(let j = 0; j < lineCount; j++){
                let arc = {
                    "x" : originx + j * linegap,
                    "y" : originy + i * linegap,
                    "radius" : 20,
                    "color" : "lightgray",
                };
                areaArcList.push(arc);
            }
        }
    }
    function drawArc(arc){

        // 외각선
        ctx.beginPath();
        ctx.arc(arc.x, arc.y, arc.radius, 0 , Math.PI * 2);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(arc.x, arc.y, arc.radius, 0 , Math.PI * 2);
        ctx.fillStyle = arc.color;
        ctx.fill();
       
        ctx.closePath();
    }

    function drawGrid(){
        /*
            오목판(그리드) 만들기(10 * 10)
        */
        ctx.beginPath();
       
        let originx = 50; // 시작위치
        let originy = 50; // 시작위치
        let linegap = 50;  // 그리드 간격
        let lineCount = 10; // 선 개수조절

        // 세로 그리기
        for(let i = 0; i < lineCount; i++){
            let startx = originx + linegap * i;
            let starty = originy;
            let endx = startx ;
            let endy = linegap * lineCount + originy - linegap;
            ctx.moveTo(startx, starty);
            ctx.lineTo(endx, endy);
            ctx.stroke();        
        }

        // 가로 그리기
        for(let i = 0; i < lineCount;  i++){
            let starty = originx + linegap * i;
            let startx = originy;
            let endy = starty;
            let endx = linegap * lineCount + originx - linegap;
            ctx.moveTo(startx ,  starty);
            ctx.lineTo(endx, endy);
            ctx.stroke();        
        }
       
        ctx.closePath();
    }


    function getPointiInArc(x , y , mx  , my , radius){
        let hypotenusePow = (x-mx) * (x-mx) + (y-my) * (y-my);
        let hypotenuse = Math.sqrt(hypotenusePow);
       
        if(hypotenuse <= radius){
            return true;
        }
        return false;
    }


    window.addEventListener('mousedown', (event) => {

        let mx = event.clientX - ctx.canvas.offsetLeft;
        let my = event.clientY - ctx.canvas.offsetTop;

        for(let i = 0; i < areaArcList.length; i++){
            let check = getPointiInArc(areaArcList[i].x , areaArcList[i].y , mx , my  , areaArcList[i].radius);
            if(check){
                let arc = {
                    "x" : areaArcList[i].x,
                    "y" : areaArcList[i].y,
                    "radius" : 20,
                    "color" : turn,
                };
                areaArcList.splice(i , 1);
                if(turn == "white"){
                    whiteArcList.push(arc);
                    turn = "black"
                }else{
                    blackArcList.push(arc);
                    turn = "white"
                }
               
                break;
            }
        }
    });

    let showGrid = false;
    let gridCheckButton = document.getElementById("gridCheck");
    gridCheckButton.addEventListener('click', (e) =>{
        if(showGrid == true){
            showGrid = false;
        }else{
            showGrid = true;
        }
    });

    let resetButton = document.getElementById("reset");
    resetButton.addEventListener('click', (e) =>{
        areaArcList = []
        whiteArcList = []
        blackArcList = []
        turn = "white"; // black
        showGrid = false;
        setAreaArcList();
    });


    //-------------------------------------------------
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");
    let areaArcList = []
    let whiteArcList = []
    let blackArcList = []
    let turn = "white"; // black
    setAreaArcList();
    setInterval(draw , 10);


 

반응형

'코딩 > 1-JavaScript' 카테고리의 다른 글

E02_애니메이션 => 02단계_페이지이동  (0) 2025.06.13
E02_애니메이션 => 01단계_타이틀  (0) 2025.06.13
04_캔버스충돌처리  (1) 2025.06.12
03_캔버스키보드  (2) 2025.06.12
_05_버튼이미지 ~ _09_삼각함수 ( 4 ~ 7 )  (0) 2025.06.11

'코딩/1-JavaScript'의 다른글

  • 현재글05_게임_오목

관련글

티스토리툴바