라라리라

_01원과점충돌 원과점충돌.html DOCTYPE html> Document 원과점충돌.js function drawarc(){ cnt.clearRect(0, 0, myCanvas.width, myCanvas.height); draw(); } function draw(){ cnt.beginPath(); cnt.arc(x, y , 반지름, 시작각도, 끝각도) if(check == true) cnt.fillStyle = "red"; else cnt.fillStyle = "blue"; cnt.fill(); cnt.closePath(); } window.addEventListener("click", (a)=>{ let my = a.offsetY; let mx = a.offsetX; check = checksqr..

fire.html DOCTYPE html> Document 총알발사 : space 문제점 : 총알이 한번에 여러발 발사된다. fire.js function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawRect(); bulletFire(); drawBullet(); moveBullet(); rect.cooldown++; } function drawRect(){ ctx.beginPath(); ctx.rect(rect.x, rect.y, rect.width, rect.height); ctx.fillStyle = rect.color; ctx.fill(); ctx.closePath(); } function bulletFire(){ /* [키문제점..

inputKey.html DOCTYPE html> Document F12 콘솔창을 열고 키보드를 눌러보세요. 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("myCanva..

rectDir.html DOCTYPE html> Document 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 DOCTYPE html> Document rectdirtext.js function drawrect(){ cnt.clearRect(0, 0, myCanvas.width, myCanv..

chesstest.html DOCTYPE html> Document chesstest.js function draw(){ let pawn = chessList[0] let knight = chessList[1]; let rook = chessList[2]; cnt.drawImage(img1, 0, 0, img1.width, img1.height) cnt.drawImage(img1, 0, 0, 80, 80, 0, 200, 80, 80); cnt.drawImage(img1, pawn.x, pawn.y, pawn.size, pawn.size, 120, 200, 80, 80); cnt.drawImage(img1, knight.x, knight.y, knight.size, knight.size, 240, 200,..

pointInRect.html DOCTYPE html> Document 네모를 클릭하세요. pointInRect.js function draw() { // 캔버스를 지운다. ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스를 다시 그린다. drawRect(); } function drawRect(){ ctx.beginPath(); ctx.rect(x, y, width, height); ctx.fill(); if(check){ ctx.fillStyle = "red"; }else{ ctx.fillStyle = "blue"; } ctx.closePath(); } window.addEventListener("click", (event) => { // 캔버스가 ..

FpsTest.html DOCTYPE html> Document FpsTest.js function drawCanvas(){ cnt.clearRect(0, 0, myCanvas.width , myCanvas.height); draw(); if(turn == true){ x += speed; if(x == myCanvas.width - width) { if(y == myCanvas.height - height) turn = !turn; else{ x = 0; y += height; } } } else { x -= speed; if(x == 0){ if(y == 0) turn = !turn; else{ x = myCanvas.width - width; y -= height; } } } } function d..

clicktest.html DOCTYPE html> Document clicktest.js function drawcircle(){ cnt.beginPath(); cnt.rect(x, y, 30, 30); cnt.fillStyle = "yellow"; cnt.stroke(); cnt.fill(); cnt.closePath(); } //======================================================== let myCanvas = document.querySelector(`#myCanvas`); let cnt = myCanvas.getContext(`2d`); let x = 0; let y = 0; let count = 0; window.addEventListener(`cl..