top of page

Zombie game - Midterm project

Instructor: Scott Fitzgerald

Tool: p5.js

Ps. My high score is only 117 😞  How about yours?

Initial idea

As we all know, a zombie cannot live without brains, so in this game, we will help a zombie collect brains so it can live longer. For the initial idea, I drew a sketch to illustrate characters and elements within the game.

There will be three classes, zombie, brain, and bomb. If there is enough time to implement more features, I will add another class-bomb. The classes and relevant properties are listed below:

  • function zombie() - controlled by “←” and “→” or by mouse - will die when eats a bomb - its initial and maximum lifetime is 10 seconds and it is a countdown

  • function brain()  - various sizes and initial locations - drops from the top of the canvas and disappears at the bottom of the canvas - the speed of dropping is getting faster and faster as game goes on - benefits zombie and extends the zombie’s lifetime

  • function bomb()  - constant sizes - various initial locations - drops from the top of the canvas and disappears at the bottom of the canvas - the speed of dropping is getting faster and faster along with the zombie’s lifetime increase - kills zombie

The development process

The development process of the game as a whole was getting well, but I still encountered some problems and finally solved them.

Problem: collision detection At first, I wrote many operations to detect, but there always was something wrong. So I searched it at stack overflow and found an elegant solution.

Collision detection

Problem: blinking and jumping brains and bombs I used arrays to store brains and bombs created during the game. Then a for loop was used to update, render, detect every element within the array. To optimize game preference,  I must delete an element when it is out of the screen ( this.y>height). But when an element was deleted, some of other elements will blink and jump. I was very confused when I first saw the problem. The original code is listed below.

The original code

Now I find the reason. The length of original array is got when the for loop is called. If an element is out of the screen and deleted, the length of the array will change and the index of elements will also change. So some elements of the array don’t get updated within the for loop and they look like blinking and jumping.

The problem is solved by recording the deleted item id in the for loop then removing it after the for loop.

The updated code

Next Step

I am so happy that I finished my zombie game and I achieved all of the initial goals! Some goals were even exceeded, there are still some problems.

  • Since brain and bomb have similar properties, should I further abstract a new parent class from them and make them as inheritances? I think the answer is yes, but I don’t know how to do that in JavaScript yet.

  • I use document.location.reload() to restart the game. It works fine when I open it with Safari/Chrome browser, but it doesn’t work in openpocessing. Why?

  • How to record the high score?


bottom of page