what i learned last week:  how to make a bouncing object using vanillajs part 1 drawing the object
Tags: javascript
Published: 2021-08-16 18:01:20

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](https://en.wikipedia.org/wiki/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](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#active_learning_getting_started_with_a_%3Ccanvas%3E) 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()](https://developer.mozilla.org/en-US/docs/Web/API/Element/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 <canvas> 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/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](https://blog.kevinchisholm.com/javascript/the-javascript-this-keyword-deep-dive-constructor-functions/) 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.
![console.log(player)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozm2vb2xw7htqq9ru9cg.png)

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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) 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 add`fill()`
![Player Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y0mekp74y9a1g2sy8cu.png)
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.