JSFiddle - React, Tailwind, and code Playground

by D Sami

HTML

<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.7.5/phaser.min.js"></script>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
  preload: preload,
  create: create,
  update: update,
  render: render
});

var player;
var  currentPosFish ;
var updownFish;
function preload() {
  game.load.image('fish','https://lh4.googleusercontent.com/yCJtTB6b9v0ewFtWqgi6fpBnBGy9BPGlQvj7rVJliBzGA3oomzo4fQNg2yowdiMLqwKBSfQ1Uv3Ieh44nZlTVBOQDTkw5amkCvKK2TJ05pbBlmuOptj4le7rFR8OjGNx5w');
}

function create() {
  game.stage.backgroundColor ='#3e5f96';
  
  //add the sprite somewhere
	player=game.add.sprite(300,300,'fish');
  
 	//the target position
  currentPosFish = (game.height / 4) + 20;
  //move towards the target position via tween, the -1 indicates a loop
 	updownFish= game.add.tween(player).to({y: currentPosFish}, 1000, "Linear", true,0,-1);
  
  //reverse the movement once you are at target position
	updownFish.yoyo(true,0);
  
  //pause it for now since we act upon input
  updownFish.pause()

}

function update() {
  playerInput();
}

function render() {
	game.debug.text("press A to animate",300,300);
}

function playerInput(){
     if (game.input.keyboard.isDown(Phaser.Keyboard.A)){
     	updownFish.resume();
     }
}