Ogir.eo

Copy of agir.io

by nukeboy212

HTML

<h1>
Ogir.eo
</h1>
<canvas id="mehcan">

</canvas>
<img src="https://i.imgur.com/8Bze8Cx.png" id="derp">
<button id="enlarge">
  enlarge canvas
</button>
<button id="denlarge">
  denlarge canvas
</button>
<h3>
Please don't move your cursor a lot because since your guy you are controlling is very dumb he get confused.
</h3>

CSS

canvas {
  border: 2px solid black;
}

img {
  display: none;
}

h1 {
  text-align: center;
}

button {
  display: block;
  margin-top: 10px;
}

h3 {
  display: block;
  margin-top: 10px;
}

JavaScript

var canvas = document.getElementById("mehcan");
var ctx = canvas.getContext("2d")
var food = [];

canvas.width = 600;
canvas.height = 500;
var player = {
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: 36,
  height: 20
}

function drawPlayer() {
  ctx.drawImage(derp, player.x, player.y, player.width, player.height)
}

function spawnFood() {
var randomSize = Math.random() * 100
  food.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    width: randomSize,
    height: randomSize
  })
}
setInterval(function() {
  spawnFood()
}, 2000)

function drawFood() {
  for (var i = 0; i < food.length; i++){
      ctx.beginPath()
  ctx.fillRect(food[i].x, food[i].y, food[i].width, food[i].height)
  ctx.closePath()
  }

}
$("#enlarge").click(function() {
  canvas.width = 1000;
  canvas.height = 900;
  ctx.drawImage(derp, player.x, player.y, player.width, player.height)
})
$("#denlarge").click(function() {
  canvas.width = 600;
  canvas.height = 500;
  ctx.drawImage(derp, player.x, player.y, player.width, player.height)
})
setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  drawPlayer()
  drawFood()
  if (player.x < x) {
    player.x += 2
  } else {
    player.x -= 2
  }
  if (player.y < y) {
    player.y += 2
  } else {
    player.y -= 2
  }
  if (player.x > canvas.width - player.width) {
    player.x = canvas.width - player.width
  }
  if (player.x < 0) {
    player.x = 0
  }
  if (player.y < 0) {
    player.y = 0
  }
  if (player.y > canvas.height - player.height) {
    player.y = canvas.height - player.height
  }
}, 1000 / 30)

//////////////////////////////////////////////////////////////////////////////////////////
var x = null;
var y = null;

document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mouseenter', onMouseUpdate, false);

function onMouseUpdate(e) {
  x = e.pageX;
  y = e.pageY;
  console.log(x + ", " + y)
}

function getMouseX() {
  return x;
}

function...