지난 프로젝트를 업데이트하기 위해 배운 것을 적용하기

JS13k에 들어간 후(내 경험에 대해 읽을 수 있음) Flatiron School에서 근무하는 동안 했던 이전 프로젝트 중 하나를 다시 방문하기로 결정했습니다. 이 프로젝트는 내 강아지 Penny가 우주에서 다람쥐와 싸우는 꿈을 꾸는 Invasion!이라는 게임입니다. 나는 이전에 그것에 대해 썼다.

내가 추가/변경한 것들

창 크기에 따라 게임 크기 조정

처음 게임을 만들 때 캔버스의 높이와 너비를 하드코딩했습니다. 다른 창 크기로 크기를 조정하는 방법을 몰랐고 크기를 변경하면 게임 스프라이트의 모양과 충돌 감지에 영향을 미쳤습니다. 마감일이 있었기 때문에 완료해야 할 다른 측면에 집중하기 위해 그대로 두었습니다.

JS13k용 게임을 만들 때 크기를 조정할 수 있기를 원했기 때문에 많은 조사를 했고 그 방법에 대한 글을 썼습니다. 이 기술을 사용함으로써 기본 게임 플레이 해상도가 캔버스 해상도와 별개이기 때문에 스프라이트 크기나 충돌 감지를 변경할 필요가 없었습니다.

JavaScript로 배경 만들기

초기 배경은 우주에 있는 매우 큰 .png 별이었습니다. JS13k 게임의 경우 JavaScript를 사용하여 별이 빛나는 우주 배경을 만들었으므로 여기에서도 이미지 대신 해당 기술을 사용하기로 결정했습니다.

이 효과를 만들기 위해 모든 게임 플레이가 포함된 캔버스 뒤에 별도의 캔버스를 추가했습니다. 창 크기를 반복하고 임의의 x/y 지점에 흰색 픽셀을 배치하는 함수를 만들었습니다. 루프 변수를 32씩 증가시켜 별의 간격을 두었습니다. 32는 내가 함께 갔던 임의의 값이었습니다. 원하는 별의 수에 따라 값을 늘리거나 줄일 수 있습니다.

function buildBackground(ctx) {
  for (let i = 0; i < window.innerWidth; i += 32) {
    for (let j = 0; j < window.innerHeight; j += 32) {
      const randX = Math.floor(Math.random() * window.innerWidth);
      const randY = Math.floor(Math.random() * window.innerHeight);
      ctx.fillStyle = 'white';
      ctx.fillRect(randX, randY, 1, 1);
    }
  }
}

이 함수는 시작 시 한 번 실행되며 이 캔버스에 다시 그릴 필요가 없습니다.

P-폭탄

이것은 제가 처음에 정말로 추가하고 싶었지만 시간이 다 된 기능입니다. 내 다른 개인 Pixel이 Penny의 꿈에서 역할을 맡는다면 멋질 것이라고 생각했습니다. 이제 Penny는 3개의 P-Bomb을 배치할 수 있으며 Pixel은 화면을 빠르게 가로질러 적 다람쥐를 향해 총을 쏠 것입니다.

P-Bomb을 생성하기 위해 P-Bomb이 300ms마다 새로운 Player을 생성해야 하므로 현재 활성화된 P-Bomb이 있는지, 얼마나 남아 있는지, 간격 ID를 추적하기 위해 BulletObject 클래스에 몇 가지 속성을 추가했습니다. .

완전히 새로운 클래스를 만들고 충돌을 추가하는 대신 P-Bomb 자체를 또 다른 "플레이어"로 만들었지만 사용자가 이동을 제어하는 ​​대신 moveLeft 속성을 true으로 설정하여 자체적으로 화면을 가로질러 이동합니다. .

(하드코딩된 값은 내 스프라이트 시트의 위치에 해당하며 더 적절한 크기를 위해 절반으로 나뉩니다.)

pBombShootAction(gameWidth, gameHeight) {
    // create
    this.pBombs--;
    this.pBomb = new Player(gameWidth, gameHeight);
    this.pBomb.spriteObj.sourceX = 224;
    this.pBomb.spriteObj.sourceWidth = 219;
    this.pBomb.spriteObj.sourceHeight = 157;
    this.pBomb.spriteObj.x = gameWidth + 219;
    this.pBomb.spriteObj.y = gameHeight - 157 / 2 - 30;
    this.pBomb.spriteObj.width = 219 / 2;
    this.pBomb.spriteObj.height = 157 / 2;
    this.pBombActive = true;
    this.pBomb.moveLeft = true;
    this.pBomb.type = 'pBomb';

    // shoot
    this.pBombIntervalId = setInterval(() => {
      const { x, y, width, height } = this.pBomb.spriteObj, speed = 30;
      new BulletObject("playerBullet", speed, { x, y, width, height });
    }, 300)
}

이제 플레이어 업데이트 기능은 P-Bomb이 활성화되어 있는지 여부를 확인하고 그에 따라 반응합니다.

if (this.pBombShoot) {
  this.pBombShootAction(gameWidth, gameHeight);
  this.pBombShoot = false;
}

if (this.pBombActive) {
  if (this.pBomb.spriteObj.x + this.pBomb.spriteObj.width < 0) {
    this.stopPBomb();
  }
}

쿨다운 기능 및 유체 이동

플레이어 이동 방식을 변경하기로 했습니다. 이전에는 사용자가 키를 누르고 있는 대신 왼쪽이나 오른쪽을 반복해서 탭해야 했습니다. 유동적으로 움직일 수 있다면 적의 총알을 피하고 적을 쏘는 것이 너무 쉬워보여서 그렇게 만들었습니다. 나는 플레이어가 슛 키를 스팸하는 것을 막기 위해 쿨다운 기능을 추가했고, 이것은 내가 플레이어 움직임을 개선할 수 있게 해주었다.

쿨다운을 만들기 위해 플레이어가 스페이스바를 누를 때 true로 설정되는 부울 속성을 플레이어에 추가했습니다. 그런 다음 1300ms 동안 타임아웃을 생성하고 그 시간이 지나면 쿨다운 속성이 다시 false로 설정되고 플레이어가 다시 쏠 수 있습니다.

 if (!game.player.isBarkCooldown) {
    game.player.shoot = true;
    game.player.isBarkCooldown = true;
    setTimeout(() => {
      game.player.isBarkCooldown = false;
    }, 1300)
}

--
이것이 내가 만든 주요 변경 사항이지만 추가하고 싶은 몇 가지 사항이 여전히 있습니다. 내 다음 업데이트는 현재 데스크톱에서만 작동하므로 모바일용 터치 컨트롤이 될 것 같습니다.