Tron

by nukeboy212

HTML

<button id = "size">
Change Size
</button>
<canvas id = "mc">
  
</canvas>

CSS

canvas{
  margin-top: 10px;
  border:2px solid blue;
  display: block;
}

JavaScript

var c = document.getElementById("mc");
var ctx = c.getContext("2d");
var size = 0
c.width = 750;
c.height = 500;
var keys = []

$("#size").click(function(){
if(size == 0){
size = 1;
c.width = 450;
c.height = 300;
}
else if(size == 1){
size = 2;
c.width = 550;
c.height = 400;
}
else if (size == 2){
size = 0;
c.width = 750;
c.height = 500;
}
});
var player1 = {
x:c.width/2 - 50,
y:c.height/2,
width:10,
height:10
}

var player2 = {
x:c.width/2 + 50,
y:c.height/2,
width:10,
height:10
}

function drawP1(){
ctx.beginPath()
ctx.fillStyle="red"
ctx.fillRect(player1.x, player1.y, player1.height, player1.width)
ctx.closePath()
}

function drawP2(){
ctx.beginPath()
ctx.fillStyle="blue"
ctx.fillRect(player2.x, player2.y, player2.height, player2.width)
ctx.closePath()
}
setInterval(function(){
drawP1()
drawP2()
},100/30);


document.addEventListener("keydown", function())