라라리라
2023.11.15~16 / Step 8 [DOM_캔버스충돌처리] - 코딩 91~92일차 본문
_01원과점충돌
원과점충돌.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 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 = checksqrt(x, y, mx, my)
});
function checksqrt(x, y, mx, my){
let temp = Math.abs((x - mx) * (x - mx) + (y - my) * (y - my));
let result = Math.sqrt(temp)
if(result <= 반지름) return true;
else return false;
};
//======================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let x = 100;
let y = 100;
let 반지름 = 50;
let 시작각도 = 0;
let 끝각도 = Math.PI * 2;
let check = false;
setInterval(drawarc, 10);
_02_원과원충돌
원과원충돌.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 drawcircle(){
cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
draw(circle2);
draw(circle1);
movecircle();
checkcircle();
}
function draw(name){
cnt.beginPath()
cnt.arc(name.x, name.y, name.반지름, 0, Math.PI * 2)
cnt.fillStyle = name.색상
cnt.fill();
cnt.closePath()
}
function movecircle(){
if(key.left) circle1.x -= circle1.speed;
if(key.up) circle1.y -= circle1.speed;
if(key.right) circle1.x += circle1.speed;
if(key.down) circle1.y += circle1.speed;
}
function checkcircle(){
let x1 = circle1.x;
let y1 = circle1.y;
let 반지름1 = circle1.반지름;
let x2 = circle2.x;
let y2 = circle2.y;
let 반지름2 = circle2.반지름;
let 반지름total = 반지름1 + 반지름2;
let temp = Math.abs((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) );
let result = Math.sqrt(temp)
if(result <= 반지름total){
circle1.색상 = "red"
}else circle1.색상 = "blue"
}
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 circle1 = {
"x": 100,
"y": 100,
"반지름": 50,
"색상": "blue",
"speed": 2
}
let circle2 = {
"x": 400,
"y": 400,
"반지름": 100,
"색상": "green"
}
let key = {"left": false , "up": false, "right": false, "down": false}
setInterval(drawcircle, 10)
_03_네모와네모충돌
네모네모충돌충돌.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(rect2);
draw(rect1);
moveRect();
check = checkrect();
}
function draw(rect){
cnt.beginPath();
cnt.rect(rect.x, rect.y, rect.size, rect.size);
cnt.fillStyle = rect.color;
cnt.fill();
cnt.closePath();
}
function moveRect(){
if(key.left) rect1.x -= rect1.speed;
if(key.up) rect1.y -= rect1.speed;
if(key.right) rect1.x += rect1.speed;
if(key.down) rect1.y += rect1.speed;
}
function checkrect(){
let left1 = rect1.x;
let rigth1 = rect1.x + rect1.size;
let top1 = rect1.y;
let bottom1 = rect1.y + rect1.size;
let left2 = rect2.x;
let right2 = rect2.x + rect2.size;
let top2 = rect2.y;
let bottom2 = rect2.y + rect2.size;
if(left1 < right2 && top1 < bottom2 && rigth1 > left2 && bottom1 > top2) {
rect1.color = "red"
}
else rect1.color = "blue"
}
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 rect1 = {
"x": 100,
"y": 100,
"size": 50,
"speed": 2,
"color": "blue"
}
let rect2 = {
"x": 400,
"y": 400,
"size": 100,
"color": "green"
}
setInterval(drawrect, 10)
_04_네모와원충돌
네모원충돌.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>
<div id="footer"></div>
</body>
</html>
네모원충돌.js
function drawCanvas(){
cnt.clearRect(0, 0, myCanvas.width, myCanvas.height)
drawarc();
drawrect();
moveRect();
let check = checkrect();
if(check){
myrect.color = "red"
} else myrect.color = "blue"
}
function drawrect(){
cnt.beginPath();
cnt.rect(myrect.x, myrect.y, myrect.size, myrect.size);
cnt.fillStyle = myrect.color;
cnt.fill();
cnt.closePath();
}
function drawarc(){
cnt.beginPath();
cnt.arc(myarc.x, myarc.y, myarc.radius, 0, Math.PI * 2)
cnt.fillStyle = myarc.color;
cnt.fill();
cnt.closePath();
}
function moveRect(){
if(key.left) myrect.x -= myrect.speed;
if(key.right) myrect.x += myrect.speed;
if(key.up) myrect.y -= myrect.speed;
if(key.down) myrect.y += myrect.speed;
}
function checkrect(){
if(Math.sqrt(Math.abs(((myrect.x + myrect.size) - myarc.x) * ((myrect.x + myrect.size) - myarc.x) + (myrect.y - myarc.y) * (myrect.y - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x - myarc.x) * (myrect.x - myarc.x) + (myrect.y - myarc.y) * (myrect.y - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x + myrect.size - myarc.x) * (myrect.x + myrect.size - myarc.x) + (myrect.y + myrect.size - myarc.y) * (myrect.y + myrect.size - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x - myarc.x) * (myrect.x - myarc.x) + (myrect.y + myrect.size - myarc.y) * (myrect.y + myrect.size - myarc.y)))
<= myarc.radius)return true;
let temprect = {
"x": myrect.x - myarc.radius,
"y": myrect.y - myarc.radius,
"width": myrect.size + myarc.radius * 2
}
if((myrect.x < myarc.x && myarc.x < myrect.x + myrect.size) || (myrect.y < myarc.y && myarc.y < myrect.y + myrect.size)){
if(temprect.x < myarc.x && myarc.x < temprect.x + temprect.width
&& temprect.y < myarc.y && myarc.y < temprect.y + temprect.width)
return true;
}
let $footer = document.querySelector("#footer");
let temp = `검사 : ${temprect.x} , ${temprect.y}<br><br>`;
temp += `사각형 : ${myrect.x} , ${myrect.y}<br><br>`;
temp += `원 : ${myarc.x} , ${myarc.y}, ${myarc.radius} <br><br>`;
$footer.innerHTML = temp;
}
window.addEventListener("keydown", (a)=>{
if(a.code == "KeyA") key.left = true;
else if(a.code == "KeyD") key.right = true;
else if(a.code == "KeyW") key.up = true;
else if(a.code == "KeyS") key.down = true;
});
window.addEventListener("keyup", (a)=>{
if(a.code == "KeyA") key.left = false;
else if(a.code == "KeyD") key.right = false;
else if(a.code == "KeyW") key.up = 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,
"size": 100,
"speed": 2,
"color": "blue"
}
let myarc = {
"x": 400,
"y": 300,
"radius": 70,
"color": "green"
}
setInterval(drawCanvas, 10)
_05_원과원리스트충돌
원과원리스트충돌.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)
for(let i = 0; i < arcList.length; i++){
drawarc(arcList[i]);
}
drawarc(myarc);
movearc();
checkarc(myarc, arcList);
}
function checkarc(myarc, arcList){
let count = 0;
let x1 = myarc.x;
let y1 = myarc.y;
let radius1 = myarc.radius;
for(let i = 0; i < arcList.length; i++){
let x2 = arcList[i].x;
let y2 = arcList[i].y;
let radius2 = arcList[i].radius;
let totalradius = radius1 + radius2;
let temp = Math.sqrt(Math.abs((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)));
if(temp < totalradius) count++
}
if(count == 0) myarc.color = "blue";
else myarc.color = "red"
}
function drawarc(name){
cnt.beginPath();
cnt.arc(name.x, name.y, name.radius, 0, Math.PI * 2)
cnt.fillStyle = name.color;
cnt.fill();
cnt.closePath();
}
function movearc(){
if(key.left)myarc.x -= myarc.speed;
if(key.up)myarc.y -= myarc.speed;
if(key.right)myarc.x += myarc.speed;
if(key.down)myarc.y += myarc.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, "up": false, "right": false, "down": false}
let myarc = {
"x": 100,
"y": 100,
"radius": 30,
"color": "blue",
"speed": 2
}
let arcList= [
{
"x": 100,
"y": 300,
"radius": 40,
"color": "green"
},
{
"x": 220,
"y": 300,
"radius": 40,
"color": "green"
},
{
"x": 340,
"y": 300,
"radius": 40,
"color": "green"
},
{
"x": 460,
"y": 300,
"radius": 40,
"color": "green"
},
{
"x": 580,
"y": 300,
"radius": 40,
"color": "green"
}
];
setInterval(drawcanvas, 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);
for(let i = 0; i < rectList.length; i++){
draw(rectList[i]);
}
draw(myrect);
move();
checkrect(myrect, rectList);
}
function checkrect(myrect, rectList){
let count = 0;
let left1 = myrect.x;
let top1 = myrect.y;
let right1 = myrect.x + myrect.size;
let bottom1 = myrect.y + myrect.size;
for(let i = 0; i < rectList.length; i++){
let left2 = rectList[i].x;
let top2 = rectList[i].y;
let right2 = rectList[i].x + rectList[i].size;
let bottom2 = rectList[i].y + rectList[i].size;
if(left1 < right2 && right1 > left2 && top1 < bottom2 && bottom1 > top2) count++;
}
if(count != 0) myrect.color = "red"
else myrect.color = "blue"
}
function move(){
if(key.left) myrect.x -= myrect.speed;
if(key.right) myrect.x += myrect.speed;
if(key.up) myrect.y -= myrect.speed;
if(key.down) myrect.y += myrect.speed;
}
function drawrect(){
for(let i = 0; i < 5; i++){
let originx = 100;
let originy = 300;
let gap = 100;
let size = 50;
let startx = originx + i * size + i * gap;
let rect = {
"x" : startx,
"y" : originy ,
"size" : 50,
"color" : "green"
};
rectList.push(rect);
}
}
function draw(a){
cnt.beginPath();
cnt.rect(a.x, a.y, a.size, a.size);
cnt.fillStyle = a.color;
cnt.fill()
cnt.closePath();
}
window.addEventListener(`keydown`, (a)=>{
if(a.code == "KeyA") key.left = true;
else if(a.code == "KeyD") key.right = true;
else if(a.code == "KeyW") key.up = true;
else if(a.code == "KeyS") key.down = true;
});
window.addEventListener(`keyup`, (a)=>{
if(a.code == "KeyA") key.left = false;
else if(a.code == "KeyD") key.right = false;
else if(a.code == "KeyW") key.up = false;
else if(a.code == "KeyS") key.down = false;
});
//=====================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let rectList = [];
let key = {"left": false, "right": false, "up": false, "down": false}
let myrect = {
"x": 100,
"y": 100,
"size": 50,
"speed": 2,
"color": "blue"
}
drawrect();
setInterval(drawCanvas, 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="600" style="border: 1px solid black;"></canvas>
<script src="./네모와원리스트충돌.js"></script>
</body>
</html>
네모와원리스트충돌.js
function drawCanvas(){
cnt.clearRect(0, 0, myCanvas.width, myCanvas.height);
for(let i = 0; i < arcList.length; i++){
drawarc(arcList[i]);
}
drawrect();
move();
checkrectarc(myrect, arcList);
}
function checkrectarc(myrect, arcList){
let count = 0;
for(let i = 0; i < arcList.length; i++){
if(checkrect(myrect, arcList[i])) count++;
}
if(count != 0) myrect.color = "red"
else myrect.color = "blue";
}
function checkrect(myrect, myarc){
if(Math.sqrt(Math.abs(((myrect.x + myrect.size) - myarc.x) * ((myrect.x + myrect.size) - myarc.x) + (myrect.y - myarc.y) * (myrect.y - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x - myarc.x) * (myrect.x - myarc.x) + (myrect.y - myarc.y) * (myrect.y - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x + myrect.size - myarc.x) * (myrect.x + myrect.size - myarc.x) + (myrect.y + myrect.size - myarc.y) * (myrect.y + myrect.size - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x - myarc.x) * (myrect.x - myarc.x) + (myrect.y + myrect.size - myarc.y) * (myrect.y + myrect.size - myarc.y)))
<= myarc.radius)return true;
let temprect = {
"x": myrect.x - myarc.radius,
"y": myrect.y - myarc.radius,
"width": myrect.size + myarc.radius * 2
}
if((myrect.x < myarc.x && myarc.x < myrect.x + myrect.size) || (myrect.y < myarc.y && myarc.y < myrect.y + myrect.size)){
if(temprect.x < myarc.x && myarc.x < temprect.x + temprect.width
&& temprect.y < myarc.y && myarc.y < temprect.y + temprect.width)
return true;
}
}
function drawarc(arc){
cnt.beginPath();
cnt.arc(arc.x, arc.y, arc.radius, 0, 2 * Math.PI);
cnt.fillStyle = arc.color;
cnt.fill();
cnt.closePath();
}
function drawrect(){
cnt.beginPath();
cnt.rect(myrect.x, myrect.y, myrect.size, myrect.size)
cnt.fillStyle = myrect.color;
cnt.fill();
cnt.closePath();
}
function makearc(){
let originx = 100;
let originy = 300;
let radius = 50;
let gap = 100;
for(let i = 0; i < 5; i++){
let startx = originx + i * radius + gap * i // 100 (150) (300) //100 250 400 550
arc = {
"x": startx,
"y": originy,
"radius": radius,
"color": "green"
}
arcList.push(arc);
}
}
function move(){
if(key.left) myrect.x -= myrect.speed;
if(key.right) myrect.x += myrect.speed;
if(key.up) myrect.y -= myrect.speed;
if(key.down) myrect.y += 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 arcList = [];
let key = {"left": false, "rigth": false, "up": false, "down": false}
let myrect = {
"x": 100,
"y": 100,
"size": 50,
"color": "blue",
"speed": 2
}
makearc();
setInterval(drawCanvas, 10);
_06_네모클릭이동
rectClickMove.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>
<script src="rectClickMove.js"></script>
<div class="testText"></div>
</body>
</html>
rectClickMove.js
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRect(myRect);
changeColor(myRect);
}
function drawRect(rect){
ctx.beginPath();
ctx.rect(rect.x, rect.y, rect.width, rect.height);
ctx.fillStyle = rect.color;
ctx.fill();
ctx.closePath();
}
function getPointInRect(x, y, rc){
let left = rc.x;
let right = rc.x + rc.width;
let top = rc.y;
let bottom = rc.y + rc.height;
if(left < x && x < right && top < y && y < bottom){
return true;
}
return false;
}
function changeColor(rect){
if(rect.state == "none"){
rect.color = "blue";
}else if(rect.state == "over"){
rect.color = "red";
}else if(rect.state == "click"){
rect.color = "green"
}
}
//-------------------------------------------------
/*
mousedown : 마우스 클릭할 때
mousemove : 마우스가 움직일 때
mouseup : 마우에서 손을 뗄 때
*/
window.addEventListener("mousedown", (event) => {
let mx = event.offsetX
let my = event.offsetY
if(getPointInRect(mx, my, myRect)){
myRect.state = "click";
myRect.gapX = mx - myRect.x;
myRect.gapY = my - myRect.y;
}
});
window.addEventListener("mousemove", (event) =>{
let mx = event.offsetX
let my = event.offsetY
if(myRect.state == "click"){
myRect.x = mx - myRect.gapX;
myRect.y = my - myRect.gapY;
return;
}
if(getPointInRect(mx, my, myRect)){
myRect.state = "over";
}else{
myRect.state = "none";
}
});
window.addEventListener("mouseup", (event) => {
let mx = event.offsetX
let my = event.offsetY
if(getPointInRect(mx, my, myRect)){
myRect.state = "over";
}else{
myRect.state = "none";
}
});
//----------------------------------------------------------------------------
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let myRect = {
"x" : 100,
"y" : 100,
"width" : 150,
"height" : 150,
"color" : "blue",
"state" : "none", // none, over, click
"gapX" : 0,
"gapY" : 0
};
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);
draw();
changecolor();
move();
}
function draw(){
cnt.beginPath();
cnt.rect(myrect.x, myrect.y, myrect.size, myrect.size)
cnt.fillStyle = myrect.color;
cnt.fill();
cnt.closePath();
}
function changecolor(){
if(myrect.state == "none") myrect.color = "coral"
else if(myrect.state == "over") myrect.color = "lightgray"
else if(myrect.state == "move") myrect.color = "lightgreen"
}
window.addEventListener(`mousemove`, (a)=>{
let my = a.offsetY;
let mx = a.offsetX;
if(myrect.state == "move"){
myrect.y = my - myrect.gapy;
myrect.x = mx - myrect.gapx;
return;
}
if(myrect.x < mx && mx < myrect.x + myrect.size && myrect.y < my && my < myrect.y + myrect.size){
myrect.state = "over"
}else myrect.state = "none"
});
window.addEventListener(`mousedown`, (a)=>{
let my = a.offsetY;
let mx = a.offsetX;
if(myrect.state == "over") {
myrect.state = "move"
myrect.gapy = my - myrect.y;
myrect.gapx = mx - myrect.x;
}
});
window.addEventListener(`mouseup`, (a)=>{
let my=a.offsetY;
let mx=a.offsetX;
if(myrect.x < mx && mx < myrect.x + myrect.size && myrect.y < my && my < myrect.y + myrect.size){
myrect.state = "over"
}
})
//=====================================================
let myCanvas = document.querySelector(`#myCanvas`)
let cnt = myCanvas.getContext(`2d`);
let myrect = {
"x": 100,
"y": 100,
"size": 100,
"color": "coral",
"state": "none",
"gapy": 0,
"gapx": 0
}
setInterval(drawCanvas, 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="600px" height="600px" style="border: 1px solid black;"></canvas>
<script src="./네모클릭이동.js"></script>
<div id="footer"></div>
</body>
</html>
네모클릭이동.js
function drawCanvas(){
cnt.clearRect(0, 0, myCanvas.width, myCanvas.height)
drawrect(myrect);
rectcolor(myrect);
}
function drawrect(myrect){
cnt.beginPath();
cnt.rect(myrect.x, myrect.y, myrect.size, myrect.size)
cnt.fillStyle = myrect.color;
cnt.fill();
cnt.closePath();
}
function rectcolor(rect){
if(rect.state == "none") rect.color = "blue";
else if(rect.state == "mouseover") rect.color = "lightgreen";
else if(rect.state == "move") rect.color = "coral";
}
function checkrect(x, y, myrect){
if(myrect.x < x && x < (myrect.x + myrect.size) && myrect.y < y && y < (myrect.y + myrect.size)){
return true;
} else return false;
}
window.addEventListener(`mousemove`, (a)=>{
let my = a.offsetY;
let mx = a.offsetX;
let $footer = document.querySelector("#footer");
let tag = `사각형의 상태 ${myrect.state} 마우스의 좌표 x : ${mx} y : ${my} 사각형의 좌표 x: ${myrect.x} y: ${myrect.y}`
$footer.innerHTML = tag
if(myrect.state == "move"){
myrect.y = my - myrect.gapy
myrect.x = mx - myrect.gapx
return;
}
if(checkrect(mx, my, myrect)){
myrect.state = "mouseover"
} else {
myrect.state = "none"
}
});
window.addEventListener(`mousedown`, (a)=>{
let my = a.offsetY;
let mx = a.offsetX;
if(checkrect(mx, my, myrect)){
myrect.state = "move"
myrect.gapy = my - myrect.y;
myrect.gapx = mx - myrect.x;
}
});
window.addEventListener(`mouseup`, (a)=>{
let my = a.offsetY;
let mx = a.offsetX;
if(checkrect(mx, my, myrect)){
myrect.state = "mouseover"
}
});
//===========================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext("2d");
let myrect = {
"x": 100,
"y": 100,
"size": 100,
"color": "blue",
"state": "none",
"gapx": 0,
"gapy": 0
}
setInterval(drawCanvas, 10)
_07_슈팅게임
슈팅게임.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);
for(let i = 0; i < arcList.length; i++){
drawarc(arcList[i]);
}
movearc();
drawrect();
firebullet();
drawbullet();
movebullet();
move();
checkbullet(bulletList, arcList)
checkrectarc(myrect, arcList);
myrect.cooldown++;
}
function checkbullet(bulletList, arcList){
for(let i = 0; i < arcList.length; i++){
for(let j = 0; j < bulletList.length; j++){
if(checkrect(bulletList[j], arcList[i])){
arcList.splice(i,1)
bulletList.splice(j,1)
}
}
}
}
function movebullet(){
for(let i = 0; i < bulletList.length; i++){
bulletList[i].y -= bulletList[i].speed;
if(bulletList[i].y < 0) bulletList.splice(i,1)
}
}
function drawbullet(){
cnt.beginPath();
for(let i = 0; i < bulletList.length; i++){
cnt.rect(bulletList[i].x, bulletList[i].y, bulletList[i].width, bulletList[i].height);
cnt.fillStyle = bulletList[i].color;
cnt.fill();
}
cnt.closePath();
}
function firebullet(){
if(key.fire == true && bulletList.length < bulletMax){
if(myrect.cooldown >= myrect.cooldownMax){
myrect.cooldown = 0;
let bullet = {
"x" : myrect.x + 15,
"y" : myrect.y - 15,
"width" : 20,
"height" : 20,
"speed" : 5,
"color" : "black",
}
bulletList.push(bullet)
}
}
}
function movearc(){
for(let i = 0; i < arcList.length; i++){
if(arcList[i].y >= 800) arcList.splice(i, 1)
arcList[i].y += arcList[i].speed;
}
}
function checkrectarc(myrect, arcList){
let count = 0;
for(let i = 0; i < arcList.length; i++){
if(checkrect(myrect, arcList[i])) {
count++;
arcList.splice(i,1)
}
}
if(count != 0) {
clearInterval(interval1)
clearInterval(interval2)
let conf = alert("Game over")
location.href = "./슈팅게임.html";
}}
function checkrect(myrect, myarc){
if(Math.sqrt(Math.abs(((myrect.x + myrect.size) - myarc.x) * ((myrect.x + myrect.size) - myarc.x) + (myrect.y - myarc.y) * (myrect.y - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x - myarc.x) * (myrect.x - myarc.x) + (myrect.y - myarc.y) * (myrect.y - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x + myrect.size - myarc.x) * (myrect.x + myrect.size - myarc.x) + (myrect.y + myrect.size - myarc.y) * (myrect.y + myrect.size - myarc.y)))
<= myarc.radius)return true;
if(Math.sqrt(Math.abs((myrect.x - myarc.x) * (myrect.x - myarc.x) + (myrect.y + myrect.size - myarc.y) * (myrect.y + myrect.size - myarc.y)))
<= myarc.radius)return true;
let temprect = {
"x": myrect.x - myarc.radius,
"y": myrect.y - myarc.radius,
"width": myrect.size + myarc.radius * 2
}
if((myrect.x < myarc.x && myarc.x < myrect.x + myrect.size) || (myrect.y < myarc.y && myarc.y < myrect.y + myrect.size)){
if(temprect.x < myarc.x && myarc.x < temprect.x + temprect.width
&& temprect.y < myarc.y && myarc.y < temprect.y + temprect.width)
return true;
}
}
function drawarc(arc){
cnt.beginPath();
cnt.arc(arc.x, arc.y, arc.radius, 0, 2 * Math.PI);
cnt.fillStyle = arc.color;
cnt.fill();
cnt.closePath();
}
function drawrect(){
cnt.beginPath();
cnt.rect(myrect.x, myrect.y, myrect.size, myrect.size)
cnt.fillStyle = myrect.color;
cnt.fill();
cnt.closePath();
}
function makearc(){
let originx = 100;
let originy = 0;
let radius = 50;
let gap = 100;
for(let i = 0; i < 5; i++){
let random = Math.floor(Math.random() * 100) - 50;
let startx = originx + i * radius + gap * i + random// 100 (150) (300) //100 250 400 550
arc = {
"x": startx,
"y": originy,
"radius": radius,
"color": "green",
"speed": 2
}
arcList.push(arc);
}
}
function move(){
if(key.left) myrect.x -= myrect.speed;
if(key.right) myrect.x += myrect.speed;
if(key.up) myrect.y -= myrect.speed;
if(key.down) myrect.y += 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;
else if(a.code == "Space") key.fire = 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;
else if(a.code == "Space") key.fire = false;
});
//=====================================================
let myCanvas = document.querySelector(`#myCanvas`);
let cnt = myCanvas.getContext(`2d`);
let arcList = [];
let key = {"left": false, "rigth": false, "up": false, "down": false, "fire": false}
let myrect = {
"x": 100,
"y": 100,
"size": 50,
"color": "blue",
"speed": 2,
"cooldown": 0,
"cooldownMax": 20
}
let bulletList = [];
let bulletMax = 10;
let interval1 = null;
let interval2 = null;
interval1 = setInterval(makearc, 1000);
interval2 = setInterval(drawCanvas, 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.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 |