Code does not run on website and exe doesnt work either

edited August 2016 in JavaScript Mode

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!

Tagged:

Answers

Sign In or Register to comment.