-4

Me and my friend are making a 2D FPS game(don't ask how, to complicated), but we have a simple system where their are 3 zombies, each with changing hit boxes depending on how close/far they are, and health. Our problem is we want to make an open world for this(we already know exactly how, once again don't ask, to complicated), and we don't ant to make a variable for each zombies health, position, and size(closeness), how can we make many zombies in random areas(random within a certain boundary) and they each still have hit boxes, health, and stuff like that? we know its possible as it is done in many other games but we don't know how to, we are using a JS framework called Processing.JS.

EDIT

Thanks to @Kevin Workman for giving me some really useful code but there is still a problem, he gave the code for each zombie having a unique X and Y but not unique health, i took his code and tried to modify it to add this but now the health is stuck at 100. Any help?

ArrayList<Zombie> zombies = new ArrayList<Zombie>();
void setup(){
   size(500, 500);
   for(int i = 0; i < 100; i++){
  zombies.add(new Zombie());
   }
}
void draw(){
   background(0);
   for(Zombie z : zombies){
      z.draw();
   }
}
class Zombie{
   float x = random(500);
   float y = random(500);
   float r = random(5, 20);
   float h = 100;
   void draw(){
      fill(0, 255, 0);
        if(h > 0) {
      ellipse(x, y, r, r);
        }
      if(mouseX > x - r/2 && mouseX < x + r/2 && mouseY > y - r/2 && mouseY < y + r/2 && mousePressed) {
    h --;
  }
  println(h);
  }
}
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
Cubit-Games
  • 75
  • 2
  • 9

2 Answers2

3

Since you're using Processing.js, you can use a class to encapsulate the data you need to keep track of for each zombie. Here is the Processing.js reference for using classes. A simple example might look like this:

ArrayList<Zombie> zombies = new ArrayList<Zombie>();

void setup(){
   size(500, 500);
   for(int i = 0; i < 100; i++){
      zombies.add(new Zombie());
   }
}

void draw(){
   background(0);
   for(Zombie z : zombies){
      z.draw();
   }
}

class Zombie{
   float x = random(500);
   float y = random(500);
   float r = random(5, 20);

   void draw(){
      fill(0, 255, 0);
      ellipse(x, y, r, r);
   }
}
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
  • This worked great, i was able to add a few lines of code that when one was clicked it took down its health, only problem is i cant figure out how to get each one to have individual health, and with its current version, i was to have the zombie disapear when they die, and if i do it with this code it makes all the zombies disapear. any way where they could have individual health? – Cubit-Games Nov 13 '15 at 01:09
  • @Cubit-Games Sure. Just add a `health` variable to the `Zombie` class, just like it currently has `x`, `y`, and `r` variables. Each **instance** has its own health. If you can't get it working, post an [MCVE](http://stackoverflow.com/help/mcve) in another question. – Kevin Workman Nov 13 '15 at 12:41
  • i tried putting a new float next to the other variables in that class, and now the health is just stuck at 100, my code will be in an edit. – Cubit-Games Nov 14 '15 at 03:43
  • Ok, added the edit, that took to long. – Cubit-Games Nov 14 '15 at 22:24
  • @Cubit-Games Your new code is working fine, you just can't tell because all 100 Zombies are printing out their health, but only the one zombie you're clicking has lowering health. Try just holding in the mouse in one zombie for a few seconds, it'll go away. Or to make it easier to see, only add one zombie instead of 100. – Kevin Workman Nov 15 '15 at 03:55
  • oh XD, Thanks! :D Ill make sure when i finish the game(a LONG time) you will be in the credits as "Randomly Generated Zombie Mechanic: Kevin Workman" – Cubit-Games Nov 18 '15 at 21:45
  • @Cubit-Games Haha you don't have to do that. But if you do want to show it off once it's done, come say hi on [Static Void Games](http://staticvoidgames.com/), which is a little programming website I run. – Kevin Workman Nov 20 '15 at 14:27
0

If this is a single-player game (i.e., no networking/servers) then you could simply store the health (and the rest of the single zombie specific details) inside the zombie objects.

Here is a simple jQuery/DOM based example (sorry it's not processing.js, but I haven't used it before and just wanted to provide a quick and basic example):

Fiddle: https://jsfiddle.net/dg5p6c08/

$(function() {
    // namespace
    var ZOMBIEGAME = ZOMBIEGAME || {};
    // zombie class
    ZOMBIEGAME.zombie = function () {
        this.health = 3;
        this.x = 0;
        this.y = 0;
        this.dead = false;
        this.takeDamage = function (damage) {
            this.health -= damage;
            if (this.health < 1) {
                this.dead = true;
            }
        }
    }
 // make zombie objects
    var zombies = [];
    for (var i = 0; i < 10; i++) {
        var z = new ZOMBIEGAME.zombie();
        z.x = Math.floor(Math.random() * 480);
        z.y = Math.floor(Math.random() * 480);
        zombies.push(z);
    }
 // make DOM zombies
    for (var i = 0; i < zombies.length; i++) {
        var zDom = '<div class="zombie" data-id="' + i + '" style="top: '
         + zombies[i].y + 'px; left: ' + zombies[i].x + 'px;"></div>';
        $('#game').append(zDom);
    }
    // click zombies
    $('.zombie').on('click', function() {
     var id = parseInt($(this).attr('data-id'));
        zombies[id].takeDamage(1);
        if (zombies[id].dead) {
            $(this).css('background', '#bbb');
        }
    });
});
body {
    font-family: sans-serif;
}
#game {
    width: 512px;
    height: 512px;
    position: relative;
    background: #ddd;
}
.zombie {
    width: 32px;
    height: 32px;
    background: #A1D490;
    position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click zombies 3 times to kill.</p>
<div id="game"></div>
Bitwise Creative
  • 4,035
  • 5
  • 27
  • 35
  • The demo you made works great, unfortunately i dont know squat about jquery and how to migrate this code to processing, the demo you made is EXACTLY how i want to to be, only the squares are replaced with images and they have different independent sizes, thanks you contributing though! – Cubit-Games Nov 13 '15 at 02:04