Treasure Hunt Project

Coding II

Directions

We're going to build a treasure-hunting game over the course of this week.


Step 1 - Make a class for your object & get it to move (Due 11/6/2018)

Setup
  • Copy grid.js, treasure-hunt.js, and boy.js (rename this) from this webpage into your workspace
  • I called the file for my treasure hunting character boy.js, but you should rename yours to reflect the image you chose. Your filesystem should look like this.
    Step 1 Filesystem Layout
  • Ensure that both these new .js files are linked to your html file:
    <!-- Include your p5.js sketch -->
    <script src="treasure-hunt.js"></script>
    <script src="boy.js"></script>
    <script src="grid.js"></script>

Action

Implement your character class! (mine is boy.js). Your class should have the following methods:

  • A constructor, which takes a grid object and the starting column & row of the character as parameters
    • Call loadImage here! This'll work because you'll create your character class in preload
  • draw(), which simply draws the character image on the screen. (Note: you want to scale the image to fit into a cell on the grid. The Grid object has a method to help you do that!
  • moveRight(), moveLeft(), moveUp(), and moveDown(), which move the boy in the grid a corresponding amount.


Demo
Example of Step 1

grid.js

const DIRECTION = Object.freeze({
    UP: Symbol("UP"),
    DOWN: Symbol("DOWN"),
    LEFT: Symbol("LEFT"),
    RIGHT: Symbol("RIGHT")
});

class Grid {

    // Make a new grid with a specified number of rows and colums
    constructor(cols, rows) {
        this.cols = cols;
        this.rows = rows;
    }

    // This syntax allows other code to retrieve the cellWidth
    // as if it were a variable instead of a function.
    //   You use someGrid.cellWidth rather then someGrid.cellWidth()
    get cellWidth() {
        return width /this.cols;
    }
    get cellHeight() {
        return height / this.cols;
    }

    // Pass in the column index & this function returns the center 
    // x coordinate for that column
    cellCenterX(col) {
        return this.cellWidth * 1/2 + this.cellWidth * col
    }

    // Pass in the row index & this function returns the center y
    // coordinate for that column
    cellCenterY(row) {
        return  this.cellHeight * 1/2 + this.cellHeight * row
    }

    // Draws the grid on screen
    drawGrid() {
        strokeWeight(1);
        stroke(125);
        for(var c = 0; c < this.cols; c++) {
            line(c * this.cellWidth, 0, c * this.cellWidth, height);
        }

        for(var r = 0; r < this.rows; r++) {
            line(0, this.cellHeight * r,
                 width, this.cellHeight * r);
        }
    }

    // Draws an image to fit inside a cell in the grid. 
    // (does not alter the aspect ratio of the iamge)
    drawImageOnGrid(img, col, row, direction) {
        let aspectRatio = img.width / img.height;
        let drawWidth = min(grid.cellWidth, 
                            grid.cellHeight * aspectRatio);

        let drawHeight = min(grid.cellHeight,
                             grid.cellWidth / aspectRatio);                            

        push();
        translate(this.cellCenterX(col), this.cellCenterY(row));
        if (direction === DIRECTION.LEFT) {
            scale(-1, 1);
        }
        if (direction === DIRECTION.UP) {
            angleMode(DEGREES)
            rotate(-90)
        }
        if (direction === DIRECTION.DOWN) {
            angleMode(DEGREES)
            rotate(90)
        }
        imageMode(CENTER);
        image(img, 
              0, 0,
              drawWidth, drawHeight);
        pop();
    }
}
                

treasure-hunt.js

var boy;
var grid;

// Gets called before game is loaded. 
// Use it to load images & other resources
var preload = function() {

    grid = new Grid(10, 10);
    boy = new Boy(grid, 0, 0);
}

// Before the draw function ever gets called, setup gets called
//   After resources are loaded, sets up the game
var setup = function() {

    var canvas = createCanvas(400, 400);
    canvas.parent('sketch-holder');
}

//  Gets called over and over again as the
// game draws new frames
var draw = function() {

    // Draw the grid first, then the boy on top of it
    grid.drawGrid();
    boy.draw();
}

function keyTyped() {
    if (key === 'w') {
        boy.moveUp()
    }
    if (key === 's') {
        boy.moveDown()
    }
    if (key === 'a') {
        boy.moveLeft()
    }
    if (key === 'd') {
        boy.moveRight();
    }
}

boy.js (starter)

class Boy {
    constructor(grid, col, row) {

        // TODO: save grid, col, and row as instance variables on this object
        // TODO: call loadImage('') and save that as a this.img variable

        this.direction = DIRECTION.RIGHT;
    }

    draw() {
        // TODO: tell the grid to draw an image onto the grid.  
        //       Give it the image, column, row, and direction 
        //       to draw the image. Take a look at grid.js to find & 
        //      try to understand this function
    }

    moveRight() {
        // TODO: move your character to the right by one column (but don't let it leave the screen)
        // Also, set the direction as DIRECTION.RIGHT so that the image get's draw at the correct rotation
    }
    moveLeft() {
        // TODO: move your character to the left one column (but don't let it leave the screen)
        // Also, set the direction appropiately
    }
    moveUp() {
        // TODO: move your character up by one row (but don't let it leave the screen)
        // Also, set the direction appropiately
    }
    moveDown() {
        // TODO: move your character down by one row (but don't let it leave the screen)
        // Also, set the direction appropiately
    }
}