canvas 기초 사용법에 대한 간단한 영상으로, 해당 영상을 완료하면 간단한 공룡 게임이 만들어진다.
나중에 이걸 활용해서 다른 재밌는 웹게임을 만들어 볼 생각으로 작업하게 되었다.
아래는 해당 영상을 참고로 수정한 소스 코드이다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="main.js"></script>
</body>
</html>
main.js
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;
let dinoImg = new Image();
dinoImg.src = "dino.png";
let dino = {
x : 10,
y : 200,
width : 25,
height : 25,
draw() {
// ctx.fillStyle = 'green';
// ctx.fillRect(this.x, this.y, this.width+25, this.height+25);
ctx.drawImage(dinoImg, this.x, this.y, this.width+25, this.height+25);
}
}
let cactusImg = new Image();
cactusImg.src = "cactus.png";
class Cactus {
constructor() {
this.x = 400;
this.y = 190;
this.width = 25;
this.height = 30;
}
draw() {
// ctx.fillStyle = 'red';
// ctx.fillRect(this.x , this.y, this.width+25, this.height+30);
ctx.drawImage(cactusImg, this.x, this.y, this.width+25, this.height+30);
}
}
let timer = 0;
let cactuses = [];
let isJump = false;
let jumpTimer = 0;
let animation;
function init() {
animation = requestAnimationFrame(init);
timer++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (timer % 200 == 0) {
let cactus = new Cactus();
cactuses.push(cactus);
}
cactuses.forEach((cactus, i, o)=>{
// x 좌표가 0 미만이면 제거
if (cactus.x < 0) {
o.splice(i, 1);
}
cactus.x -= 2;
collisionDetect(dino, cactus);
cactus.draw();
})
if (isJump == true) {
dino.y -= 2;
jumpTimer++;
}
if (isJump == false) {
if (dino.y < 200) {
dino.y += 2;
}
}
if (jumpTimer > 50) {
isJump = false;
jumpTimer = 0;
}
dino.draw();
}
init();
//충돌 확인
function collisionDetect(dino, cactus) {
let xDiff = cactus.x - (dino.x + dino.width);
let yDiff = cactus.y - (dino.y + dino.height);
if (xDiff < 0 && yDiff < 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
cancelAnimationFrame(animation);
}
}
document.addEventListener('keydown', function(e) {
if (e.code === 'Space' && isJump == false && dino.y == 200) {
isJump = true;
}
});
스페이스 바로 간단하게 할 수 있는 게임이 만들어진다.
아래는 또 다른 크롬 디노 게임인데, 게임의 동작 원리에 대해 알았으니 아래 소스 코드를 보고 참고해 볼 수 있을 것 같다.
Chrome Dino Game
Chrome T-Rex dinosaur game online with scores (records)
chromedino.com
'이전 프로젝트 > [deprecated] Play!' 카테고리의 다른 글
| 랜덤 주사위 굴리기 (0) | 2022.02.18 |
|---|---|
| 500개의 링크를 한번에 다운로드 하는 방법. (feat. Rolling Stone's 500 Greatest Songs of All Time) (0) | 2019.10.31 |
| 돌려돌려 돌림판 (2/3) - 베타 버전 (0) | 2019.10.14 |
| 숫자 정렬 게임 (1) | 2019.08.10 |
| 돌려돌려 돌림판 (1/3) - 자료조사 (0) | 2019.06.06 |