이것은 JavaScript 및 Phaser로 Slither.io를 만드는 튜토리얼 시리즈의 세 번째 파트입니다!
예전 내용은 Part 1을 처음 보시거나 Part 2로 돌아 가시면됩니다.
예제를 살펴보고 이 부분의 소스 코드를 살펴보십시오.
2 부에서 우리의 뱀은 앞으로 나아갈 수 있습니다. 이제 우리는 뱀 머리를 좌우로 돌리는 작업을해야합니다. Snake 클래스에서 이 기능을 추가하는 대신, Snake를 확장 할 BotSnake 및 PlayerSnake에 추가 할 것입니다. 왜 우리는 이것을 갈라 놓아야합니까? 플레이어의 뱀은 커서 위치 또는 화살표 키로 제어되기 때문에 봇은 단순히 임의로 회전합니다. 이러한 차별화는 코드에 들어갈 때 명확 해집니다.
botSnake.js의 BotSnake 클래스를 먼저 살펴 보겠습니다. 우리는 함수를 생성하고 뱀을 상속 받아 시작합니다.
BotSnake = function(game, 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();
//ensure that the bot keeps rotating in one direction for a
//substantial amount of time before switching directions
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 메소드는 우리가 잃고 싶지 않은 중요한 기능을 가지고 있습니다.
새로운 업데이트 방법에서는 뱀의 머리를 왼쪽이나 오른쪽으로 돌린 다음 특정 시간 후에 회전 방향을 전환하는 것입니다.
이제 playerSnake.js의 PlayerSnake를 살펴 보겠습니다.
PlayerSnake = function(game, spriteKey, x, y) {
Snake.call(this, game, spriteKey, x, y);
this.cursors = game.input.keyboard.createCursorKeys();
//handle the space key so that the player's snake can speed up
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;
//make this snake light up and speed up when the space key is down
PlayerSnake.prototype.spaceKeyDown = function() {
this.speed = this.fastSpeed;
}
//make the snake slow down when the space key is up again
PlayerSnake.prototype.spaceKeyUp = function() {
this.speed = this.slowSpeed;
}
우리가 BotSnake로 했던 것처럼, 우리는 Snake를 상속 받고 그 프로토 타입을 복제합니다. 그런 다음 스페이스 키가 눌려지면 이 플레이어의 뱀이 빨리 움직 이도록 만듭니다. 뱀에 대해 Part 2에서 작성한 addDestroyedCallback 메서드를 사용하는 방법에 주목하십시오.
이제 우리는 봇 스네이크에서 했던 것처럼 새로운 업데이트 방법을 만듭니다.
PlayerSnake.prototype.tempUpdate = PlayerSnake.prototype.update;
PlayerSnake.prototype.update = function() {
//find the angle that the head needs to rotate
//through in order to face the mouse
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();
//allow arrow keys to be used
if (this.cursors.left.isDown) {
this.head.body.rotateLeft(this.rotationSpeed);
}
else if (this.cursors.right.isDown) {
this.head.body.rotateRight(this.rotationSpeed);
}
//decide whether rotating left or right will angle the head towards
//the mouse faster, if arrow keys are not used
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);
}
//call the original snake update method
this.tempUpdate();
}
플레이어 뱀의 업데이트 메서드에 내가 추가 한 것은 화살표 키를 기준으로 처음으로 전환 할 수있는 기능입니다. 화살표 키가 눌러지지 않은 경우 뱀이 커서를 향해 더 빨리 가리키는 방향으로 회전합니다. 본질적으로 뱀의 현재 방향과 머리와 커서가 이루는 선 사이의 각도가 작은면을 찾습니다.
마지막으로, 우리는 게임에 이 뱀을 추가해야합니다! 우리는 게임 상태의 생성 메소드에서 이것을 추가 해야합니다 :
//create player
var snake = new PlayerSnake(this.game, 'circle', 0, 0);
this.game.camera.follow(snake.head);
//create bots
new BotSnake(this.game, 'circle', -200, 0);
new BotSnake(this.game, 'circle', 200, 0);
그리고 우리 선수와 로봇이 작동하고 있습니다! 제 4 부에서는 뱀 사이의 충돌을 처리 할 것입니다.
댓글 없음:
댓글 쓰기