Star Eater

by Nathan Piper

HTML

<script src='game.js'></script>
<body>
    <canvas id='game' height=425 width=525 align='center' style='border: 1px solid black'> </canvas>
    
</body>

CSS

canvas{
    background: black;
    
}

JavaScript

var width = 525;
var height = 425;

var FPS = 60;

var canvas = document.getElementById('game');
var g = canvas.getContext('2d');

var x = 50;
var y = 50;

var coins = [];

var player = { //the player object
    x: 50,
    y: 50,
    speed: 5,
    width: 20,
    height: 20,
    score: 0,
    tick: function() {
        if(Key.up && this.y > 0) this.y -= this.speed;
        if(Key.down && this.y < height-20) this.y += this.speed;
        if(Key.left && this.x > 0) this.x -= this.speed;
        if(Key.right && this.x < width-20) this.x += this.speed;
  },
    render: function () {
        g.fillStyle = 'blue';
        g.fillRect(this.x, this.y, this.width, this.height);
}
    

};

var Key = {
    up: false,
    down: false,
    left: false,
    right: false
};

addEventListener("keydown", function (e) { 
    var keyCode = (e.keyCode) ? e.keyCode: e.which;
    switch(keyCode){
        case 38: //up
            Key.up = true;
            break;
                case 40: //down
            Key.down = true;
            break;
                case 37:  //left
            Key.left = true;
            break;
                case 39:  //right
            Key.right = true;
            break;
          }
}, false);
addEventListener("keyup", function (e) {var keyCode = (e.keyCode) ? e.keyCode: e.which;
    switch(keyCode){
        case 38: //up
            Key.up = false;
            break;
                case 40: //down
            Key.down = false;
            break;
                case 37:  //left
            Key.left = false;
            break;
                case 39:  //right
            Key.right = false;
            break;
             } 
 }, false);
var Coin = function (x, y) {
      this.x = x;
      this.y = y;
      this.width = 8;
      this.height = 8;
    this.render = function () {
        g.fillStyle = 'yellow'
      g.fillRect(this.x, this.y, this.width, this.height);
    };
    this.tick = function () {
        if(collision(this, player)){
           ...