Midterm

Concept

So, my game did not turn out exactly like I wanted it to be which I think is OK. the concept was to have a much more complicated game with different levels, but I don’t think I was able to achieve that. However, I was able to produce a game that I was really proud of I had a maze where the character had to walk through it and I was able to create a character which was able to walk and give the animation of it walking right to left and back and forward which is something I didn’t think was possible prior to this class. I was also able to have a game that is based on luck which was my initial idea the coin is what decides whether you wins or loses and the whole game depends on it so there is no skill involved which was something that I wanted to do with the game since the project was announced.

Inspiration

My inspiration came from the idea of randomness that we talked about during our first couple of classes. being a social science student, my background is in legal studies and in the law everything is relatively a fact so you have to prove the events and you have to make the assumption that nothing is really random. computer languages however depend a lot on randomness especially in the field of I.M. we see a lot of interesting artworks that have created been created from randomness and they all look beautiful in their own sense. And my game I wanted to create the idea of winning being incorporated with such randomness.

code

var Mazeb;
var x1 = 0;
var x2;
var scrollSpeed = 2;

let gameState = "start";
let spritesheet;
let sprites = [];
let direction = 1; // 0 up
let step = 0;
let x;
let y;
let speedx = 3;
let spritesheetintialx = 20;
let spritesheetintialy = 70;

function preload() {
  soundFormats("mp3", "ogg");
  spritesheet = loadImage("walking.png");
  Mazeb = loadImage("Mazebackground.png");
  castle= loadImage("castle.jpeg");
  Flip = loadSound("Coin flip.mp3");
}

function setup() {
  //fullscreen(true);
  // print(Mazeb.width, Mazeb.height);
  createCanvas(700, 600);
  restartGame();
  x2 = width;
  // 12 images across, 4 down, in the spritesheet

  let w = int(spritesheet.width / 12);
  let h = int(spritesheet.height / 4);

  for (let y = 0; y < 4; y++) {
    sprites[y] = [];
    for (let x = 0; x < 12; x++) {
      sprites[y][x] = spritesheet.get(x * w, y * h, w, h);
    } // iterate over rows
  } // iterate over columns

  x = 20;
  y = 70;

  imageMode(CENTER);

  // Display first sprite
  image(sprites[direction][step], x, y);

  //Flip.play()
}

function restartGame() {
  print("Welcome to the dungon");
  print("help me escape");
  y = spritesheetintialy;
  x = spritesheetintialx;
  wonGame = false;
  gameState = "start";
  
}

function draw() {
  if (gameState == "start") {
    drawInstructions();
  } else if (gameState == "playing") {
    drawGame();
  } else if (gameState == "end") {
    drawEndScreen();

  }
  //print(mouseX, mouseY);
}
function drawInstructions() {
  //print('drawing instructions');
  background('#95a8b0');
  // white
  text("Welcome to my dugon", 300, 300);
  text("you have to escape", 300, 320);
  text("Press any key to start", 300, 340);
}

// nothing to do here because all the action
// happens in the keyPressed() callback
//coin
var Coinx = 430;
var Coiny = 380;
var Coinwidth = 70;
var Coinheight = 80;
// rectangle 1
var rect1x = 100;
var rect1y = 0;
var rect1width = 90;
var rect1height = 250;
// rectangle 2
var rect2x = 100;
var rect2y = 250;
var rect2width = 250;
var rect2height = 60;

