followtherider/main.js

// REVEAL AND TYPE

Reveal.initialize({
  width: '80%',
  height: '60%',
  hash: true,
  controls: true,
  // Learn about plugins: https://revealjs.com/plugins/
  // plugins: [RevealMarkdown, RevealHighlight, RevealNotes],

  dependencies: [{
    src: 'plugin/typed/typed.js',
    async: false,
    callback: function () {
      callTypedJs()
    }
  }]
})

function init_type (event) {
  console.log('init_type()')

  // console.log(event);
  // console.log(event.currentSlide);
  // console.log(event.indexh);

  index = event.indexh
  div_typed_content = event.currentSlide.getElementsByClassName(
    'typed-content'
  )[0]

  if (div_typed_content == undefined) {
    console.log('Nothing to do. No type div found.')

    return false
  }

  div_typed_content.id = 'typed-content-' + index
  div_typed_insert = event.currentSlide.getElementsByClassName(
    'typed-insert'
  )[0]
  div_typed_insert.id = 'typed-insert-' + index

  if (typeof window['typed' + index] === 'undefined') {
    window['typed' + index] = new Typed('#' + div_typed_insert.id, {
      stringsElement: '#' + div_typed_content.id,
      loop: false,
      startDelay: 1500,
      typeSpeed: 50,
      backSpeed: 0,
      showCursor: true,
      cursorChar: '| ',
      autoInsertCss: true,
      onComplete: function (self) {
        // console.log(Reveal.isLastSlide())
        // console.log(Reveal.getSlides())
        console.log('------')
        console.log('End Typing!')
        if (Reveal.isLastSlide()) {
          console.log('LAAAAAAAAAAAAAST SLIDE')
          aside_controls = document.getElementsByClassName('controls')[0]
          aside_controls.style.display = 'block'
        } else {
          setTimeout(() => {
            Reveal.right()
          }, 3000)
        }
      }
    })
  }
}

var count_sliding = 0

Reveal.on('slidechanged', (event) => {
  count_sliding = count_sliding + 1
  console.log('Slide Change: ' + count_sliding)
  init_type(event)
})

// Hit on first slide
Reveal.on('ready', (event) => {
  console.log('Reveal Ready')

  var aside_controls = document.getElementsByClassName('controls')[0]
  aside_controls.style.display = 'none'

  if (Reveal.isFirstSlide()) {
    console.log('Reveal is First Slide')
    setTimeout(() => {
      init_type(event)
    }, 5000)
  } else {
    console.log('Reveal not first slide!!')
    window.location.assign('/')
  }
})

/*
 *  This example show how to load complex shapes created with PhysicsEditor (https://www.codeandweb.com/physicseditor)
 *
 *  Scaling via: https://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/
 */

var config = {
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT,
    parent: 'game',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth * window.devicePixelRatio,
    height: window.innerHeight * window.devicePixelRatio
  },
  transparent: true,
  backgroundColor: 0xffffff,
  scene: {
    preload: preload,
    create: create
  },
  physics: {
    default: 'matter',
    matter: {
      // debug: true
    }
  }
}

var game = new Phaser.Game(config)

function preload () {
  // Load sprite sheet generated with TexturePacker
  this.load.atlas(
    'sheet',
    'assets/fruit-sprites.png',
    'assets/fruit-sprites.json'
  )

  // Load body shapes from JSON file generated using PhysicsEditor
  this.load.json('shapes', 'assets/fruit-shapes.json')
  // this.load.json('shapes', 'assets/scooter.json');
}

function create () {
  var shapes = this.cache.json.get('shapes')

  this.matter.world.setBounds(0, 0, game.config.width, game.config.height)
  // this.add.image(0, 0, 'sheet', 'background').setOrigin(0, 0)

  // sprites are positioned at their center of mass
  var ground = this.matter.add.sprite(0, 0, 'sheet', 'ground', {
    shape: shapes.ground
  })
  ground.setPosition(0 + ground.centerOfMass.x, 1000 + ground.centerOfMass.y) // corrected position: (0,280)
  this.matter.add.sprite(200, 50, 'sheet', 'crate', {
    shape: shapes.crate
  })
  this.matter.add.sprite(250, 250, 'sheet', 'banana', {
    shape: shapes.banana
  })
  this.matter.add.sprite(360, 50, 'sheet', 'orange', {
    shape: shapes.orange
  })
  this.matter.add.sprite(400, 250, 'sheet', 'cherries', {
    shape: shapes.cherries
  })

  var sprites = ['crate', 'banana', 'orange', 'cherries'] // array to choose random sprite from

  for (let i = 0; i < 50; ++i) {
    this.matter.add.sprite(
      getRandomIntMin(30, 100),
      getRandomIntMin(30, game.config.height / 2),
      'sheet',
      sprites[getRandomInt(4)], {
        shape: shapes.banana
      }
    )
  }

  this.input.on(
    'pointerdown',
    function (pointer) {
      // var touchX = pointer.x;
      // var touchY = pointer.y;
      this.matter.add.sprite(
        pointer.x,
        pointer.y,
        'sheet',
        sprites[getRandomInt(4)], {
          shape: shapes.banana
        }
      )
    },
    this
  )

  setInterval(() => {
    console.log('get random sprite')
    for (let i = 0; i < getRandomInt(3); ++i) {
      this.matter.add.sprite(
        getRandomIntMin(30, 100),
        getRandomIntMin(30, game.config.height / 2),
        'sheet',
        sprites[getRandomInt(4)], {
          shape: shapes.banana
        }
      )
    }
  }, 10000)
}

function getRandomInt (max) {
  return Math.floor(Math.random() * Math.floor(max))
}

function getRandomIntMin (min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min) + min) // The maximum is exclusive and the minimum is inclusive
}