수업을 들으면서 그냥 적어주는데로 적는게 아니라 이것 저것 직접 입력도하고 값도 바꿔가면서 어느 부분이 달라지는지 확인하면서 공부하는 것이 바람직 하다.
canvas요소를 이용한 총게임 만들어보기
총알자국👉
총알 하나의 x,y 좌표는 object 에 저장하면 좋다. => {x:100, y:20}....
총알 하나의 정보를 담고 있는 object가 여러개면 array 에 저장하면 좋다 => [{},{},{},............]
배열 반복문 공부가 된다.
<!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>Step09_example5.html</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<h1>canvas 요소 활용해 보기</h1>
<!-- canvas 요소는 width와 height를 속성으로 직접 지정할수 있다.-->
<canvas id = "myCanvas" width="800" height="500"></canvas>
<script>
/*
const는 constant 의 약자
변수에 값이 한번 담기면 그 이후에 변경을 불가능하도록 만드는 예약어
즉 변수를 상수화 시키는 기능이다
const nu = 10;
num = 20; //변경 불가(에러)
const names = ["김구라", "해골", "원숭이"];
names = ["lee", "park"]; //변경불가(에러)
names[0] = "이정호"; //가능
const mem = {num:1};
mem = {num:2}; //변경불가(에러)
mem.num=3; //가능
*/
//canvas 요소의 참조값
let canvas = document.querySelector("#myCanvas");
//canvas 에 그림을 그릴 도구(context) 객체 얻어내기
let context = canvas.getContext("2d");
//canvas 에 그릴 이미지 로딩하기
const snipeImg = new Image();
snipeImg.src = "images/Scopes-Free-PNG-Image.png";
const holeImg = new Image();
holeImg.src = "images/hole.png";
//snipe 의 좌표
let snipeX = 0; snipeY = 0;
// //총알구멍의 임시 좌표
// let holeX = 400, holeY=250;
//총알 구멍 객체 (object)를 저장할 배열
const holes = [];
setInterval(()=>{
//여기 함수 내부는 1/100 초 마다 한번씩 실행된다.
context.clearRect(0, 0, 800, 500);
//총알 구멍 이미지
// context.drawImage(holeImg, holeX-10, holeY-10, 20, 20);
//총알 구멍 이미지를 반복문으로 돌면서 모두 그린다.
for(let i = 0; i < holes.length; i++){
//i번째 총알구멍이미지 정보를 담고 있는 객체를 불러와서
let tmp = holes[i];
//거기에 담긴 x, y 좌표를 이용해서 총알 구멍을 그린다.
context.drawImage(holeImg, tmp.x-10, tmp.y-10, 20, 20);
}
context.drawImage(snipeImg, snipeX-50, snipeY-50, 100, 100);
},10);
//canvas 요소의 mousemove 이벤트 처리
canvas.addEventListener("mousemove", (e)=>{
//이벤트가 발생한곳의 canvas 내에서의 좌표를 snipeX, snipeY에 반영
snipeX = e.offsetX;
snipeY = e.offsetY;
});
canvas.addEventListener("mousedown", (e)=>{
// holeX = e.offsetX;
// holeY = e.offsetY;
// 이벤트가 발생한 곳의 좌표를 object에 담는다.
const hole = { x : e.offsetX, y : e.offsetY};
// holes 배열에 저장(누적) 시킨다.
holes.push(hole);
});
</script>
</body>
</html>Class안에는 여지껏 생성자, 메소드, 필드만을 정의했었는데 클래스 안에 클래스도 정의가 가능하다.
클래스안에 클래스라 하여 내부 클래스 혹은 inner class라고도 한다.
내부클래스는 클래스 안의 클래스
Class A { //외부클래스
...
Class B{
...
}
...
}
원래 class앞에 static을 붙이는 건 안되지만 InnerClass 한에서는 가능하다.
위에 코드는 이름이 없는 익명의 클래스이다.
final class에서 final은 자식클래스가 부모클래스를 상속받지 못하도록 하는 기능이 있다.
인터페이스는 생성자가 없다. 추상메소드만 입력이 가능하다.
인터페이스를 implements 하면 인터페이스에 정의 되어 있는 모든 추상메소드를 오버라이드 해야한다(강제적임)
'수업내용' 카테고리의 다른 글
| 20230508 수업내용😢😢😢 (0) | 2023.05.08 |
|---|---|
| 20230504 수업내용😶🌫️😶🌫️ (0) | 2023.05.04 |
| 20230502 국비학원😁 (0) | 2023.05.02 |
| 20230501 수업내용🤦♂️🤦♂️ (1) | 2023.05.01 |
| 20230428 수업내용😂😂 (0) | 2023.05.01 |
댓글