Concept
I am creating a game that I have named “Save the Ocean”. This game is inspired by the snakes game that I grew up playing. While I wanted to recreate that experience, I also wanted to add my own concept and content to the game. Therefore, I am using this game to create awareness about plastic pollution and how it affects our oceans and its wildlife.
In the game, the player will move from the start screen to the main screen after reading some instructions. When playing, the user will use arrow keys to move a character that cleans up plastic waste (just like a snake collects coins in the snake game). The more you clean, the more points you get.
To make it challenging, I have these ideas:
- Time limit: user has to collect all the garbage within a given time.
- Obstacles: user has to avoid obstacles
Depending on how challenging the concept is to implement, I will add more layers as needed to the project.
Game
Code
let segWidth = 30;
let step = 3;
let direction = 'start'
let gameState = 'start';
let begin = 'stop'
let startPlaying = false;
let img;
let song;
let cnv;
function preload() {
img = loadImage('images/1.png');
song = loadSound('music.mp3');
}
class Segment {
constructor(x, y){
this.x = x;
this.y = y;
noStroke();
fill('pink')
ellipse(this.x, this.y, segWidth)
}
moveRight(){
if (this.x > width){
this.x = 0;
}else {
this.x += step;
}
ellipse(this.x, this.y,segWidth)
}
moveLeft(){
if (this.x < 0){
this.x = width;
}
else
{
this.x -= step;
}
ellipse(this.x, this.y,segWidth)
}
moveUp(){
if (this.y < 0){
this.y = height;
}
else{
this.y -= step;
}
ellipse(this.x, this.y,segWidth);
}
moveDown(){
if (this.y > height){
this.y = 0;
}
else {
this.y += step;
}
ellipse(this.x, this.y,segWidth)
}
updatePosition()
{
if (direction === 'right')
{
this.moveRight();
}
if (direction === 'left')
{
this.moveLeft();
}
if (direction === 'up')
{
this.moveUp();
}
if (direction === 'down')
{
this.moveDown();
}
}
}
let segments = [];
function setup() {
cnv = createCanvas(600, 600);
song.play();
append(segments,
new Segment(width/2, height/2)
)
}
function startPage(){
image(img, 0, 0);
noFill();
if (mouseX< 580 && mouseX > 20 && mouseY < 580 && mouseY > 20)
{
fill('lightblue');
ellipse(width*4/5, height*5/6, 150,100);
fill('rgb(246,237,237)');
textFont('Helvetica');
textSize(38);
text('Start',440, 513);
print("play option appears")
}
if (mouseX < width*4/5+75 && mouseX > width*4/5-75 && mouseY < height*5/6 + 50 && mouseY > height*5/6-50)
{
fill('lightblue');
ellipse(width*4/5, height*5/6, 150,100);
if (mouseIsPressed)
{
gameState = 'play'
}
}
fill(255, 60, 100);
//text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);
}
let currX = 300;
let currY = 300;
function draw() {
if (gameState === 'start'){
print('start');
startPage();
}
else if (gameState === 'play'){
print('play game')
playGame();
}
}
function keyPressed() {
if (keyCode === RIGHT_ARROW) {
direction = 'right';
print('right')
} else if (keyCode === LEFT_ARROW) {
direction = 'left';
print('left');
} else if (keyCode === UP_ARROW) {
direction = 'up';
print('up')
}
else if (keyCode === DOWN_ARROW) {
direction = 'down';
print('down')
}
}
function playGame(){
smooth();
background(220);
showInstructions();
if (startPlaying === true){
startPlayingGame();
}
}
function showInstructions(){
fill('lightblue')
square(100,100,400);
textSize(20);
fill(0);
text('This is where the instructions will go:', width/5, 200);
text ('Up, down, left, and right arrows to move', width/5, 300);
ellipse(width/2, height*2/3, 80);
fill(255);
text('GO', width/2-15,height*2/3+8)
if (mouseIsPressed && mouseX > width/2-40 && mouseX < width/2+40)
{
print('start playing now')
startPlaying = true;
}
}
function startPlayingGame()
{
background(220);
text('Use arrow keys to start moving', width/4, height/3);
fill('rgb(221,37,69)')
ellipse(width/2, height/2, segWidth);
if (direction === 'up' || direction === 'down' || direction === 'left' || direction === 'right' )
{
background(220);
for (i = 0; i < segments.length; i++){
segments[i].updatePosition();
}
}
}
function addSegment(){
append(segments,new Segment(currX+step,currY+step))
}
I will be using object oriented programming structure and functions to design and organize the code. Text, shapes, and other elements used in class will be used.
Challenging Parts
What I find challenging at the moment is how to randomly generate obstacles and detect collisions. This is what I am figuring out now and then I will work on the design and aesthetics. Moreover, I want to check how to add video to the background or make the background move.
