![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
/* Chelsea Fan and Katrina Hu
Section 1B and Section 1C
chelseaf@andrew.cmu.edu and kfh@andrew.cmu.edu
Project-15
*/
//important variables
var killCount = 0;
var score = 0;
var yCoord = 0;
var snow = [];
var bear = [];
var c1;
var c2;
function setup() {
createCanvas(600, 480);
frameRate(60);
//initial collection of bears
for (i = 0; i < 1; i++) {
var bearY = -40;
bear[i] = makeBear(bearY);
}
//setting color of background
c1 = color(106, 197, 252);
c2 = color(126, 127, 207);
//initial collection of snows
for (i = 0; i < 60; i++) {
var snowx = random(width);
var snowy = random(0, height);
snow[i] = makeSnow(snowx, snowy);
}
}
function draw() {
setGradient(c1, c2);
///////// BY CHELSEA
//draw Sun
noStroke();
fill(255, 252, 227, 120);
ellipse(80, 250, 85, 85);
fill(255, 246, 179, 140);
ellipse(80, 250, 70, 70);
fill(255, 238, 112, 200);
ellipse(80, 250, 50, 50);
//draw background
drawMountains2();
drawMountains();
//bears
updateBear();
removeBearFromView();
addBear();
drawKill();
//more scenery things
drawWater();
drawIce();
snows();
//end of game
endGame();
}
///////// BY KATRINA
function drawKill() {
//printing score and number of bears killed
fill(255);
textSize(20);
textAlign(RIGHT);
noStroke();
text("Kill Count = " + killCount, width - 70, 50);
text("Score = " + score, width - 70, 75);
}
///////// BY CHELSEA
function endGame() {
//end screen if five bears killed
//and restart game button
if(killCount == 5) {
textSize(50);
fill(255);
textAlign(CENTER);
text("GAME OVER", width/2, height/2-100);
for (var i = 0; i < bear.length; i++) {
bear[i].speed = 0;
}
textSize(25);
fill(255, 150);
noStroke();
rect(width/2 - 80, height/2 - 40, 160, 60);
fill(50);
text("RESTART", width/2, height/2);
}
}
///////// BY KATRINA
function mouseClicked() {
//if restart button clicked, reset game
if(killCount == 5) {
if (mouseX > 220 & mouseX < 380 && mouseY > 200 && mouseY < 260) {
bear = [];
killCount = 0;
score = 0;
for (var i = 0; i < bear.length; i++) {
bear[i].speed = 2;
}
}
}
}
///////// BY KATRINA
function setGradient(c1, c2) {
//gradient color sky background
noFill();
for (var y = 0; y < height; y++) {
var inter = map(y, 0, height, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, y, width, y);
}
}
///////// BY CHELSEA
function drawWater() {
//water color and transparency
fill(0, 107, 214, 100);
noStroke();
//water level
rect(0, height - (96 * killCount) - 20, width, height + 30)
}
///////// BY KATRINA
function drawIce() {
fill(245, 68, 59);
rect(mouseX + 8, height - (96 * killCount) - 100, 55, 30); //sign
textSize(10);
textFont('Georgia');
fill(255);
rect(mouseX + 8, height - (96 * killCount) - 100, 8, 75); //pole
text('NORTH', mouseX + 55, height - (96 * killCount) - 90); //words
text('POLE', mouseX + 50, height - (96 * killCount) - 75);
fill(162, 232, 250)
rect(mouseX, height - (96 * killCount) - 15, 100, 4); //ice
fill(255);
rect(mouseX, height - (96 * killCount) - 25, 100, 10); //ice
fill(245, 68, 59);
for(lines = 0; lines < 4; lines++) { //stripes
rect(mouseX + 8, height - (96 * killCount) - lines * 20 - 33, 8, 7);
}
fill(255, 242, 145);
ellipse(mouseX + 12, height - (96 * killCount) - 106, 15, 15) //top of pole
}
///////// BY CHELSEA
function drawSnow() {
noStroke();
fill(255, 255, 255, 170); ///snow color and transparency
push();
translate(this.x2, this.y2); //draw snow at x2, y2
ellipse(10, 10, 5, 5); //snow shape
pop();
}
///////// BY CHELSEA
function makeSnow(xlocation, ylocation) {
//snow object
var makeS = {x2: xlocation,
y2: ylocation,
snowx: random(0, width),
snowy: 0,
speed: random(1, 2),
move: moveSnow,
draw: drawSnow}
return makeS;
}
///////// BY CHELSEA
function moveSnow() {
this.y2 += this.speed; //speed of snow moving
if (this.y2 >= height - (96 * killCount) - 30) { //restart snow on top
this.y2 -= height;
}
}
///////// BY CHELSEA
function snows() {
//move and draw all individual snows
for(i = 0; i < snow.length; i++) {
snow[i].move();
snow[i].draw();
}
}
///////// BY CHELSEA
function drawMountains(){
noStroke();
fill(192, 200, 207); //mountain color
beginShape();
for (i = 0; i < width; i++) {
var mountainSpeed = .0005; //speed of mountains moving
var mountainDetail = 0.009; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 1.2, height/2, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
///////// BY CHELSEA
function drawMountains2(){
noStroke();
fill(245); //mountain color
beginShape();
for (i = 0; i < width; i++) {
var mountainSpeed = .0003; //speed of mountains moving
var mountainDetail = 0.007; //smoothness of mountains
var t = (i * mountainDetail) + (millis() * mountainSpeed);
//mountain y coord
var y = map(noise(t), 0, 2, height/2, height);
//keep drawing mountain
vertex(i, y);
}
//height constriant of mountains
vertex(width, height);
//restart mountains at left side
vertex(0, height);
endShape();
}
///////// BY KATRINA
function updateBear() {
//move and draw all individual bears
for (var i = 0; i < bear.length; i++) {
bear[i].move();
bear[i].display();
}
}
///////// BY KATRINA
function removeBearFromView() {
//if bear lands on ice, delete bear
for(var i = 0; i < bear.length; i++) {
if (bear[i].x > mouseX & bear[i].x < mouseX + 100 && (bear[i].y > height - (96 * killCount) - 50 && bear[i].y < height - (96 * killCount) - 40)) {
bear.splice(i, 1);
score += 1;
}
//if bear leaves screen, remove from array
else if (bear[i].y > height + 40) {
bear.splice(i, 1);
killCount += 1;
}
}
}
///////// BY KATRINA
function makeBear(startY) {
//bear object
var myBear = {x: random(30, 570),
y: startY,
speed: 2,
move: bearMove,
display: bearDisplay}
return myBear;
}
///////// BY KATRINA
function bearMove() {
//to move bear
this.y += this.speed;
}
///////// BY KATRINA
function bearDisplay() {
//drawing bear shape
noStroke();
fill(255);
ellipse(this.x, this.y, 43, 60); //body
ellipse(this.x + 14, this.y + 25, 12, 20); //right leg
ellipse(this.x - 14, this.y + 25, 12, 20); //left leg
ellipse(this.x, this.y - 30, 27, 32); //head
ellipse(this.x + 9, this.y - 42, 8, 8); //right ear
ellipse(this.x - 9, this.y - 42, 8, 8); //left ear
fill(240);
ellipse(this.x, this.y, 30, 36); //body
fill(210);
ellipse(this.x + 9, this.y - 42, 5, 5); //right inner ear
ellipse(this.x - 9, this.y - 42, 5, 5); //left inner ear
ellipse(this.x, this.y - 31, 9, 9); //snout
fill(0);
ellipse(this.x + 5, this.y - 37, 4, 4); //right eye
ellipse(this.x - 5, this.y - 37, 4, 4); //left eye
ellipse(this.x, this.y - 32, 6, 3); //nose
fill(255);
ellipse(this.x + 5.5, this.y - 35.5, 2, 2); //right inner eye
ellipse(this.x - 5.5, this.y - 35.5, 2, 2); //left inner eye
stroke(0);
line(this.x, this.y - 32, this.x1, this.y - 29) //line from nose
}
///////// BY KATRINA
function addBear() {
//add new bears to array with small probability
var newBearProb = 0.005;
if(random(0,1) < newBearProb) {
bear.push(makeBear(-40));
}
}Instructions: Move the ice block with mouse to catch the falling bears. If you miss the bears, they will drown and the water level rises. If you miss 5 bears, the game ends. Press Restart to play again!
This was a fun project to make. Collaborating together was very helpful as we could learn from each other’s mistakes. However, it is difficult to code on two computers. We really enjoyed this experience and hope you enjoy the game!