//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-10
//
//variables for image
var starImg = "https://i.imgur.com/0ns3TvE.png";
var monsterImg = "https://i.imgur.com/hqvDkxx.png";
var star;
var monster;
//variables for star positions
var sx = [];
var sy = [];
//variables for objects
var met = [];
var monst = [];
//variable for points
var counter = 0;
//loads images
function preload() {
star = loadImage(starImg);
monster = loadImage(monsterImg);
}
function setup(){
createCanvas(480,380);
//intializes meteor by calling make meteor. stores them in meteor array
for (num = 0; num < 4; num++) {
var ogX = random(width/2+width/4,width);
met[num] = makeMet(ogX);
}
//intializes monster by calling make monster
monst[0] = makeMonster();
//creates random x and y locations for star
for (s = 0; s < 15; s++) {
sx.push(random(width));
sy.push(random(height));
}
//loads star picture
star.loadPixels();
}
function draw(){
background(6,13,29);
//shows picture of star in random x and y locations
for (st = 0; st < 15; st++) {
image(star,sx[st],sy[st]);
}
//displays meteor
showMet();
//constrains so space ship won't go off of screen
var y = constrain(mouseY,45/2,height-38/2);
var x = 80;
//space ship
fill(106,139,189);
arc(x,y,45,45, PI, 0);
fill(253,194,74);
ellipse(x,y+6,50,25);
ellipse(x,y+4,80,15);
fill(68,110,172);
ellipse(x,y,80,15);
//displays monster
showMonster();
//keep tracks of points
fill(255);
text("Points:" + counter, 15, 20);
text("Avoid the meteors!", width/2-50, 20);
}
function showMet() {
//displays and moves all meteors in meteor array
for (var i = 0; i < met.length; i++) {
met[i].move();
met[i].draw();
}
}
function showMonster() {
//displays and moves monster
monst[0].move();
monst[0].draw();
}
function drawMet() {
//overall meteor
var metSize = this.metSize;
fill(146,164,174);
noStroke();
//meteor body
ellipse(this.x,this.y,metSize,metSize);
fill(75,99,107);
//meteor blimps
ellipse(this.x - 16, this.y, metSize/8,metSize/8);
ellipse(this.x, this.y+17, metSize/8,metSize/8);
ellipse(this.x + 8, this.y - 10, metSize/4, metSize/4);
ellipse(this.x + 10, this.y + 10, metSize/10, metSize/10);
//flames behind
fill(247,223,61);
rect(this.x+metSize/2+5, this.y-18,this.metSize+10,5,5);
fill(243,161,28);
rect(this.x+metSize/2+5,this.y-10,this.metSize+10-10,5,5);
fill(247,223,61);
rect(this.x+metSize/2+5, this.y-2, this.metSize+10-20,5,5);
fill(243,161,28);
rect(this.x+metSize/2+5,this.y+5,this.metSize+10,5,5);
}
function moveMet() {
//moves meteor by speed
this.x += this.speed;
//moves meteor by meteor object speed
if (this.x < -this.metSize/2-(this.metSize+10)) {
//if meteor slips of successfully, increase point
counter += 1;
this.x = width+this.metSize/2;
this.y = random(30,height-25);
}
}
function makeMet(ogX) {
//based off of provided code
//creates meteor object
meteor = {x: ogX,
y: random(30,height-25),
speed: random(-4,-1),
move: moveMet,
metSize: int(random(40,80)),
draw: drawMet}
return meteor;
}
function drawMonster() {
//displays monster picture
image(monster,monty.x,monty.y);
monster.loadPixels();
}
function moveMonster() {
//moves monster by monster object speed
monty.x += monty.speed;
//if off screen, re start monster
if (monty.x < -monty.x-200) {
monty.x = width+1500;
monty.y = random(30,height-100);
}
}
function makeMonster() {
//makes monster object
monty = {x: width,
y: random(30,height-100),
speed: random(-2,-0.5),
move: moveMonster,
draw: drawMonster}
return monty;
}
I enjoyed this project more than the past projects. It had a lot of room for creativity. I first started off by sketching my idea and then went off to coding. For future improvements for this, with more time, I would find a way to incorporate shooting something when the mouse is clicked and if the shot x position reached the meteor or monster, then the monster would disappear. I would also try to find a way to decrease the points if the mouseY was in the same position as a meteor. All in all, I enjoyed this project and am happy with my final result.
Caption: Above is my first sketch of what I wanted the canvas to look like.
Caption: Above is my ugly monster. I drew it Illustrator and then loaded it onto imgur.
**edited b/c star image got removed from Imgur.