function drawGame() {
  fill(255,0,0)
 text("Press the space bar",589,200);
  
  text("GO",370,381)
  text("Press L", 420,560 )
  noFill()


  fill("#d8572a");
  // Maze
  rect(rect1x, rect1y, rect1width, rect1height);
  rect(rect2x, rect2y, rect2width, rect2height);
  rect(100, 450, 90, 600);
  rect(100, 450, 250, 60);
  rect(500, 250, 200, 600);
  rect(260, 115, 90, 136);
  rect(260, 75, 600, 40);
  noFill();
  
  
text("GO",430,380)
  // coin
  fill("#fdc500");
  ellipse(Coinx, Coiny, Coinwidth, Coinheight);
  noFill();
  
   if (y > height) {
    // Lost the game!
    wonGame = false;
    // Change to end game state
    gameState = "end";
  }
}
function drawEndScreen() {
  if (wonGame) {
    background("#4cc9f0");
    fill('#ffd60a')
    text("You have escaped", 300, 300);
    text("Press any key to restart", 300, 320);
    noFill()
  } 
  if (lostGame){
    background("#d90429");
    fill('#000814')
    text("You have not made it out.", 300, 300);
    text("Press any key to restart", 300, 320);
    noFill()
  }
}

function mouseClicked() {
  if (
    mouseX > Coinx &&
    mouseX < Coinx + Coinwidth &&
    mouseY > Coiny &&
    mouseY < Coiny + Coinheight
  ) {
    Flip.play();
  }
 if (random() < 0.5){
    print("up");
  } else {
    print("down");
  }
}

//function frameDifference(){
//  capture.loadPixels(255);
//}

function keyPressed() {
  imageMode(CORNER);
  image(Mazeb, x1, 0, width, height);
  image(Mazeb, x2, 0, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;

  if (x1 < -width) {
    x1 = width;
  }
  if (x2 < -width) {
    x2 = width;
  }

  // look at sprite sheet to determine
  // which direction is which row
  // if (
  //   mouseX > Coinx &&
  //   mouseX < Coinx + Coinwidth &&
  //   mouseY > Coiny &&
  //   mouseY < Coiny + Coinheight
  // ) {
  //   Flip.play();
  // }
  if (keyCode === DOWN_ARROW) {
    direction = 0;
    y += speedx;
  }

  if (keyCode === LEFT_ARROW) {
    direction = 1;
    x -= speedx;
  }

  if (keyCode === RIGHT_ARROW) {
    direction = 2;
    x += speedx;
    // if(x=>100){
    //   x=45
    // }
    // if(y=rect1height){
    //   x+= speedx
    // }
  }

  if (keyCode === UP_ARROW) {
    direction = 3;
    y -= speedx;
  }

  // Every so often
  // advance to the next sprite
  if (frameCount % speedx == 0) {
    step = (step + 1) % 12;
  }

  // Finally draw paint the sprite

  image(sprites[direction][step], x, y);

  if (gameState == 'start') {
    // Start the game
    gameState = 'playing';
    
  } else if (gameState == 'playing') {
    
    if (key == ' ') {
      // Won game!
      wonGame = true;
      gameState = 'end';
    }
    
  } if (key == 'l') {
      // lost game!
      lostGame = true;
      gameState = 'end';
  }
  return false;
}

At least one shape.  

I created multiple shapes through the rectangles that create the maze and the coin that I made by using an ellipse.

At least one image

I use this sprite sheet with the different images to create The Walking character that goes through the maze. And I create the background with an image of a dungeon that moves along with the advancement of the game

At least one sound

I create a sound that you hear once you click on the coin to simulate the coin flip that decides on random whether you should go up or down

At least one on-screen text

I had many on screen text that had the instructions and the winning and ending commands while I also had the commands that tell you what actions to make once you win or lose

Object Oriented Programming

I created this game to simulate the maze with his story where you should escape from the dungeon

Problems 

Why writing my code I run into many problems that I had to adapt with throughout the way. I wasn’t able to make the borders set so that the character would bump into them and not be able to go through them I try to use either color dedicated blocking, but I wasn’t able to figure out how that worked 100% and I was able to block the character at a certain point but it would go through the whole X axis. anyway, I also had issues with creating the instructions page that I later found out solutions to once I kept rereading my code over 20 times. we just I would have liked the character to either win or lose once they go through either screen instead of having a press command check but I came up with that idea later when I in my project and I didn’t have enough time to write about and implement the code.