라라리라

2023.11.13 / Step 8 [DOM_캔버스키보드] - 코딩 89일차 본문

코딩/2023 JavaScript DOM

2023.11.13 / Step 8 [DOM_캔버스키보드] - 코딩 89일차

헤실 2023. 11. 13. 17:35

inputKey.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>F12 콘솔창을 열고 키보드를 눌러보세요.</h1>
    <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
    </canvas>
    <script src="inputKey.js"></script>
</body>
</html>

 

inputKey.js

 

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

window.addEventListener("keydown", (e) => {
    console.log("down = " + e.code);
});

window.addEventListener("keyup", (e) => {
    console.log("up = " + e.code);
});

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


 

키보드.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;"></canvas>
    <script src="키보드.js"></script>
</body>
</html>

 

키보드.js

 

function drawCanvas(){
    cnt.clearRect(0, 0, myCanvas.width, myCanvas.height)
}
window.addEventListener(`keydown`, (a)=>{
    console.log(`keydown =  ${a.code}`);
});
window.addEventListener(`keyup`, (a)=>{
    console.log(`keyup = ${a.code}`)
});
//========================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");

 

rectMoveKey.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>키보드 A D S W 를 눌러보세요.</h1>
    <canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;">
    </canvas>
    <script src="rectMoveKey.js"></script>
</body>
</html>

 

 

rectMoveKey.js

 

function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawRect();

    moveRect();

}

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

function moveRect(){
    if(key.right){
        myRect.x += myRect.speed;
    }
    if(key.left){
        myRect.x -= myRect.speed;
    }
    if(key.up){
        myRect.y -= myRect.speed;
    }
    if(key.down){
        myRect.y += myRect.speed;
    }
}

//-------------------------------------------------

// {} JSON은 . 으로 사용할수도있고, [] 로 사용할수도있다.
window.addEventListener("keydown", (e) => {
    if(e.code == 'KeyD') {        
        key.right = true;
        // key["right"] = true;
    }
    else  if(e.code == 'KeyA') {  
        key.left = true;
        // key["left"]  = true;
    }
    else if(e.code == 'KeyW') {    
        key.up = true;
        // key["up"] = true;
    }
    else  if(e.code == 'KeyS') {  
        key.down = true;
        //key["down"]  = true;
    }
    console.log(e.code);
});

window.addEventListener("keyup", (e) => {
    if(e.code == 'KeyD') {      
       // key["right"] = false;
        key.right = false;
    }
    else  if(e.code == 'KeyA') {  
       // key["left"]  = false;
        key.left = false;
    }
    else if(e.code == 'KeyW') {    
       // key["up"] = false;
        key.up = false;
    }
    else if(e.code == 'KeyS') {  
        //key["down"]  = false;
        key.down = false;
    }
});

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

let key = { "right" : false, "left" : false, "up" : false, "down" : false};
let myRect = {
    "x" : 100,
    "y" : 100,
    "width" : 50,
    "height" : 50,
    "speed" : 2,
    "color" : "blue"
};
setInterval(draw, 10);

 

 

사각형.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;"></canvas>
    <script src="./사각형.js"></script>
</body>
</html>

 

사각형.js

 

function drawrect(){
    cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
    draw();
    moveRect();
}
function draw(){
    cnt.beginPath();
    cnt.rect(myrect.x, myrect.y, myrect.width, myrect.height);
    cnt.fillStyle = myrect.color;
    cnt.fill();
    cnt.closePath();
}
function moveRect(){
    if(key.left) myrect.x -= myrect.speed;
    if(key.up) myrect.y -= myrect.speed;
    if(key.down) myrect.y += myrect.speed;
    if(key.right) myrect.x += myrect.speed;
}
window.addEventListener(`keydown`, (a)=>{
    if(a.code == "KeyA") key.left = true;
    else if(a.code == "KeyW") key.up = true;
    else if(a.code == "KeyD") key.right = true;
    else if(a.code == "KeyS") key.down = true;
});
window.addEventListener(`keyup`, (a)=>{
    if(a.code == "KeyA") key.left = false;
    else if(a.code == "KeyW") key.up = false;
    else if(a.code == "KeyD") key.right = false;
    else if(a.code == "KeyS") key.down = false;
});
//==================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let key = { "left": false, "right": false, "up": false, "down": false}
let myrect =
{   "x": 100,
    "y": 100,
    "color": "red",
    "speed": 2,
    "width": 50,
    "height": 50
};
setInterval(drawrect, 10);

 

사각형이동.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;"></canvas>
    <script src="사각형이동.js"></script>
</body>
</html>

 

 

사각형이동.js

 

function drawrect(){
    cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
    draw();
   
}
function draw(){
    cnt.beginPath();
    cnt.rect(originx, originy, size, size)
    cnt.fillStyle = "blue"
    cnt.fill();
    cnt.closePath();
}
window.addEventListener(`keydown` ,(a)=>{
    let key = a.code;
    if(key == "KeyA")originx -= speed;
    if(key == "KeyW")originy -= speed;
    if(key == "KeyD")originx += speed;
    if(key == "KeyS")originy += speed;
})
//============================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let originx = 100;
let originy = 100;
let size = 50;
let speed = 2;
setInterval(drawrect, 10);

 

저작자표시

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

2023.11.15~16 / Step 8 [DOM_캔버스충돌처리] - 코딩 91~92일차  (0) 2023.11.16
2023.11.14 / Step 8 [DOM_캔버스키보드] - 코딩 90일차  (0) 2023.11.14
2023.11.09 ~ 10 / Step 8 [DOM_사각형 충돌, 리스트, 클릭이동] - 코딩 87~88 일차  (0) 2023.11.10
2023.11.08 / Step 8 [DOM_버튼이미지] - 코딩 86 일차  (0) 2023.11.08
2023.11.07 / Step 8 [DOM_포인트인 렉트] - 코딩 85 일차  (0) 2023.11.07
'코딩/2023 JavaScript DOM' Related Articles more