웹게임 '소만 피하는 게임'을 만들었습니다

하늘에서 쏟아지는 소를 계속 피하는 게임입니다.
github 페이지에 올라 있으므로 부담없이 놀아보세요.
h tps : // 기트 겐. 기주 b. 이오 / 코 w_ 룬 r
※ 소리가 나오므로 음량주의입니다! !


플레이 동영상(Twitter)
스크린 샷을 보면 바로 알 수 있다고 생각하지만 빌어 먹을 게임입니다.
이번에는 이런 느낌의 빌어 먹을 게임을 만드는 방법을 조금 소개합니다

게임 라이브러리

당 판정 등 힘들 것 같은 일은하고 싶지 않기 때문에 솔직하게 게임 라이브러리를 사용합니다
웹게임에는 유명할 곳으로 Phaser 등이 있지만,
시간이 많이 걸리지 않고 게임을 만들고 싶다면 "phina.js"를 추천합니다.
phina.js는 일본제의 javascript의 웹 게임 라이브러리에서 사용한 감상은 이런 느낌

설치가 편합니다

구조가 간단

runstant라는 사이트에 많은 샘플이 있으므로 참고로 할 수 있다
어쨌든 즉시 게임으로 모양을 만들 수 있습니다

병아리

parcel에 phina.js를 넣은 리포지토리입니다.
phina.js는 패키지가 아닌 CDN에서 읽고,
패키지를 사용하지 않는 이유는 npm · yarn의 phina.js는 업데이트되지 않았는지 버그가 있기 때문에
설정

$ yarn 

$ yarn dev

거친 구조를 설명

병아리의 index.js가 본체가됩니다.
우선 이것이 index.js의 내용으로 최소한의 설정밖에 되어 있지 않은 상태입니다
parcel-phinajs-example/src/assets/index.js

// phina.js をグローバル領域に展開
phina.globalize();

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'DisplayScene',
  init: function() {
    this.superInit();
    this.backgroundColor = '#fff';
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'title',
    title: 'ゲーム',
  });
  // アプリケーション実行
  app.run();
});

phina.globalize();는 phina.js에서 제공하는 객체를 쉽게 호출 할 수있는 선언입니다.
그렇다고해도 이것을 쓰지 않은 경우는 원인 불명의 에러가 발생해 게임이 멈추는 일이 많이 있었으므로, 거의 필수인 생각이 듭니다
후에는 app.runMainScene이라는 클래스를 정의합니다.
이것은 게임 화면은 장면별로 나뉘어져 있습니다.
phina.js에서는 기본적으로 제공되는 장면 (타이틀, 메인, 결과 등이 있음)을 덮어 씁니다.

자산 준비

프리 소재를 사용해도 좋고 스스로 만들어도 좋다
자기와 장애물에 애니메이션을 붙이고 싶다면
스프라이트 시트를 만들면 애니메이션을 쉽게 만들 수 있습니다.
덧붙여서 스프라이트 시트의 작성은 Piskel로 할 수 있습니다 (추천)
이런 식으로 사용합니다.
parcel-phinajs-example/src/assets/index.js

import bgm from './bgm.mp3'
import player from './player.png'

const ASSETS = {
  sound: {
    'bgm': bgm,
  },
  image: {
    'player': player,
  },
}

...省略

phina.main(function () {
  // アプリケーションを生成
  const app = GameApp({
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    assets: ASSETS,
  app.run()
})

게임을 만들어보세요

예를 들면 적에게 부딪치면 게임 오버가 될 만큼의 게임을 만들어 보았습니다
MailScene에서 정의하는 플레이어는 클릭 한 위치로 이동하여 움직이지 않는 enemy에 접촉하면 게임 오버가됩니다.
코드 안에 코멘트를 기재하고 있으므로 참고해보십시오.
기초로서는 이런 느낌으로 건간 코딩해 퀄리티를 올려 가는 느낌입니다

import bgm from './bgm.mp3'
import effect from './effect.mp3'
import player from './player.png'

// phina.js をグローバル領域に展開
phina.globalize();

const SCREEN_WIDTH = 640
const SCREEN_HEIGHT = 960
const OBJECT_POSITION = 800
const ASSETS = {
  sound: {
    'bgm': bgm,
    'effect': effect,
  },
  image: {
    'player': player,
  },
}

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'DisplayScene',
  init: function() {
    this.superInit();
    this.backgroundColor = '#fff';
    SoundManager.playMusic('bgm');

    // labelを表示する
    Label('敵ぶつかるとゲームオーバー').addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());

    // 背景の設定方法（backgroundという背景用の画像をassetsに読み込む）
    // Sprite('background').addChildTo(this).setPosition(this.gridX.center(), this.gridY.center());

    // 自機
    this.player = Sprite('player', 64, 64).addChildTo(this)
    this.player.setPosition(200, OBJECT_POSITION)

    // 敵
    this.enemy = Sprite('player', 64, 64).addChildTo(this)
    this.enemy.setPosition(440, OBJECT_POSITION)
  },

  // 毎フレーム更新処理
  // 1フレームごとにこの処理が実行されます
  // デフォルトは30fpsなので1秒間に30回実行されるという事です
  update(app) {
    const p = app.pointer
    // クリックがあったところにplayerを移動させる
    if (p.getPointing()) {
      this.player.setPosition(p.x, p.y)
    }

    // playerがenemyに接触していたらgemeover()を呼び出す
    if (this.player.hitTestElement(this.enemy)) {
      this.gameover()
    }
  },

  // ゲームオーバー
  gameover() {
    // 効果音を再生する
    SoundManager.play('effect');

    // 次のシーンに遷移する
    this.exit()
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'title',
    title: 'ゲーム',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    assets: ASSETS,
  });
  // アプリケーション実行
  app.run();
});

github

암소를 피하는 게임 github 페이지의 저장소는 여기!
htps : // 기주 b. 코 m/기 t 겐/기 t 겐. 기주 b. 이오