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,
direction:"left"
}

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

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()
if(keys[65]){
player1.direction="left"
}
if(keys[68]){
player1.direction="right"
}
if(keys[87]){
player1.direction="up"
}
if(keys[83]){
player1.direction="down"
}


if(keys[37]){
player2.direction="left"
}
if(keys[39]){
player2.direction="right"
}
if(keys[38]){
player2.direction="up"
}
if(keys[40]){
player2.direction="down"
}

if(player1.direction=="right"){
player1.x+=0.5
}
if(player1.direction=="left"){
player1.x-=0.5
}
if(player1.direction=="up"){
player1.y-=0.5
}
if(player1.direction=="down"){
player1.y+=0.5
}
if(player2.direction=="right"){
player2.x+=0.5
}
if(player2.direction=="left"){
player2.x-=0.5
}
if(player2.direction=="up"){
player2.y-=0.5
}
if(player2.direction=="down"){
player2.y+=0.5
}
},100/30);


document.body.addEventListener("keydown", function(key){
keys[key.keyCode]=true;
});
document.body.addEventListener("keyup", function(key){
keys[key.keyCode]=false;
});