My footsteps

토요스터디 / 5주차 본문

Develop/곤부📙

토요스터디 / 5주차

밀김 2023. 3. 25. 17:18
728x90

 

 

 

 

 

 

 

 

 

 

 

 

 

주말 아침 8시부터 모여서 팀플 하는 삶..멋지다!

그와중에 몇시간이나 했는데 어제랑 진도 똑같은 삶..멋지다!

 

 

 

 

 

<!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 type="text/css">
        body {
            background-color: #1f1f1f;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
        }

        .canvas {
            width: 900px;
            height: 600px;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
            background: url('./미니게임\ 만든\ 배경.png') no-repeat center/cover;
        }

        .box1 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 30%; left: 33%;}
        .box2 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 45%; left: 33%;}
        .box3 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 60%; left: 33%;}
        .box4 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 75%; left: 33%;}
        .box5 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 30%; right: 33%;}
        .box6 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 45%; right: 33%;}
        .box7 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 60%; right: 33%;}
        .box8 {width: 50px; height: 23px; font-weight: bold; color: red; background-color: white; position: absolute; top: 75%; right: 33%;}

    </style>
    
</head>
<body>
    
    <canvas id="jsCanvas" class="canvas"></canvas>
    <script src="app.js"></script> 

    <div class="main-box">
        <img src="clear.png" style="display: none;" \id="img">
        <button class="box1" value="box1" onclick="box1click(event)">box1</button>
        <button class="box2" value="box2" onclick="box2click(event)">box2</button>
        <button class="box3" value="box3" onclick="box3click(event)">box3</button>
        <button class="box4" value="box4" onclick="box4click(event)">box4</button>
        <button class="box5" value="box4" onclick="box4click(event)">box4</button>
        <button class="box6" value="box3" onclick="box3click(event)">box3</button>
        <button class="box7" value="box2" onclick="box2click(event)">box2</button>
        <button class="box8" value="box1" onclick="box1click(event)">box1</button>
    </div>

</body>
</html>

 

 

 

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
//캔버스

const box1 = document.getElementsByClassName("box1");
const box2 = document.getElementsByClassName("box2");
const box3 = document.getElementsByClassName("box3");
const box4 = document.getElementsByClassName("box4");
const box5 = document.getElementsByClassName("box5");
const box6 = document.getElementsByClassName("box6");
const box7 = document.getElementsByClassName("box7");
const box8 = document.getElementsByClassName("box8");
const img = document.getElementById("img");
//html에서 불러오기


canvas.width = 900;
canvas.height = 600;
//캔버스 그림 그릴 범위

ctx.strokeStyle = 'white';
ctx.lineWidth = 18;
ctx.lineCap = 'round';
//캔버스 선

let painting = false;
//그림 그리기 초기화



function startPainting() {
    painting=true;
}
function stopPainting() {
    painting=false;
}



function onMouseMove(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    if(!painting) { //그림이 그려질때
        ctx.beginPath();
        ctx.moveTo(x, y);
    }
    else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}//onmove 마우스 움직일때




if (canvas) {
    canvas.addEventListener("mousemove", onMouseMove); //마우스 움직일때
    canvas.addEventListener("mousedown", startPainting); //마우스 버튼 누를때
    canvas.addEventListener("mouseup", stopPainting); //마우스 버튼 손뗄때
    canvas.addEventListener("mouseleave", stopPainting); //마우스가 요소에서 벗어날때
}

 

 

 

 

 

 

 

//많이 쓰이는 함수의 표현식

        var num = function(x,y){
            return x+y;
        }

        alert(num(6,7));

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
저작자표시 비영리 변경금지

'Develop > 곤부📙' 카테고리의 다른 글

토요스터디 / 6주차  (0) 2023.04.01
일요일 혼공 / (자바스크립트 onclick)  (0) 2023.03.26
일요일 혼공 / (오목 게임 함수화,생활코딩 static)  (0) 2023.03.19
토요스터디 / 4주차  (0) 2023.03.18
쪽지시험 / 2  (0) 2023.03.18