JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id='game' height=400 width=500 style='border: 1px solid black'/>

CSS

#game{
    background: black;
    
}

JavaScript

var width = 500 ;
var height = 400;
var tagTimer = 0;
var maxTagTimer = 3;
var FPS = 60;

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

var x = 50;
var y = 50;


var x2 = 100;
var y2 = 100;

var player = { //the player object
    x: 350,
    y: 50,
    height: 20,
    canTag: false,
    isIt: false,
    width: 20,
    speed: 5,
    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;
        
        console.log(this.isIt);
        
        if(this.isIt && this.canTag){
            if(collision(this, player2)){
                this.isIt = false;
                player2.isIt = true;
            }
        }
        
        if(this.isIt = false){ 
            if(collision(this, player)){
                this.isIt = true;
                player2.isIt = false;
            }}
  
  },
    render: function () {
        g.fillStyle = 'red';
        g.fillRect(this.x, this.y, 20, 20);
}
    

};

var player2 = { //the player object
    x: 50,
    y: 50,
    height: 20,
    width: 20,
    canTag: true,
    isIt: true,
    score: 0,
    speed: 5,
    tick: function() {
        if(Key.w && this.y > 0) this.y -= this.speed;
        if(Key.s && this.y < height-20) this.y += this.speed;
        if(Key.a && this.x > 0) this.x -= this.speed;
        if(Key.d && this.x < width-20) this.x += this.speed;
        console.log(this.isIt);
        if(this.isIt && this.canTag){ 
            if(collision(this, player)){
                this.isIt = false;
                player.isIt = true;
            }
        }
         
  },
    render: function () {
        g.fillStyle = 'blue';
        g.fillRect(this.x, this.y, 20, 20);
}
 

};

var Key = {
    up: false,
    down: false,
    left: false,
    right: false,
    w: false,
    s: false,
    d:...