SpaceMan's Blog

A Simple Processing.js Game

I was trying to code something. Then I made a simple game with Processing.js. It is a game where you use your mouse to move the blue circle and avoid all red circles.

You can see it at http://uniteduniversemainsite.freehostia.com/files/processingjs/avoider.html. It uses HTML 5, so it only work for latest, beta (and higher) browsers such as Firefox 3.5, Opera 10, Safari 4 and Chrome 2. The texts such as the score and level indicator only work on Firefox 3.5.
I’m going to make a shooter game next time.

Source code:

class Enemy {
  int x;
  int y;
  int speed;

  Enemy(int x, int speed) {
    this.x = x;
    this.y = 0;
    this.speed = constrain(speed, 0, 10);
  }

  void update() {
    fill(255, 0, 0);
    stroke(128, 0, 0);
    ellipseMode(CENTER);
    ellipse(x, y, 40, 40);
    this.y += speed;
  }
}

PFont font;
ArrayList enemies;
int level;
int score;
int timer;
int count;
int playerX;
int playerY;
byte state = 0;

void setup() {
  size(400, 400);
  font = loadFont("Courier New");
  reset();
}

void reset() {
  enemies = new ArrayList();
  level = 1;
  score = 0;
  timer = 150;
  count = 150;
  playerX = 200;
  playerY = 200;
}

void draw() {
  background(0);
  if (state == 2) {
    if (score >= level * level * 10) {
      level ++;
    }
    count = (1 / level) * 200;
    timer ++;
    if (timer > count) {
      timer = 0;
      enemies.add(new Enemy(random(400), sqrt(level) / 2));
    }

    for (int i = enemies.size() - 1; i > -1; i --) {
      Enemy enemy = (Enemy) enemies.get(i);
      if (enemy.y > height) {
        enemies.remove(i);
        score += level * 2;
        continue;
      }
      if (playerX < enemy.x + 30 && playerX > enemy.x - 30 &&
        playerY < enemy.y + 30 && playerY > enemy.y - 30) {
        state = 1;
        break;
      }
      enemy.update();
    }

    playerX += constrain(mouseX - playerX, -5, 5);
    playerY += constrain(mouseY - playerY, -5, 5);

    fill(0, 0, 255);
    stroke(0, 0, 128);
    ellipseMode(CENTER);
    ellipse(playerX, playerY, 30, 30);

    fill(255);
    textFont(font, 16);
    text("Score: " + score + "  |  Level: " + level, 1, 17);
  } else if (state == 1) {
    fill(255);
    textFont(font, 48);
    text("Game Over", 1, 49);
    textFont(font, 16);
    text("Score: " + score, 15, 93);
    text("Level: " + level, 15, 110);
  } else {
    fill(255);
    textFont(font, 18);
    text("Click to start", 1, 20);
  }
}

void mousePressed() {
  if (state == 1) {
    reset();
    state = 0;
  } else if (state == 0) {
    state = 2;
  }
}

Tags: HTML, HTML 5, Processing, Processing.js