cat sprite experiments

wordfall/index.html

@@ -11,6 +11,9 @@
   </style>
   <script src="phaser.min.js"></script>
   <script src="words.js"></script>
+  <script src="lib/cat.js"></script>
+  <script src="lib/constants.js"></script>
+  <script src="lib/letter_box.js"></script>
   <script src="game.js?version=4"></script>
 </head>
 

wordfall/lib/cat.js

@@ -0,0 +1,65 @@
+class Cat extends Phaser.GameObjects.Sprite {
+  static get duration() {
+    return [5000, 7000, 10000].sample()
+  }
+
+  static get states() {
+    return Object.freeze({
+      WALK: 'walk',
+      STRETCHING: 'stretching',
+      SLEEPING: 'sleeping',
+      SITTING: 'sitting',
+      RUN: 'run',
+      LICKING: 'licking',
+      LAYING: 'laying',
+      ITCH: 'itch',
+      IDLE: 'idle',
+    })
+  }
+
+  static loadAssets(scene) {
+    const catPath = 'assets/cat_6/Cat-6-'
+    const extension = '.png'
+    const frameConfig = { frameWidth: 50 }
+
+    // загружаем спрайты кота для всех состояний
+    Object.values(Cat.states).forEach((state) => {
+      scene.load.spritesheet(state, `${catPath}${state.capitalize()}${extension}`, frameConfig)
+    })
+  }
+
+  static initAnims(scene) {
+    // генерируем анимации кота для всех состояний
+    Object.values(Cat.states).forEach((state) => {
+      const repeat = state === 'laying' ? 0 : -1
+
+      scene.anims.create({
+        key: state,
+        frames: scene.anims.generateFrameNumbers(state),
+        frameRate: 8,
+        repeat: repeat
+      })
+    })
+  }
+
+  constructor(scene, x, y, texture, frame) {
+    super(scene, x, y, texture, frame)
+    scene.add.existing(this)
+    this.setDepth(1)
+
+    this.state = Object.values(Cat.states).sample()
+    this.stateTo = scene.game.getTime() + Cat.duration
+
+    this.play(this.state)
+    this.texture.setFilter(Phaser.Textures.FilterMode.NEAREST)
+  }
+
+  update() {
+    if (this.scene.game.getTime() > this.stateTo) {
+      this.state = Object.values(Cat.states).filter(e => e !== this.state).sample()
+      this.stateTo = this.scene.game.getTime() + Cat.duration
+      this.play(this.state)
+      this.texture.setFilter(Phaser.Textures.FilterMode.NEAREST)
+    }
+  }
+}

wordfall/lib/constants.js

@@ -0,0 +1,47 @@
+const COLOR_OBJECT = new Phaser.Display.Color();
+const CHARACTERS = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ';
+const CHARACTERS_LENGTH = CHARACTERS.length;
+const VOWELS = 'АУОЫЭЯЮЁИЕ'
+const CONSONANTS = 'БВГДЖЗЙКЛМНПРСТФХЦЧШЩ'
+const SPECIAL = 'ьъ'
+
+const LETTER_INTERVAL = 4000
+const LETTER_SIZE = 90
+const BOTTOM_TEXT_SIZE = 60
+const BUTTON_SIZE = 80
+const FONT_CONFIG = { color: '#000000', fontSize: 52, fontFamily: 'Arial Helvetica' }
+const ETALON_LETTERS = {
+  "О": 0.10983,
+  "Е": 0.08483,
+  "А": 0.07998,
+  "И": 0.07367,
+  "Н": 0.067,
+  "Т": 0.06318,
+  "С": 0.05473,
+  "Р": 0.04746,
+  "В": 0.04533,
+  "Л": 0.04343,
+  "К": 0.03486,
+  "М": 0.03203,
+  "Д": 0.02977,
+  "П": 0.02804,
+  "У": 0.02615,
+  "Я": 0.02001,
+  "Ы": 0.01898,
+  "Ь": 0.01735,
+  "Г": 0.01687,
+  "З": 0.01641,
+  "Б": 0.01592,
+  "Ч": 0.0145,
+  "Й": 0.01208,
+  "Х": 0.00966,
+  "Ж": 0.0094,
+  "Ш": 0.00718,
+  "Ю": 0.00639,
+  "Ц": 0.00486,
+  "Щ": 0.00361,
+  "Э": 0.00331,
+  "Ф": 0.00267,
+  "Ъ": 0.00037,
+  "Ё": 0.00013
+}

wordfall/lib/letter_box.js

@@ -0,0 +1,95 @@
+class LetterBox extends Phaser.GameObjects.GameObject {
+  static get colorObject() {
+    return COLOR_OBJECT
+  }
+  static get characters() {
+    return CHARACTERS
+  }
+  static get charactersLength() {
+    return CHARACTERS_LENGTH
+  }
+
+  static get textConfig() {
+    return { ...FONT_CONFIG, ...{ color: '#fff' } }
+  }
+
+  static getLetter() {
+    return LetterBox.characters.charAt(Math.floor(Math.random() * charactersLength))
+  }
+
+  get alpha() { this.shape.alpha }
+  set alpha(value) { this.shape.alpha = value; this.text.alpha = value }
+
+  constructor(scene, x, y, size, color, letter) {
+    super(scene)
+
+    this.scene = scene
+    this.size = size
+    this.color = color
+    this.letter = letter
+    this.scene.dict[letter] = (this.scene.dict[letter] || 0) + 1
+    this.initContainer(x, y)
+    this.initPhysics()
+  }
+
+  delete() {
+    this.alpha = 1
+    this.scene.dict[this.letter] -= 1
+    this.scene.tweens.add({
+      targets: [this.shape, this.text],
+      alpha: 0,
+      ease: 'Linear',
+      duration: 400,
+      onComplete: () => this.destroy()
+    })
+
+  }
+
+  select() {
+    this.selected = true
+    this.scene.tweens.add({
+      targets: [this.shape, this.text],
+      alpha: 0.5,
+      ease: 'Linear',
+      duration: 400,
+    })
+  }
+
+  unSelect() {
+    this.selected = false
+    this.scene.tweens.add({
+      targets: [this.shape, this.text],
+      alpha: 1,
+      ease: 'Linear',
+      duration: 400,
+    })
+  }
+
+  initContainer(x, y) {
+    if (!this.color) {
+      this.color = LetterBox.colorObject.random(30, 220)
+    }
+
+    this.shape = this.scene.add.circle(0, 0, this.size / 2, LetterBox.colorObject.color)
+    this.text = this.scene.add.text(
+      0, 0,
+      this.letter || LetterBox.getLetter(),
+      LetterBox.textConfig,
+    )
+
+    Phaser.Display.Align.In.Center(this.text, this.shape, 0, 4);
+
+    this.container = this.scene.add.container(x, y, [this.shape, this.text])
+    this.container.setSize(this.size, this.size)
+      .setInteractive()
+      .on("pointerdown", this.scene.writeWord, this)
+  }
+
+  initPhysics() {
+    this.body = this.scene.matter.add.gameObject(this.container)
+    this.body.setCircle()
+      .setFriction(0.005, 0, 0)
+      .setBounce(0.1)
+      .setAngle(180 * Math.random() * 10)
+  }
+}