Welcome to this weeks blog entry! Phase four of Flatiron School is coming to a close which means it's project time. I've decided to create a 2D game using vanillajs for the frontend and Ruby on Rails on the backend. The game is a clone of Flappy Bird and the player will use the spacebar to "fly" and avoid the enemy. Finally, this blog will be focused on the player object and how draw an object.
The first thing I'll need to do is create an index.html. Within this file we need to create a canvas element which is used to define the area on the page into which the image will be drawn.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css"></link>
<title>Angry Borg</title>
</head>
<body>
<canvas></canvas>
<script src="index.js"></script>
</body>
</html>
Note: I made sure my index.js file was being properly read by adding a script element to index.html with a source of index.js. Once the index.html file is set up I'll want to create the index.js file that will house our code. The first thing I'll do is select the canvas element. Selecting an element....that sounds familiar....
const canvas = document.querySelector('canvas');
Above, I've created const canvas and selected the canvas HTML element using the querySelector method. Remember, the querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
Next, to draw on the selected canvas, I create the variable const ctx and save the canvas context to it. The canvas context aka The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Neat, right? Before this project I had no idea what Canvas was let alone the power behind it!
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
What is the first thing I'll need to do if I want to create an object that represents a player? If you said "create a class" you are correct. Remember, classes are a template for creating objects. They encapsulate data with code to work on that data.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
}
Next, I need to create a constructor which is called each time you instantiate a new version of the Player class. Remember, the constructor method is a special method of a class for creating and initializing an object of that class.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
}
// constructor allows for class properties to be unique for each object that is created
}
Above, I've defined a constructor and passed in multiple arguments that each represent a property of our Player.
x represents the x coordinate of the Player object inside of the browser
y represents the y coordinate of the Player object inside of the browser
radius represents the radius of the Player object
color represents the color of the Player object
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x // x coordinate
this.y = y // y coordinate
this.radius = radius // radius of player object
this.color = color // color of player object
// note we set the players properties as the arguments
we passed in the constructor method.
}
}
When you instantiate a JavaScript constructor function, an object is returned. The JavaScript “this” keyword has a special meaning inside of that object: it refers to itself. In other words, when you create your constructor function, you can use the “this” keyword to reference the object that WILL be created when the constructor is instantiated. After passing in our arguments I define the properties inside of the constructor method. Each time a new Player object is created we add new properties to that new instance of the Player.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
}
const player = new Player()
Now that I have our class set up we can create an instance of our Player. If you look at the above code you'll see that I've created const player and saved a new instance of the Player class to it. Next, I need to pass in properties to this Player instance
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
}
const player = new Player(100, 100, 30, 'blue');
Above, I've passed in an x coordinate of 100, y coordinate of 100, radius of 30 and finally blue as the color to our player. Lets confirm we've created a new object by using console.log
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
}
const player = new Player(100, 100, 30, 'blue');
console.log(player);
To view our object in the console we pass in player to the console.log method. If you head over to your browsers console you should see something similar to the below image.
Awesome, so far I've created a Player class and the ability to create instances of the class with the constructor method. I've confirmed that new instances are being created by using console.log() and passing const player to the method. Now that we've done the above we can actually draw out the object in our browser. We do this by using the properties inside of the contructor method.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
}
}
const player = new Player(100, 100, 30, 'blue');
First, inside of the Player class I've created a new function named draw and it will be responsible for drawing out an object using passed in properties.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
ctx.beginPath()
}
}
const player = new Player(100, 100, 30, 'blue');
Second, I referenced the canvas context using the ctx variable. Then I add beginPath() to ctx which lets our browser know we are going to start drawing..
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
//ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise])
}
}
const player = new Player(100, 100, 30, 'blue');
Third, I referenced the canvas context using the ctx variable. Then I add arc() to ctx which creates a circular arc centered at (x, y) with a radius of radius. As you can see above, I'm able to pass in the properties from the constructor to inside of the draw function using the This keyword
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
}
}
const player = new Player(100, 100, 30, 'blue');
Fourth, I referenced the canvas context using the ctx variable. Then I specify that the fillstyle will equal to This.color. Doing this tells JavaScript that the color of our player object's color will be whatever is passed in when the constructor is instantiated.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
}
}
const player = new Player(100, 100, 30, 'blue');
Finally, I referenced the canvas context using the ctx variable. Then I addfill()
Awesome, I've successfully created a player object and drew it on my browser using the HTML element canvas and JavaScript. Now we need to position the object in our browser. For this game I want my player to be on the left side AND middle of the browser and the enemy on the right side. Our final object position should look like something in the above image.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;
Class Player {
constructor(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
}
}
const player = new Player(100, 100, 30, 'blue');
To ensure that my image is always in that position, regardless of window size, we need to set up some new global variables that reference the canvas height and width.
Like a Stephen King novel I'm going to end with a little suspense. In the next entry I will model physics inside of my game and make an interactive object.
Top comments (0)