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 pathgraphics;
var myPath;

function preload() {}

function create() {
  
  game.stage.backgroundColor = '#3e5f96';

  myPath={player:{x:0,y:0},point2:{x:0,y:50},zombie:{x:200,y:200}};

  pathgraphics = game.add.graphics(game.world.centerX, game.world.centerY);

	pathgraphics.lineStyle(2, 0xff0000);
}
function update(){
	//simulate movement of objects inbetween path
    myPath.zombie.x-=0.4;
    myPath.player.x-=0.2;
    myPath.player.y+=0.4;
  //draw the path for each point in myPath
    drawthePath(myPath);
}
function drawthePath(thePath){
    //clear the graphics, inculding style
    pathgraphics.clear();
    //restate the linestyle
    pathgraphics.lineStyle(2, 0xff0000);    
   for(var point in thePath){
     	pathgraphics.moveTo(myPath.player.x,myPath.player.y);         
     	pathgraphics.lineTo(myPath[point].x,myPath[point].y);
     }
}

function render() {

}