[icm week 3] Allergic to Love v. 1

Screenshot 2015-09-24 03.21.50

[TLDR: Here’s my (unfinished but finished-enough-for-this-assignment) game, Allergic to Love.]

Oh man, this was a rough one. The beginning was good: Esther and I partnered up to start this project. I really wanted to make a game, so we went down the path of trying to build something that involved shooting at objects that moved on the screen.

Together we got as far as making things fall down, making things shoot up, and coming up with an interim solution for making objects disappear as they got hit. Esther did some pretty awesome work figuring out how to use arrays and create functions, and then we took that code and built separate things on top of it.

I quickly realized that what I wanted to do this week was beyond the scope of what we’ve learned so far in class, so it was quite difficult to sort out some specific things. Once I came up with the theme of the game, it took me a really long time to figure out how to make all the falling objects in the shape of hearts. After some experimenting with for loops, making functions, arrays and bezier curves, I got it!

Screenshot 2015-09-23 19.55.00

This was very exciting. I started adding things like making them fall from different heights and at different speeds. Some of the trickiest stuff to figure out was how to make things happen in the win state and lose state. I ended up having to add a bunch of Boolean arrays. It also started to come together aesthetically.

Screenshot 2015-09-24 03.20.04

I added some fun things, like making the girl’s skin turn green every time a heart hit the ground. (She’s allergic, after all.)

//if the heart hits the ground
    if (hearts.y[i] == height) {
      if (hearts.hitTheGround[i] === false) {
        hearts.onGround++; // skin changes color
        skin.r = skin.r - 10;
        skin.g = skin.g + 5;
        skin.b = skin.b + 5;
        hearts.clr[i] = (0); //hearts turn black
      }
      hearts.hitTheGround[i] = true;
    }

I also had some crazy mishaps experimenting with the gradient that frankly look way cooler than what I was going for.

Screenshot 2015-09-24 00.55.23

There’s still a lot I want to do, and the code is incredibly unfinished and messy. But it’s almost 4 am and I got this thing in a playable state, so I guess now is as good a time as any to stop. And even though I’ve been playing it all evening, it’s pretty hard! I feel like there’s still a lot to improve on here, but this will have to do for version 1.

Screenshot 2015-09-24 03.38.15

Check out Allergic to Love, v.1!

My (extremely messy) code is below.

// oh boy this code is in an extremely unfinished state! read at your own risk

var laser = {
  y: 500,
  speed: 50
}

var hearts = {
  clr: [],
  amt: 15,
  speed: [],
  broken: 0,
  onGround: 0,
  hitByLaser: [],
  hitTheGround: [],
  x: [],
  y: [],
}

var skin = {
  clr: 0,
  r: 235,
  g: 179,
  b: 169,

}

var face1 = {
  x: 0,
  y: 125,
  speed: 10,
}

var face2 = {
  x: 1000,
  y: 375,
  speed: 10,
}

var skincolor;
var mouthAngle1;
var mouthAngle2;
var winAngle;



function setup() {
  createCanvas(1000, 500);

  //initialize the first position of the hearts
  for (i = 0; i < hearts.amt; i++) {
    hearts.x[i] = random(0, width); //hearts will fall from a random x location on the canvas
    hearts.y[i] = random(-700, 0); //hearts will fall from a random heigh above the canvas 
    hearts.speed[i] = random(2, 6); //hearts will fall at a random speed 
    hearts.hitByLaser[i] = false; //at the beginning, hearts have not been hit by the laser
    hearts.hitTheGround[i] = false; //at the beginning, hearts have not hit the ground
    hearts.clr[i] = color(255, random(0, 255), random(0, 255));
    drawHearts(hearts.x[i], hearts.y[i], hearts.speed[i], hearts.clr[i])
  }
}

function drawHearts(x, y, speed, clr) {
  strokeWeight(7);
  stroke(clr);
  fill(clr);
  bezier(x, y, x - 12, y - 12, x - 11, y + 8, x, y + 14); //left side
  bezier(x, y, x + 12, y - 12, x + 13, y + 8, x, y + 14); //right side
}

function drawExplosion(x, y, w, h) {
  fill(255);
  ellipse(x, y, w, h);
}


