참고 영상 : https://youtu.be/TJmvuyt6tT8 (코딩알려주는누나)
1일차 내용
- canvas 생성
- 이미지 불러오기
- 이미지 렌더링
1. 사전준비
- 이미지 5개 (배경, 게임주인공, 적, 총알, 게임오버)
- index.html
- main.js
2. index.html
html5기본세팅 / script 연결
<!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>SHOOTING GAME</h1>
<script src="main.js"></script>
</body>
</html>3. main.js
3-1. canvas 세팅
-
변수 canvas, ctx생성
-
canvas = document.createElement("canvas");: doucment에 'canvas' Element추가 -
canvas.width = 400; canvas.height = 700; document.body.appendChild(canvas);: canvas 크기 지정 / body의 자식으로 추가하기 -
ctx = canvas.getContext("2d");: canvas에 작업을 2d로 하겠다는 뜻
let canvas;
let ctx;
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 700;
document.body.appendChild(canvas);
3-2. 이미지 5개 불러오기
- 이미지를 담을 변수 5개 생성
- loadImage()함수로 이미지 소스 가져오기
let backgroundImage, mainImage, bulletImage, enemyImage, gameOverImage;
function loadImage() {
backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
mainImage = new Image();
mainImage.src = "images/main.png";
bulletImage = new Image();
bulletImage.src = "images/bullet.png";
enemyImage = new Image();
enemyImage.src = "images/enemy.png";
gameOverImage = new Image();
gameOverImage.src = "images/gameover.jpg";
}3-3. render()함수 : 이미지를 렌더링해주는 함수
drawImage(image, dx, dy, dWidth, dHeight): ctx변수에 이미지를 그려줌
//주인공 좌표
let spaceshipX = canvas.width / 2 - 32;
let spaceshipY = canvas.height - 64;
function render() {
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
ctx.drawImage(mainImage, spaceshipX, spaceshipY, 64, 64);
}3-4. main()함수 : render()함수를 호출 / canvas는 스톱모션처럼 계속해서 이미지를 불러와줘야함
function main() {
render();
requestAnimationFrame(main);
console.log("anmiation calls");
}3-5. 함수 호출
loadImage();
main();4. 실행화면
- requestAnimationFrame(main) : main을 계속해서 실행되도록 처리
- console.log로 main이 계속해서 실행되는 걸 확인할 수 있음
function main() {
render();
requestAnimationFrame(main);
console.log("anmiation calls");
}
💪프로젝트 목표
1. js 사용방법 익히기
2. js가 실제로 어떻게 사용되는지 체험
씩씩하게 공부중 (22.11~)