![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
var terrainSpeed = 0.0005; //set up terrain details for the water effects
var terrainDetail = 0.005;
var smallFishs; //group for food
var fish; //main character
var sharks;
var horses;
var smallRock;
var bigRock;
var deadImg;
var plant;
var img;
var fishImage; //set up for loading image
var sound;
var nE = 0; //number of fish eaten
var play = false;
var dead = false;
//set up coordinates for certain aspects in order to change them throughout code
var imgX = 0;
var imgY = 0;
var textX = 450;
function preload() {
//load up the images from assets
fishImage = loadImage("assets/fish.png");
img = loadImage("assets/titl.png");
deadImg = loadImage("assets/ded.png");
bigRock = loadImage("assets/bigrock.png");
smallRock = loadImage("assets/smallrock.png");
plant = loadImage("assets/plant.png");
sound = loadSound('assets/boop.wav');
}
function setup() {
createCanvas(1000 , 600);
fish = createSprite(width/2, height/2); //spawn goldfish in the middle
//set movement limits to goldfish
fish.maxSpeed = 6;
fish.friction = .9;
fish.setCollider();
//add the actual image into sprite variable
fish.addImage("normal", fishImage);
//set up groups
smallFishs = new Group();
sharks = new Group();
horses = new Group();
}
function draw() {
//set up background of the game
background(80, 80, 220);
fill(150, 150, 0);
noStroke();
rect(0, 570, 1000, 100);
image(smallRock, 1000, 490)
push();
scale(2);
image(plant, 90, 255);
pop();
image(bigRock, 600, 480);
image(smallRock, -250, 450);
//set up conditions for starting screen
if (play == false){
image(img, imgX, imgY);
} else {
drawWaves();
fish.overlap(smallFishs, eatFish); //set up overlap for goldfish and food fish
sharks.overlap(fish, sharkEat);
//set up rotation speed / movement speed for gold fish
if(keyDown(LEFT_ARROW)) {
fish.rotation -= 2;
}
if(keyDown(RIGHT_ARROW)) {
fish.rotation += 2;
}
if(keyDown(UP_ARROW)) {
fish.addSpeed(.45, fish.rotation);
}
//come over on the other side if fish goes too far left/right
if (fish.position.x > 1000) {
fish.position.x = 0;
} else if (fish.position.x < 0) {
fish.position.x = 1000;
}
//come over on the other side if fish goes too far top/bottom
if (fish.position.y > 600) {
fish.position.y = 0;
} else if(fish.position.y < 0){
fish.position.y = 600;
}
//constantly create small fish randomly around the canvas
if(random(0, 100) < 10) {
var pn = random(360);
var px = (width/2 + 1000) * cos(radians(pn));
var py = (height/2 + 1000) * sin(radians(pn));
createSmallFish(3, px, py);
}
//create sharks randomly but rarely
if(random(0, 100) < 1) {
var bn = random(300);
var bx = (width/2 + 1000) * cos(radians(bn));
var by = (height/2 + 1000) * sin(radians(bn));
createShark(3, bx, by);
}
//constantly spawn seahorses, but rarely
if(frameCount%70==0 & horses.length < 20) {
createHorses(random(0,width), random(0,height));
}
for(var i = 0; i < horses.length; i++) {
var sea = horses[i]; //create variable for seahorses
sea.scale = map(sea.life, 220, 0, 1, 0); //lives for limited frames, changes sizes according to time
sea.displace(fish); //push away and block goldfish's path
}
drawSprites();
text("Fishy Points: " + nE, textX, 50); //text showing current game points
}
}
function createSmallFish(x, y) { //function that builds small fish
var smol = createSprite(x, y);
var smolfish = loadImage("assets/smallfish.png");
smol.addImage(smolfish);
smol.setSpeed(1, random(360));
smol.rotationSpeed = .1;
smol.setCollider("rectangle", 0, 0, 0, 0);
smallFishs.add(smol);
return smol;
}
function createShark(x, y) { //function that builds sharks
var big = createSprite(-x, y);
var bigShark = loadImage("assets/shark.png");
big.addImage(bigShark);
big.setSpeed(.5, random(360));
big.rotationSpeed = .05
big.setCollider("rectangle", 0, 0, 100, 10);
sharks.add(big);
return big;
}
function createHorses(x, y) { //function that builds seahorses with an animation that shrinks size
var sea = createSprite(x, y);
sea.addAnimation("horses", "assets/seahor.png");
sea.life = 220;
sea.rotationSpeed = .08
sea.setCollider("rectangle", 0, 0, 0, 0);
horses.add(sea);
}
function eatFish(fish, smallFishs) { //function to remove the small fish when overlapping as well as
//adding on to fish eaten counter
sound.play();
nE += 1;
smallFishs.remove();
}
function sharkEat(sharks, fish) {
dead = true;
play = false;
if (dead == true) {
imgX += 1000;
imgY += 1000;
textX += 1000;
image(deadImg, 0, 0);
fill(186, 217, 180);
textSize(52.72);
text("" + nE, 550, 321);
noLoop();
}
}
function keyPressed(){
if (keyCode === 88){
play = true;
}
}
function drawWaves(){
//wave 1
fill(144,175,197, 60);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * 0.003) + (millis() * terrainSpeed * 2);
var y = map(noise(t), 0,1, 0, height * 0.1);
vertex(x, y+ 1);
}
vertex(width,height);
vertex(0,height);
endShape();
//wave 2
fill(51,107,135, 60);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * 0.003) + (millis() * terrainSpeed * 2);
var y = map(noise(t), 0,1, 0, height * 0.1);
vertex(x, y+50);
}
vertex(width,height);
vertex(0,height);
endShape();
//wave 3
fill(144,175,197, 60);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * 0.003) + (millis() * terrainSpeed * 2);
var y = map(noise(t), 0,1, 0, height * 0.1);
vertex(x, y+65);
if(noise(t) > 0.2){
fill(144, 175, 197, 80);
}
else {
fill(144,175,197,120);
}
}
vertex(width,height);
vertex(0,height);
endShape();
//wave 4
fill(51,107,135, 60);
beginShape();
for (var x = 0; x < width; x++) {
var t = (x * 0.003) + (millis() * terrainSpeed * 2);
var y = map(noise(t), 0,1, 0, height * 0.1);
vertex(x, y+100);
}
vertex(width,height);
vertex(0,height);
endShape();
}
The game is played by using the left / right arrow keys to change the rotation of the fish, and using the up arrow to move forward. Try to get as many points as possible by eating the smaller fish, while avoiding the angry sharks that will end the game if they touch you. The searhorses will stop your movement, so try to move around them.
Basing off how old styled games were formed, I wanted to make a game that has an unlimited ‘reward’ while having a losing condition. Using knowledge earned from the class, I was able to display and create the game I wanted to.
