Code does not run on website and exe doesnt work either

Laloma

Hey, long time ago I learned how to programm with processing in university, and now I wanted to make a kind of personal game (snake) for a friend's birthday on friday. I found some code for snake online and modificated it. After that, I wanted it to run on a website inside an html document ( found tutorials online etc). Problem: It doesnt work, all I get is the black background, but no snake and no food. Same thing when I try to export it, when I start the exe, I only get a window with the black background.

This is the code:

PImage andreas;
PImage lukas;
PImage leonhard;
PImage leon;
PImage nico;

color col=color(255,255,192);
color foodColor = color(255,0, 0);
float speed = 100;
int cx, cy;

int moveX = 0;
int moveY = 0;
int snakeX = 0;
int snakeY = 0;
int foodX = -1;
int foodY = -1;
boolean check = true;
int []snakesX;
int []snakesY;
int snakeSize = 1;
int windowSize = 800;
boolean gameOver = false;
int randPic = (int)random(1,5);

void setup(){
  size(800, 800);

  andreas =loadImage("andreas.png");
  lukas =loadImage("lukas.png");
  leonhard =loadImage("leonhard.png");
  leon = loadImage("leon.png");
  nico = loadImage("nico.png");

  background(0);
  speed = 100;
  speed=(speed/frameRate)/2;
  snakesX = new int[100];
  snakesY = new int[100];

  cx = width/2;
  cy = height/2;

  snakeX = cx-20;
  snakeY = cy-20;//
  foodX = -1;
  foodY = -1;
  gameOver = false;
  check = true;
  snakeSize =1;
}

void draw(){

  if(speed%10 == 0){
    background(0);
    runGame();
  }
  speed++;
}

void reset(){
  snakeX = cx-20;
  snakeY = cy-20;//
  gameOver = false;
  check = true;
  snakeSize =1;
  moveY = 0;
  moveX = 0;
}

void runGame(){
  if(gameOver== false){
    drawfood();
    drawSnake();
    snakeMove();
    ateFood();
    checkHitSelf();
  }else{
      String modelString = "game over";
      textAlign (CENTER);
      //textFont(Font);
      text(modelString,windowSize/2,windowSize/2,40);
  }
}
void checkHitSelf(){
   for(int i = 1; i < snakeSize; i++){
       if(snakeX == snakesX[i] && snakeY== snakesY[i]){
          gameOver = true;
      }
   } 
}
void ateFood(){
  if(foodX+10 == snakeX && foodY+10 == snakeY){
    //if(snakeX >= foodX && snakeX >= foodX+20 && snakeY >= foodY && snakeY >= snakeY+20){
     check = true;
     snakeSize++;
     randPic = (int)random(1,5);
  }
}

void drawfood(){
  fill(foodColor);
  while(check){
    int x = (int)random(1,(windowSize-10)/20);
    int y =  (int)random(1,(windowSize-10)/20);
    foodX = 10+x*20;
    foodY = 10+y*20;

    for(int i = 0; i < snakeSize; i++){
       if(x == snakesX[i] && y == snakesY[i]){
         check = true;
         i = snakeSize;
       }else{
         check = false;
       }
    }

  }

  if (randPic == 1){
    image(leon, foodX, foodY);
    leon.resize(20,20);
  }
  if (randPic == 2){
    image(leonhard, foodX, foodY);
    leonhard.resize(20,20);
  }
  if (randPic == 3){
    image(lukas, foodX, foodY);
    lukas.resize(20,20);
  }
  if (randPic == 4){
    image(nico, foodX, foodY);
    nico.resize(20,20);
  }
  if(randPic == 5){
    image(andreas, foodX, foodY);
    andreas.resize(20,20);
  }

  //rect(foodX, foodY, 20, 20);

}
void drawSnake(){
  fill(col);

  for(int i = 0; i < snakeSize; i++) {
    int X = snakesX[i];
    int Y = snakesY[i];

    rect(X-10,Y-10,20,20);
  }

  for(int i = snakeSize; i > 0; i--){
    snakesX[i] = snakesX[i-1];
    snakesY[i] = snakesY[i-1];
  }
}

void snakeMove(){
  snakeX += moveX;
  snakeY += moveY;
  if(snakeX > windowSize-20 || snakeX < 20||snakeY > windowSize-20||snakeY < 20){
     gameOver = true;
  }
  snakesX[0] = snakeX;
  snakesY[0] = snakeY; 
}

void keyPressed() {
  if(keyCode == UP) {  if(snakesY[1] != snakesY[0]-20){moveY = -20; moveX = 0;}}
  if(keyCode == DOWN) {  if(snakesY[1] != snakesY[0]+20){moveY = 20; moveX = 0;}}
  if(keyCode == LEFT) { if(snakesX[1] != snakesX[0]-20){moveX = -20; moveY = 0;}}
  if(keyCode == RIGHT) { if(snakesX[1] != snakesX[0]+20){moveX = 20; moveY = 0;}}
  if(keyCode == 'R') {reset();}
}

The HTML-Code: (test.pde is the name of the processingfile, processing.js and all the images are included in the same folder, I tried to run it on different browsers and even computers...)

<html>
    <head>
        <title>Processing on the Web</title>
        <meta charset ="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale= 3.0" />
        <script type="text/javascript" src="processing.js"></script>

    </head>
    <body>
        <canvas id="theCanvas" data-processing-sources="test.pde"></canvas>
    </body>
</html>

I also tried to paste the code directly into the HTML-file, didn't work either.

I would be very happy if somebody could figure out what the problem is, because I want to give it to my friend on friday. Thanks a lot!

GoToLoop

http://www.OpenProcessing.org/sketch/create
http://ProcessingJS.org/reference/
http://ProcessingJS.org/articles/p5QuickStart.html

BleuBox

The issue may be that the sketch uses images, which would be fine in the Processing IDE because you can add files to the sketch, but online it may not work because the sketch does not know which image files to use.