라라리라

2023.11.09 ~ 10 / Step 8 [DOM_사각형 충돌, 리스트, 클릭이동] - 코딩 87~88 일차 본문

코딩/2023 JavaScript DOM

2023.11.09 ~ 10 / Step 8 [DOM_사각형 충돌, 리스트, 클릭이동] - 코딩 87~88 일차

헤실 2023. 11. 10. 17:48

rectDir.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>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
    </canvas>
    <div class="testText"></div>
    <script src="rectDir.js"></script>
</body>
</html>

 

rectDir.js

 

function draw() {
    // 캔버스를 지운다.
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 캔버스를 다시 그린다.
    drawRect();

    //이동제어
    if(dir == "east"){
        x += speed ;
    }else if(dir == "west"){
        x -= speed;
    }

    //충돌제어
    if(x >= canvas.width - width){
        dir ="west";
    }
    else if(x < 0){
        dir ="east";
    }

    let testText = document.querySelector(".testText");
    testText.innerHTML = ``;
    testText.innerHTML += `x  : ${x} <br>`;
    testText.innerHTML += `y  : ${y} <br>`;
    testText.innerHTML += `dir  : ${dir} <br>`;
    testText.innerHTML += `speed : ${speed} <br>`;
}

function drawRect(){
    ctx.beginPath();

    ctx.rect(x, y, width, height);
    ctx.fillStyle = "blue";
    ctx.fill();

    ctx.closePath();
}

//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let x = 0;
let y = 0;
let dir = "east";
let width = 100;
let height = 100;
let speed = 2;

setInterval(draw, 10);

 

rectdirtext.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid black;">
        <script src="rectdirtext.js"></script>
</body>
</html>

 

rectdirtext.js

 

function drawrect(){
    cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
    if(speed > 10) speed = 10;
    if(dir == "east"){
        x += speed;
    } else if(dir == "west"){
        x -= speed;
    } else if(dir == "south"){
        y += speed;
    } else if(dir == "north"){
        y -= speed;
    }
   
   
    draw();
    if(x >= myCanvas.width - 100 && y <= 0) {dir = "south"; speed++; x = myCanvas.width - 100; y = 0;}
    else if(y >= myCanvas.height - 100 && x >= myCanvas.width - 100) {dir = "west"; speed++ ; y = myCanvas.height - 100; x = myCanvas.width - 100;}
    else if(x <= 0 && y >= myCanvas.height - 100) {dir = "north"; speed++; x = 0; y = myCanvas.height - 100;}
    else if(y <= 0 && x <= 0) {dir = "east"; speed++; x = 0; y = 0;}
}
function draw(){
    cnt.beginPath();
    cnt.rect(x, y, 100, 100)
    cnt.fillStyle = "red"
    cnt.fill();
    cnt.closePath();
}
//===================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext(`2d`);
let x = 0;
let y = 0;
let speed = 1;
let dir = "east"
setInterval(drawrect, 1)


 

rect.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid black;">
        <script src="rect.js"></script>
</body>
</html>

 

rect.js

 

function drawrect(){
    cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
    for(let i = 0; i < 4; i++){
    draw(nodeList[i]);
    draw_text(nodeList[i]);
}
}

function draw(node){
cnt.beginPath();
cnt.rect(node.x, node.y, node.width, node.height)
cnt.fillStyle = node.color
cnt.fill();
cnt.closePath();
};


function draw_text(node){
cnt.font = "25px Fira";
cnt.fillStyle = "white";
cnt.fillText(node.height, node.x + 6 , node.y + 30)
};
window.addEventListener(`click`, (a)=>{
    let mx = a.offsetX
    let my = a.offsetY
    for(let i = 0; i < nodeList.length; i++){
        let x = nodeList[i].x;
        let y = nodeList[i].y;
        let width = nodeList[i].width
        let height = nodeList[i].height

        if(x < mx && mx < x + width && y < my && my < y + height){
            if(nodeList[i].turn == true) {
                nodeList[i].height += 10;
                if(nodeList[i].height == 100) nodeList[i].turn = false;
            } else if(nodeList[i].turn == false){
                nodeList[i].height -= 10;
                if(nodeList[i].height == 40) nodeList[i].turn = true;
            }
        }
    }
})