function draw() {
  mouthAngle1 = (PI + 0);
  mouthAngle2 = (TWO_PI + 0);

  skinColor = color(skin.r, skin.g, skin.b);


  //gradiant
  strokeWeight(1);
  for (var g = 0; g < height; g++) {
    //stroke(g, 32, 167);
    stroke(g, 30, 120);
    line(0, g, width, g);

  }

  //background faces
  fill(248, 166, 255);
  stroke(0);
  strokeWeight(10);
  ellipse(face1.x, face1.y, height / 2, height / 2)
  face1.x = face1.x + face1.speed;
  line(face1.x - 50, face1.y - 50, face1.x - 20, face1.y - 20);
  line(face1.x - 50, face1.y - 20, face1.x - 20, face1.y - 50);
  line(face1.x + 50, face1.y - 50, face1.x + 20, face1.y - 20);
  line(face1.x + 50, face1.y - 20, face1.x + 20, face1.y - 50);
  arc(face1.x, face1.y + 70, 100, 80, mouthAngle1, mouthAngle2);
  if (face1.x > width + height / 2) {
    face1.x = -125;
  }
  ellipse(face2.x, face2.y, height / 2, height / 2)
  face2.x = face2.x - face2.speed;
  line(face2.x - 50, face2.y - 50, face2.x - 20, face2.y - 20);
  line(face2.x - 50, face2.y - 20, face2.x - 20, face2.y - 50);
  line(face2.x + 50, face2.y - 50, face2.x + 20, face2.y - 20);
  line(face2.x + 50, face2.y - 20, face2.x + 20, face2.y - 50);
  arc(face2.x, face2.y + 70, 100, 80, mouthAngle1, mouthAngle2);
  if (face2.x < 0 - height / 2) {
    face2.x = 1125;
  }



  for (var i = 0; i < hearts.amt; i++) {
    //if the laser hits the heart....
    if (hearts.y[i] <= laser.y + 20 &&
      hearts.y[i] >= laser.y - 20 &&
      mouseX <= hearts.x[i] + 20 &&
      mouseX >= hearts.x[i] - 20 &&
      hearts.hitByLaser[i] === false) {
      hearts.hitByLaser[i] = true; //...make hitByLaser true 
      hearts.broken++; //...add to the number of broken hearts
      drawExplosion(mouseX, hearts.y[i], 50, 50);

    }
    // if the laser is not hitting the heart....
    if (hearts.hitByLaser[i] === false) {
      hearts.y[i] += hearts.speed[i]; //make the heart fall

      //makes sure the hearts stay on the screen
      if (hearts.y[i] > height) {
        hearts.y[i] = height
      }// oh boy this code is in an extremely unfinished state! read at your own risk

var laser = {
 y: 500,
 speed: 50
}

var hearts = {
 clr: [],
 amt: 20,
 speed: [],
 broken: 0,
 onGround: 0,
 hitByLaser: [],
 hitTheGround: [],
 x: [],
 y: [],
}

var skin = {
 clr: 0,
 r: 235,
 g: 179,
 b: 169,

}

var face1 = {
 x: 0,
 y: 125,
 speed: 10,
}

var face2 = {
 x: 1000,
 y: 375,
 speed: 10,
}

var skincolor;
var mouthAngle1;
var mouthAngle2;
var winAngle;



function setup() {
 createCanvas(1000, 500);

 //initialize the first position of the hearts
 for (i = 0; i < hearts.amt; i++) {
 hearts.x[i] = random(0, width); //hearts will fall from a random x location on the canvas
 hearts.y[i] = random(-650, 0); //hearts will fall from a random height above the canvas 
 hearts.speed[i] = random(0.5, 3); //hearts will fall at a random speed 
 hearts.hitByLaser[i] = false; //at the beginning, hearts have not been hit by the laser
 hearts.hitTheGround[i] = false; //at the beginning, hearts have not hit the ground
 hearts.clr[i] = color(255, random(0, 255), random(0, 255));
 drawHearts(hearts.x[i], hearts.y[i], hearts.speed[i], hearts.clr[i])
 }
}

function drawHearts(x, y, speed, clr) {
 strokeWeight(7);
 stroke(clr);
 fill(clr);
 bezier(x, y, x - 12, y - 12, x - 11, y + 8, x, y + 14); //left side
 bezier(x, y, x + 12, y - 12, x + 13, y + 8, x, y + 14); //right side
}

function drawExplosion(x, y, w, h) {
 fill(255);
 ellipse(x, y, w, h);
}


function draw() {
 mouthAngle1 = (PI + 0);
 mouthAngle2 = (TWO_PI + 0);

 skinColor = color(skin.r, skin.g, skin.b);


 //gradiant
 strokeWeight(1);
 for (var g = 0; g < height; g++) {
 //stroke(g, 32, 167);
 stroke(g, 30, 120);
 line(0, g, width, g);

 }

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: