JavaScript로 Slither.io를 만드는 법 : Part 3 - Players & Bots

이것은 JavaScript 및 Phaser로 Slither.io를 만드는 튜토리얼 시리즈의 세 번째 파트입니다! Part 1을 처음 보시거나 Part 2로 돌아 가시면됩니다.

예제를 살펴보고 이 부분의 소스 코드를 살펴보십시오.

스네이크 확장하기

제 2 부에서 우리의 뱀은 앞으로 나아갈 수 있습니다. 이제 우리는 뱀 머리를 왼쪽과 오른쪽으로 돌리는 작업을해야합니다. Snake 클래스에서 이 기능을 추가하는 대신, Snake를 확장 할 BotSnake 및 PlayerSnake에 추가 할 것입니다. 왜 우리는 이것을 갈라 놓아야 합니까? 플레이어의 뱀은 커서 위치 또는 화살표 키로 제어되기 때문에 봇은 단순히 임의로 회전합니다. 이러한 차별화는 코드에 들어갈 때 명확 해집니다.

BOT SNAKE

botSnake.js의 BotSnake 클래스를 먼저 살펴 보겠습니다. 우리는 함수를 생성 한 다음 뱀을 상속받습니다.

BotSnake = function (게임, spriteKey, x, y) {

     Snake.call (this, game, spriteKey, x, y);

     this.trend = 1;

}

BotSnake.prototype = Object.create (Snake.prototype);

BotSnake.prototype.constructor = BotSnake;

함수 호출 메서드를 사용하여 Snake를 상속받습니다. 우리는 BotSnake에 고유 한 trend라는 필드를 추가합니다. 이 상속에는 Snake 프로토 타입이 포함되어 있지 않으므로 Prototype을 Object.create ()로 복제하고 BotSnake 프로토 타입과 동일한 값으로 설정해야합니다.

이제 BotSnake는 Snake와 똑같은 기능을하므로 기능을 확장해야 합니다. 특히 update 메서드에 추가하려고합니다. 우리가 어떻게 하는지 보시죠:

BotSnake.prototype.tempUpdate = BotSnake.prototype.update;

BotSnake.prototype.update = function () {

     this.head.body.setZeroRotation ();

     // 로봇이 한 방향으로 계속 회전하도록합니다.

     // 길 찾기 전환 전의 상당한 시간

     if (Util.randomInt (1,20) == 1) {

         this.trend * = -1;

     }

     this.head.body.rotateRight (this.trend * this.rotationSpeed);

     this.tempUpdate ();

}

먼저 tempUpdate라는 원본 업데이트 메서드의 복사본을 만듭니다. 우리는 실제 업데이트 방법에 추가 할 수 있도록이 작업을 수행 한 다음 끝에 tempUpdate를 호출합니다. Part 2에서 보았 듯이, Snake update 메소드는 우리가 잃고 싶지 않은 중요한 기능을 가지고 있습니다.

새로운 업데이트 방법에서는 뱀의 머리를 왼쪽이나 오른쪽으로 돌린 다음 특정 시간 후에 회전 방향을 전환하는 것입니다.

Player Snake

이제 playerSnake.js에서 PlayerSnake를 살펴 보겠습니다.

PlayerSnake = function (game, spriteKey, x, y) {

     Snake.call (this, game, spriteKey, x, y);

     this.cursors = game.input.keyboard.createCursorKeys();

     // 플레이어의 뱀이 속도를 낼 수 있도록 스페이스 키를 처리합니다.

     var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

     var self = this;

     spaceKey.onDown.add(this.spaceKeyDown, this);

     spaceKey.onUp.add(this.spaceKeyUp, this);

     this.addDestroyedCallback(function () {

         spaceKey.onDown.remove(this.spaceKeyDown, this);

         spaceKey.onUp.remove(this.spaceKeyUp, this);

     }, this);

}

PlayerSnake.prototype = Object.create (Snake.prototype);

PlayerSnake.prototype.constructor = PlayerSnake;

// 스페이스 키가 눌려지면 이 뱀을 켜고 속도를 높이십시오.

PlayerSnake.prototype.spaceKeyDown = function () {

     this.speed = this.fastSpeed;

}

// 스페이스 키가 다시 올라 오면 뱀을 느리게 만듭니다.

PlayerSnake.prototype.spaceKeyUp = function () {

     this.speed = this.slowSpeed;

}

우리가 BotSnake에서 했던 것처럼, 우리는 Snake를 상속 받고 프로토 타입을 복제합니다. 그런 다음 공간 키가 작아지면 이 플레이어의 뱀이 더 빨리 움직 이도록 만듭니다. 뱀에 대해 Part 2에서 작성한 addDestroyedCallback 메소드를 사용하는 방법에 주목하십시오.

이제 우리는 봇 스네이크에서했던 것처럼 새 업데이트 메서드를 만듭니다.

PlayerSnake.prototype.tempUpdate = PlayerSnake.prototype.update;

PlayerSnake.prototype.update = function () {

    // 머리가 회전해야하는 각도를 찾습니다.

    // 마우스를 마주 치기 위해 통과

    var mousePosX = this.game.input.activePointer.worldX;

    var mousePosY = this.game.input.activePointer.worldY;

    var headX = this.head.body.x;

    var headY = this.head.body.y;

    var angle = (180 * Math.atan2 (mousePosX-headX, mousePosY-headY) /Math.PI);

    if (angle> 0) {

        angle = 180- angle;

    }

    else {

        angle = -180-angle;

    }

    var dif = this.head.body.angle - angle;

    this.head.body.setZeroRotation ();

    // 화살표 키 사용 허용

    if (this.cursors.left.isDown) {

        this.head.body.rotateLeft (this.rotationSpeed);

    }

    else if (this.cursors.right.isDown) {

        this.head.body.rotateRight (this.rotationSpeed);

    }

    // 왼쪽 또는 오른쪽으로 회전하면 머리를 기울일 지 여부를 결정합니다.

    // 화살표 키를 사용하지 않으면 마우스가 빨라집니다.

    else if (dif <0 && dif> -180 || dif> 180) {

        this.head.body.rotateRight (this.rotationSpeed);

    }

    else if (dif> 0 && dif <180 || dif <-180) {

        this.head.body.rotateLeft (this.rotationSpeed);

    }

    // 원래 뱀 업데이트 메서드를 호출합니다.

    this.tempUpdate ();

}

플레이어 뱀의 업데이트 메소드에 추가 한 것은 화살표 키를 기준으로 처음으로 전환하는 기능입니다. 화살표 키가 눌러지지 않은 경우, 뱀은 커서를 향해 더 빨리 가리키는 방향으로 회전합니다. 본질적으로, 그것은 뱀의 현재 방향과 머리와 커서가 형성하는 선 사이의 각도가 작은면을 찾습니다.

game.js

마지막으로, 우리는 게임에 이 뱀을 추가해야합니다! 우리는 게임 상태의 생성 메소드에서 이것을 해야합니다 :

// 플레이어를 만듭니다.

var snake = new PlayerSnake (this.game, 'circle', 0, 0);

this.game.camera.follow (snake.head);

// 봇을 만듭니다.

new BotSnake (this.game, 'circle', -200, 0);

new BotSnake (this.game, 'circle', 200, 0);

그리고 우리 선수와 로봇이 작동합니다! Part 4에서는 뱀 사이의 충돌을 처리 할 것입니다.