2D Platformer

Over the last week or so I’ve begun working on some more passion related projects. It’s my goal to take my skills in coding/programming and use them for a career in game design. Right now, just as a bit of a fun challenge, I’m working on a 2d platformer built entirely in JavaScript. I figured I could use this blog post as a way to cement the things that I’ve started learning.

The game is being created using canvas, so the first thing I did was create an index.html file and add a canvas tag with an id to it. After that I started creating my different JavaScript files that I would need and adding them in as scripts in my html file.

<!DOCTYPE html>
<html>  
   <head>    
     <canvas id="myCanvas"></canvas>    
     <script src="drawer.js"></script>    
     <script src="player.js"></script>    
     <script src="walls.js"></script>    
     <script src="keys.js"></script>    
     <script src="main.js"></script>  
   </head>
</html>

I started with the main.js file and created a variable for the canvas and the used the getElementById function to store it in the variable. After that I set up the width and height for the canvas to be the width and height of the window it was opened in. Finally I set the style of the canvas to a left and top margin of 0px and a position of absolute.

var canvas = document.getElementById("myCanvas");
var render = canvas.getContext("2d");
var width;
var height;
width = window.innerWidth;
height = window.innerHeight;

canvas.width = width;
canvas.height = height;
canvas.style.left = "px";
canvas.style.top = "0px";
canvas.style.position = "absolute";

After that I noticed an issue with the canvas’s size not changing with the windows size. So I used the onresize method to fix that. Moving on from there it was time to create some objects. I started with a Player class.

class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 32;
    objects.push(this);
  }

  step() {
    //this.x = mouseX;
    //this.y = mouseY;

    if (keyDown.W) this.y -= 10;
    if (keyDown.S) this.y += 10;
    if (keyDown.A) this.x -= 10;
    if (keyDown.D) this.x += 10;
  }

  draw() {
    this.step();
    strokeColor(255, 255, 255);
    noFill();
    rectangle(this.x, this.y, this.size, this.size);
  }
}

The constructor gives the player a starting position on the x and y axis. this.size is used to give the player a width and height of 32 pixels. The objects.push(this) is used to add the created player to an array of objects for later use. The draw function at the bottom uses the code inside of the drawer.js file to create the player icon and add it to the canvas.

function rectangle(x, y, w, h) {
  render.beginPath();
  render.rect(x, y, w, h);
  render.fill();
  render.stroke();
}

function fillColor(r, g, b) {
  r = String(r);
  g = String(g);
  b = String(b);
  render.fillStyle = "rgb(" + r + "," + g + ", " + b + ")";
}

function strokeSize(size) {
  render.lineWidth = String(size);
}

function strokeColor(r, g, b) {
  r = String(r);
  g = String(g);
  b = String(b);
  render.strokeStyle = "rgb(" + r + "," + g + ", " + b + ")";
}

function noStroke() {
  render.strokeStyle = "rgba(0, 0, 0, 0)";
}

function noFill() {
  render.fillStyle = "rgba(0, 0, 0, 0)";
}

function line(x1, y1, x2, y2) {
  render.beginPath();
  render.moveTo(x1, y1);
  render.lineTo(x2, y2);
  render.stroke();
}

function circle(x, y, r) {
  render.beginPath();
  render.arc(x, y, r, 0, 2 * Math.PI);
  render.fill();
  render.stroke();
}

function background(r, g, b) {
  fillColor(r, g, b);
  rectangle(0, 0, width, height);
}

With the player icon now added to the canvas I can start to add movement using the mouse or keyboard. The wall.js file will be used to add some boundaries to the game and eventually we will include, collisions, gravity, and targets. I’m super excited to keep working on this project. I’ll be sure to update in future posts.

Share this:

Related

Leave a comment Cancel reply