game-code.txt

let keysBeingPressed = [];
let theGame;

//to prevent the movement of the screen when you press the arrow keis

class Game {
  constructor() {
    this.ctx = document.getElementById("game-board").getContext("2d");

    this.player1 = new Player(70, 100, 45, 180);
    this.player2 = new Player(70, 100, 890, 180);
    // create new character automatically when new game is started.
    setInterval(() => {
      this.ctx.clearRect(0, 0, 1000, 800);
      this.player1.draw();
      this.player2.draw();
      this.player1.movePlayer1();
      this.player2.movePlayer2();
    }, 80);
  }
}

document.onkeydown = function(e) {
  let commands = ["ArrowUp", "ArrowDown", "S", "W"];
  if (commands.includes(e.key)) {
    e.preventDefault();
  }
  if (!keysBeingPressed.includes(e.key)) {
    keysBeingPressed.push(e.key);
  }
};

document.onkeyup = function(e) {
  let theIndex = keysBeingPressed.indexOf(e.key);
  console.log(keysBeingPressed);
  if (theIndex != -1) {
    keysBeingPressed.splice(theIndex, 1);
  }
};

class Player {
  constructor(width, height, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.imgsrc = "images/ghost.png";
    this.ctx = document.getElementById("game-board").getContext("2d");
    // properties for constructor go within first curlies
  }
  draw() {
    let theImage = new Image();
    theImage.src = this.imgsrc;
    theImage.onload = () => {
      this.ctx.drawImage(theImage, this.x, this.y, this.width, this.height);
    };
  }
  movePlayer1() {
    this.canMove(this.y);

    if (keysBeingPressed.includes("ArrowUp")) {
      console.log("uppppp");
      if (this.canMove(this.y - 20)) {
        this.y -= 10;
      }
    }
    if (keysBeingPressed.includes("ArrowDown")) {
      console.log("downnnnn");
      if (this.canMove(this.y + 20)) {
        this.y += 10;
      }
    }
  }
  movePlayer2() {
    this.canMove(this.y);

    if (keysBeingPressed.includes("w")) {
      if (this.canMove(this.y - 20)) {
        console.log("uppppp");
        this.y -= 10;
      }
    }
    if (keysBeingPressed.includes("s")) {
      if (this.canMove(this.y + 20)) {
        console.log("downnnnn");
        this.y += 10;
      }
    }
  }
  canMove(futureY) {
    let result = true;
    if (futureY < 0 || futureY > 700) {
      result = false;
    }
    return result;
  }
}

function startGame() {
  theGame = new Game();
}

startGame();

let canvas = document.getElementById("game-board");
canvas.width = 1000;
canvas.height = 800;

//move players up and down, erase, increase the pixels to follow the player.

//moving the car up and down. same with my game
// so 2 squares/images on either side of the canvas, that move up and down.

//character jumps when they shoot.

// on mouseover, the 'Pong Awaits You' message jumps at screen or shakes, does something.
// mouseover of start game, text shakes

//check manny's slack for putting 1 item on each side of the screen, background = to size of canvas.

// weapon projectile object always at same position as the player 1 or player 2.

//the way the projectile moves laterally, is the same physics as the car Nick moved in class.

// classes,
// player 1 and 2
// properties and display (canvas) static image background
// hit 2 scores in arow, 3 etc, player 1 is faster, pl 2 slower.
// pong or memory game.
// bunch of if statements to cause changes when certain events happen. like colors changing, points change, effects change.

// Player 1 on right
//Player 2 on left

// let player1 = new Player(30,100,600,150)
//   let player2 = new Player(30,100,0,150)

// positioning for each player.

// get them in correct position. move up and down.