JSFiddle - React, Tailwind, and code Playground

by carstrom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.17.0/phaser.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.17.0/phaser.min.js"></script>

  </head>


  <body>

    <div></div>

  </body>



</html>

CSS

body {
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

if (window.innerWidth > 390) {
  var width = 390
} else {
  var width = window.innerWidth;
}

var height = window.innerHeight;

var FrameNamesArray = []
var pokeArray = []
var scale = 3.5;
var walkSpeed = 7;
var tick = 0;
var currentMon = 0;

var lane = width / 4;
var centerOfLane = lane / 2;
var xPosLane1 = centerOfLane;

var config = {
  type: Phaser.Canvas,
  width: width,
  height: height,
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      debug: true
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var game = new Phaser.Game(config);

function preload() {
  this.load.image('ball1', 'https://cdn0.iconfinder.com/data/icons/tiny-icons-1/100/tiny-15-512.png')
  this.load.image('enemy', 'https://cdn0.iconfinder.com/data/icons/tiny-icons-1/100/tiny-15-512.png')


}

function create() {

  var tick = this.time.now;

  this.cameras.main.backgroundColor.setTo(0, 233, 75)

  ball = this.physics.add.sprite(50, height - 40, 'ball1').setScale(.10).setCollideWorldBounds(true);


  var graphics = this.add.graphics({
    fillStyle: {
      color: 0x0000ff
    }
  });





  var pngCounter = 1;

  for (var x = 1; x < 151; x++) {
    if (pngCounter == 161) {
      pngCounter = 171
    }
    pokeArray.push(this.physics.add.sprite(xPosLane1, -60, 'mons', 'enemy.png').setScale(scale).setOrigin(0.5))
    pngCounter += 2;
  }



  for (var monster = 0; monster < pokeArray.length; monster++) {
    this.physics.add.overlap(ball, pokeArray[monster], col);

  }


}

function col(ball, creature) {
  creature.destroy();
}


function update(time, delta) {


  var randTime = Math.floor((Math.random() * 6000) + 200);

  if (time > tick + randTime) {
    var randLane = Math.floor((Math.random() * 4) + 1);

    if (randLane == 1) {
      pokeArray[currentMon].x = xPosLane1;
    } else if (randLane == 2) {
      pokeArray[currentMon].x = xPosLane1 + lane;
    } else if (randLane == 3) {
      pokeArray[currentMon].x = xPosLane1...