[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!
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.
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.
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.
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);
}
nicole he's itp blog archive 