//=================================

let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let nodeList = [];
let originx = 100;
let originy = 100;
let gap = 50;
let width = 50;
let height = 50;
let gameNumber = 1;
for(let i = 0; i < 4; i++){
let startx = originx * (i + 1) + gap
let starty = originy

let mynode = {
    "x": startx,
    "y": starty,
    "width": 50,
    "height": 50,
    "number": 10,
    "color": "red",
    "turn": true
}
nodeList.push(mynode);
}
setInterval(drawrect, 10)

 

rectList.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>
</head>
<body>
    <h1>사각형을 클릭하세요.</h1>
    <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
    </canvas>
    <div class="testText"></div>
    <script src="rectList.js"></script>
</body>
</html>

 

rectList.js

 

function draw() {
    // 캔버스를 지운다.
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 캔버스를 다시 그린다.
    for(let i = 0; i < rectList.length; i++){
        drawRect(rectList[i]);
        drawText(rectList[i]);
    }  
}

function drawRect(node){
    ctx.beginPath();
    ctx.rect(node.x, node.y, node.width, node.height);
    ctx.fillStyle = node.color;
    ctx.fill();
    ctx.closePath();
}

function drawText(node){
    ctx.font ="25px Fira";
    ctx.fillStyle = "white";
    ctx.fillText(node.number, node.x + 8, node.y + 28);
}

window.addEventListener('click', (event) => {
   
    let mx = event.offsetX;
    let my = event.offsetY;

    let testText = document.querySelector(".testText");
    testText.innerHTML = ``;
    testText.innerHTML += `mx  : ${my} <br>`;
    testText.innerHTML += `my : ${my} <br>`;

    for(let i = 0; i < rectList.length; i++){
        let x = rectList[i].x;
        let y = rectList[i].y;
        let width = rectList[i].width;
        let height = rectList[i].height;

        if(x < mx && mx < x + width && y < my && my < y + height){
            rectList[i].number = gameNumber;
            gameNumber += 1;      
        }

        // 출력
        testText.innerHTML += `x : ${x} y : ${y} width : ${width} height : ${height}<br>`;
    }
});

//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let originx = 100;
let originy = 100;
let gap = 50;
let width = 50;
let height = 50;

let rectList = [];
for(let i = 0; i < 4; i++){
    let startx = originx + i * width + i * gap;
    let starty = originy;
   
    let myRect = {
        "x" : startx,
        "y" : starty,
        "width" : width,
        "height" : height,
        "number" : 0,
        "color" : "blue",
    };
    rectList.push(myRect);
}
let gameNumber = 1;

setInterval(draw, 10);




 

rect.html

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myCanvas" width="800px" height="600px" style="border: 1px solid black;">
        <script src="./rect.js"></script>
</body>
</html>

 

rect.js

 

function drawrect(){
    cnt.clearRect(0, 0, myCanvas.width, myCanvas.height)
    for(let i = 0; i < nodeList.length; i++){
        draw(nodeList[i]);
        if(nodeList[i].check == false){
        nodeList[i].y += 2
        nodeList[i].color = "gray"
        if(nodeList[i].y == myCanvas.height - height){
            nodeList[i].check = true;
            nodeList[i].color = "red";
            nodeList[i].y = originy
        }
        }
    }
   
}
function draw(node){
    cnt.beginPath();
    cnt.rect(node.x, node.y, node.width, node.height)
    cnt.fillStyle = node.color;
    cnt.fill();
    cnt.closePath();
}
window.addEventListener("click", (a)=>{
    let mx = a.offsetX;
    let my = a.offsetY;
    for(let i = 0; i < nodeList.length; i++){
        let x = nodeList[i].x;
        let y = nodeList[i].y;
        let width = nodeList[i].width;
        let height = nodeList[i].height;
        let check = nodeList[i].check;

        if(x < mx && mx < x + width && y < my && my < y + height && check == true){
            nodeList[i].check = false;
            nodeList[i].y += 2;
        }
        /*else if(check == false){
            while(true){
                nodeList[i].y += 2
                if(nodeList[i].y == myCanvas.height - height) {
                    nodeList[i].check = true;
                    nodeList[i].y = originy;
                    break;
                }
            }
        } */
    }
})
//=============================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let nodeList = [];
let originx = 100;
let originy = 100;
let gap = 50;
let width = 50;
let height = 50;
for(let i = 0; i < 4; i++){
    let startx = originx * (i + 1) + gap
    let starty = originy
    let mynode =
    {
    "x": startx,
    "y": starty,
    "color": "red",
    "width": 50,
    "height": 50,
    "check": true
    }
    nodeList.push(mynode);
}
setInterval(drawrect, 10);

 

rectListMove.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>
</head>
<body>
    <h1>사각형을 클릭하세요.</h1>
    <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas>
    <div class="testText"></div>
    <script src="rectListMove.js"></script>
</body>
</html>

 

rectListMove.js

 

function draw() {
    // 캔버스를 지운다.
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 캔버스를 다시 그린다.
    for(let i = 0; i < rectList.length; i++){
        drawRect(rectList[i]);
    }    
   
    for(let i = 0; i < rectList.length; i++){
        if(rectList[i].check == true){
            rectList[i].y += rectList[i].speed;

            if(rectList[i].y + rectList[i].height > canvas.height){
                rectList[i].y = originy;
                rectList[i].check = false;
                rectList[i].color = "blue";
            }
        }
    }

    let testText = document.querySelector(".testText");
    testText.innerHTML = ``;
    for(let i = 0; i < rectList.length; i++){
        testText.innerHTML += `x : ${rectList[i].x} y : ${rectList[i].y} width : ${rectList[i].width} height : ${rectList[i].height} <br>`;
        testText.innerHTML += `check : ${rectList[i].check}  <br>`;
    }

}

function drawRect(node){
    ctx.beginPath();
    ctx.rect(node.x, node.y, node.width, node.height);
    ctx.fillStyle = node.color;
    ctx.fill();
    ctx.closePath();
}


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

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

    for(let i = 0; i < rectList.length; i++){
        let x = rectList[i].x;
        let y = rectList[i].y;
        let width = rectList[i].width;
        let height = rectList[i].height;
        let check = rectList[i].check;
        if(check == false){
            if(x < mx && mx < x + width && y < my && my < y + height){
                rectList[i].check = true;
                rectList[i].color = "red";
            }
        }
       
    }
});
//-------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let originx = 100;
let originy = 100;
let gap = 50;
let width = 50;
let height = 50;

let rectList = [];

for(let i = 0; i < 4; i++){

    let startx = originx + i * width + i * gap;
    let starty = originy;
   
    let myRect = {
        "x" : startx,
        "y" : starty,
        "width" : width,
        "height" : height,
        "color" : "blue",
        "speed" : 2,
        "check" : false,
    };
    rectList.push(myRect);
}

setInterval(draw, 10);



 

 

저작자표시

'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글

2023.11.14 / Step 8 [DOM_캔버스키보드] - 코딩 90일차  (0) 2023.11.14
2023.11.13 / Step 8 [DOM_캔버스키보드] - 코딩 89일차  (0) 2023.11.13
2023.11.08 / Step 8 [DOM_버튼이미지] - 코딩 86 일차  (0) 2023.11.08
2023.11.07 / Step 8 [DOM_포인트인 렉트] - 코딩 85 일차  (0) 2023.11.07
2023.11.06 / Step 8 [DOM_Fps세팅] - 코딩 84 일차  (0) 2023.11.06
'코딩/2023 JavaScript DOM' Related Articles more