포시코딩

[Javascript] Snake game (1) 본문

개인프로젝트/snake 게임

[Javascript] Snake game (1)

포시 2022. 8. 23. 14:05
728x90

면접 후기 글을 보다가 Snake game 을 만들어보게 했다는 글이 있어 

저번에 했던 Dino game 을 응용하면 될 것 같아 만들어봤다. 

 

<!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>Document</title>
</head>
<body>
    <h1>Snake</h1>
    <canvas id="canvas"></canvas>
    <script src="snake.js"></script>
</body>
</html>

html 은 간단하게 제목과 게임이 들어갈 canvas 태그만 작성하고 snake.js 를 불러옴

 

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;

canvas 세팅해준 후 

 

배경맵, snake(플레이어), rat(타겟) 변수를 만듦

처음 만드는거니 일단 자동으로 앞으로 가는게 아니라 한칸한칸 움직이게 하고서 천천히 업그레이드 해 나갈 계획이다. 

snake 는 내가 움직이는 snakeHead 와 rat 을 먹을수록 길어지는 snakeBody 로 구분했다. 

let field = {
    x: 0, 
    y: 0, 
    width: 500, 
    height: 500, 
    draw(){
        ctx.fillStyle = 'black';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

let snakeHead = {
    x: 0, 
    y: 0, 
    width: 50, 
    height: 50, 
    body: 0, 
    draw(){
        ctx.fillStyle = 'white';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

class SnakeBody {
    constructor(x, y){
        this.x = x;
        this.y = y;
        this.width = 50;
        this.height = 50;
    }
    draw(){
        ctx.fillStyle = 'white';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

class Rat {
    constructor(){
        this.x = 50 * getRandomInt(0, 10);
        this.y = 50 * getRandomInt(0, 10);
        this.width = 50
        this.height = 50
    }
    draw(){
        ctx.fillStyle = 'red';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

rat은 랜덤위치에 생성되어야 하므로 

function getRandomInt(min, max){
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max-min)) + min;
}

해당 함수를 만들어 썼음

 

let snakeBodyArr = [];
let rat;
do{
    rat = new Rat();
}while(rat.x == snakeHead.x && rat.y == snakeHead.y)

snakeBody 가 담길 Array 와 처음 게임을 실행했을 때 내 뱀대가리 위치에 rat 이 생성되지 않게 만들었음

 

이제 각각 세팅해놓음 draw() 를 통해 그리면 되는데 

하나의 함수로 묶어버림

function allDraw(){
    field.draw();
    snakeHead.draw();
    if(snakeBodyArr.length > 0){
        snakeBodyArr.forEach((a, i, o)=>{
            a.draw();
        })
    }
    rat.draw();
}

이 함수는 실행되자마자, 방향키를 누를때마다 실행되게 위치시켜주면 된다.

 

 

728x90
저작자표시

'개인프로젝트 > snake 게임' 카테고리의 다른 글

[Javascript] Snake game (2)  (0) 2022.08.23
'개인프로젝트/snake 게임' Related Articles more