ICM Week 8

Last week’s class was about dealing with media content. I wanted to do something very artistic and unique, but after struggling for several days to come up with a cool idea, I eventually made a game. Therefore, it is nowhere near the “cool stuff”. Why I always think up funny things rather than serious and abstract ones? The reality is different from the ideal…  Anyway, It’s quite funny to play especially on Halloween day.

The rule of the game is like below:

  • There are 10 stages in total
  • A player has to find a key image on the whole picture of each stage and hit it
  • Each stage has a spotlight in a different size. The player can only see the picture through this light.
  • The higher level the player gets through, the smaller the light becomes.
  • The player is given 30 seconds for each stage, and 5 lives for the whole game
  • If the player can’t find the key image in 30 seconds, the game will be over
  • Whenever the player hit a wrong spot, their lives are reduced by one.
  • If the player loses all the lives, the game will be over

The following is the part where I manipulate pixels or audio files:

It is executed in the Stage class.

displayGame() {
  image(this.bgImg, 0, 0);
  for(let y=0; y<height; y++) {
  	for(let x=0; x<width; x++) {
    	let idx = 4*(x+y*width);
    	let dis = dist(x,y,mouseX,mouseY);
    	if(dis>spotRad) { 
      	pixels[idx] = 0;
      	pixels[idx+1] = 0;
      	pixels[idx+2] = 0;
   // this.updateSpotRad();


It is getting faster as the remaining time is less than 10 seconds

function countDown() {
  if(playtime > 0) {
 //   console.log(playtime);
    if(playtime > 10) timerHtml.style('color', 'white');
    else {
      timerHtml.style('color', 'red');
    timerHtml.html('00:' + nf(playtime,2));
  else if(playtime==0) {
//    playtime=0;
    timerHtml.style('color', 'red');
    life = 0;


Besides the images and the sound files, I also loaded csv files and fonts. The csv files have the links of the giphy images which appear at the end of the game. I chose tem fun and cute images for the game clear screen while creepy images for the game over screen. One of them is randomly chosen and shown:

function preload() {
  tricks = loadTable('assets/tricks.csv', 'csv', 'header');
  treats = loadTable('assets/treats.csv', 'csv', 'header');
  halloweenFont = loadFont('fonts/Creepster-Regular.ttf');

function gameOver() {
      if(!gameOverSoundPlayed) {
          let randomIdx = floor(random(0,tricks.length));
          endingImg = createImg(tricks[randomIdx]);

function gameClear() {
      if(!gameClearSoundPlayed) {
          let randomIdx = floor(random(0,treats.length));
          endingImg = createImg(treats[randomIdx]);

Here are the main trouble shootings and a remaining problem in this game coding

  • gif image can’t animate in draw() as the image is loaded every frame of the canvas and can only show its first frame. To solve this problem, I created the image element using dom library and put it on the canvas by giving it an absolute position
  • When I put the gameoverSound.play() or the gameclearSound.play() directly into the gameOver() and gameClear() respectively, they sounded really weird. The reason was that those two functions are repeatedly called in draw() function so that those sounds are also played again and again. I first tried to fix it by making them start playing only when it is not being played. Though in this way, they start playing again when they finish playing. So I eventually set a boolean variable to have the sounds play only once.
  • I initially used mousePressed() function to decide whether the player’s hitting is correct or not. However, it considers pressing the ‘Restart’ button as a wrong one and reduces a life in the newly started level 1 stage. Although I tried to prevent it by checking the player is currently not in the middle of the play, it was no use because the mouse pressed event can be detected after the game is renewed. So I changed the mousePressed() function to mouseClicked() function to solve this issue.
  • csv files are successfully loaded in the editing mode but seems not in the full-screen mode and embedded mode. I tried to put the whole URL as I did on the URLs in the createImg() function, but it even didn’t work both in edit mode either if I did so. At the end of the day, I manually pushed all the URLs in string arrays and they work fine in any mode now.

This is the screenshot of the game:

I could include the actual game but I don’t, because I wouldn’t like its music comes out when this posting is opened. I should’ve made a ‘Start’ button. Instead, I leave the link of its full screen: http://alpha.editor.p5js.org/full/HyMXNUf0-


The full code and the completed game is available here:





Posted in ICM

Leave a Reply

Your email address will not be published. Required fields are marked *