var ya = 0;

var Right = 1;

var Begin = 0;

var breed = 40;

var hoog = 50;

var radi = 700;

var Light = 200

​

window.addEventListener("keydown", function(e) {

    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {

        e.preventDefault();

    }

}, false);

​

function preload() {

​

  player_image = loadImage("VCD_character.png");

  player_image_left = loadImage("VCD_character_Left.png");

  //player_injured_image = loadImage("images/player.png");

  //tiles_image = loadImage("images/tiles.png");

  Back_ground = loadImage("VCD_Background.png");

  River_down = loadImage("VCD Foreground.png")

  Opening_page = loadImage("Opening Page.png")

​

}

​

function setup() {

  createCanvas(800, 600);

frameRate(24)

}

​

function draw() {

  //We start with the front page whith further explanation

  background(0, 0, 0);

​

  //after the mousclick the painting is shown with the possibility to walk though the       painting and experience the scenery

  if (Begin < 1) {

    image(Opening_page, xa, ya);

    textSize(16);

    fill(0, 0, 0);

    text('P r e s s', 700, 30, 0);

    text('t h e', 700, 150, 0);

    text('m o u s e', 700, 230, 0);

    text('T o', 650, 30, 0);

    text('b e g i n', 650, 95, 0);

    text('T h e n', 600, 30, 0);

    text('m o v e', 600, 130, 0);

    text('w i t h', 600, 230, 0);

    text('T h e', 550, 30, 0);

    text('a r r o w', 550, 110, 0);

    text('k e y s', 550, 230, 0);

    text('Y o u r', 500, 30, 0);

    text('m o u s e', 500, 130, 0);

    text('c o n t r o l s', 450, 30, 0);

    text('L i g h t', 450, 220, 0);

  }

​

  if (mouseIsPressed) {

    Begin = 1

​

  }

​

  if (Begin > 0) {

    background(0, 0, 0);

    image(Back_ground, xa, ya);

    if (Right >= 1) {

      image(player_image, 400, 250, breed, hoog);

    }

    if (Right < 1) {

      image(player_image_left, 400, 250, breed, hoog);

    }

    image(River_down, xa, ya);

    po=random(1,1.01)

    pa=random(1,1.5)

   fill(100*po,50*po,0,50*pa*po);

  strokeWeight(500)

    stroke(0,0,0,Light)

  circle(420-(420/10)+mouseX/10, 260-(260/10)+mouseY/10, po*radi );

 circle(420*po*po*po-(420/10)+mouseX/10, 260*po*po*po-(260/10)+mouseY/10, po*radi,radi );

     circle(420*po-(420/10)+mouseX/10, 260*po*po-(260/10)+mouseY/10, radi,radi*po );

    if (keyIsDown(LEFT_ARROW)) {

      if (xa <= 330) {

        xa += 5;

        Right = 0;

​

      }

    }

    if (keyIsDown(RIGHT_ARROW)) {

      if (xa >= -3550) {

        xa -= 5;

        Right = 1;

​

      }

    }

​

    if (keyIsDown(UP_ARROW)) {

      if (ya <= 170) {

        ya += 5;

​

​

      }

    }

    if (keyIsDown(DOWN_ARROW)) {

​

      if (ya >= -370) {

​

​

        ya -= 5;

​

      }

    }

​

​

    //This text is to check the ya and xa coordinates for further testing

    //text(ya, 100, 100);

    //text(xa, 120, 100);

  }

}

​

​