Making_Hitbox

//Character Placement
var player1X = 45;
var player1Y = 200;
var player2X = 260 ;
var player2Y = 150 ;
var pX = 0;
var pY = 0;
var pW = 0;
var pH = 0;
var eW = 50;
var eH = 50;
var p2X = 150;
var p2Y = 165;
var p2W = 29;
var p2H = 30;
//Character Movement
var boxerSpeed = 3;
var enemyboxerSpeed = 3;

//Key Input Code
var keys = [];
var keyPressed = function() { 
  keys[keyCode] = true; };
  
var keyReleased = function() { 
  keys[keyCode] = false; };
  
//BitMoji Code
var drawtopPunch = function (BitX,BitY,bitHeight){
//Top
fill(23, 99, 50);
rect(BitX + bitHeight/150 * 75,BitY+ bitHeight/150 *129, bitHeight/150 *50, bitHeight/150 *65);
rect(BitX + bitHeight/150 * 118,BitY+bitHeight/150 *126, bitHeight/150 *70,bitHeight/150 *25,bitHeight/150 * 20);
rect(BitX + bitHeight/150 * 59,BitY+bitHeight/150 *126,bitHeight/150 * 25,bitHeight/150 * 60,bitHeight/150 * 20);
//Pants
fill(61, 57, 46);
rect(BitX + bitHeight/150 * 75,BitY+bitHeight/150 *191,bitHeight/150 * 50,bitHeight/150 * 82);
line(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *272,BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *200);
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 100,BitY+bitHeight/150 *194,bitHeight/150 * 5,bitHeight/150 * 5);
};
var drawbitheadPunch = function (BitX,BitY,bitHeight){
//Head
fill(224, 172, 105);
ellipse(BitX + bitHeight/150 * 142, BitY+ bitHeight/150 *85,bitHeight/150 * 18,bitHeight/150 * 26);
ellipse(BitX + bitHeight/150 * 58,BitY+ bitHeight/150 * 85,bitHeight/150 * 18,bitHeight/150 * 26);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *91,bitHeight/150 * 86,bitHeight/150 * 100);
//Eye 1
fill(255, 255, 255);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *94,bitHeight/150 * 20,bitHeight/150 * 20);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *94,bitHeight/150 * 20,bitHeight/150 * 20);
//Eye 2
fill(135, 82, 2);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *94,bitHeight/150 * 13,bitHeight/150 * 13);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *94,bitHeight/150 * 13,bitHeight/150 * 13);
//Eye 3
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *94,bitHeight/150 * 8,bitHeight/150 * 8);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *94,bitHeight/150 * 8,bitHeight/150 * 8);
//Eye 4
fill(250, 250, 250);
ellipse(BitX + bitHeight/150 * 117,BitY+ bitHeight/150 *92,bitHeight/150 * 4,bitHeight/150 * 4);
ellipse(BitX + bitHeight/150 * 77,BitY+ bitHeight/150 *92,bitHeight/150 * 4,bitHeight/150 * 4);
//Beanie
fill(124, 124, 125);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *51,bitHeight/150 *78,bitHeight/150 *42);
rect(BitX + bitHeight/150 * 58,BitY+ bitHeight/150 *55,bitHeight/150 *83,bitHeight/150 *18);
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *29,bitHeight/150 *10,bitHeight/150 *5);
//Nose
fill(219, 168, 105);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *109,bitHeight/150 *17,bitHeight/150 *12);
//Lips
fill(255, 129, 112);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *126,bitHeight/150 *33,bitHeight/150 *10);
line(BitX + bitHeight/150 * 115,BitY+ bitHeight/150 *125,BitX + bitHeight/150 * 84,BitY+ bitHeight/150 *125);
//Facial Hair
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *79,bitHeight/150 *19,bitHeight/150 *3);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *79,bitHeight/150 *19,bitHeight/150 *3);
triangle(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *144,BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *135,BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *135);
rect(BitX + bitHeight/150 * 87,BitY+ bitHeight/150 *117,bitHeight/150 *25,bitHeight/150 *1);
};
var drawtop = function (BitX,BitY,bitHeight){
//Top
fill(23, 99, 50);
rect(BitX + bitHeight/150 * 75,BitY+ bitHeight/150 *129, bitHeight/150 *50, bitHeight/150 *65);
rect(BitX + bitHeight/150 * 118,BitY+bitHeight/150 *126, bitHeight/150 *25,bitHeight/150 *60,bitHeight/150 * 20);
rect(BitX + bitHeight/150 * 59,BitY+bitHeight/150 *126,bitHeight/150 * 25,bitHeight/150 * 60,bitHeight/150 * 20);
//Pants
fill(61, 57, 46);
rect(BitX + bitHeight/150 * 75,BitY+bitHeight/150 *191,bitHeight/150 * 50,bitHeight/150 * 82);
line(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *272,BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *200);
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 100,BitY+bitHeight/150 *194,bitHeight/150 * 5,bitHeight/150 * 5);
};
var drawbithead = function (BitX,BitY,bitHeight){
//Head
fill(224, 172, 105);
ellipse(BitX + bitHeight/150 * 142, BitY+ bitHeight/150 *85,bitHeight/150 * 18,bitHeight/150 * 26);
ellipse(BitX + bitHeight/150 * 58,BitY+ bitHeight/150 * 85,bitHeight/150 * 18,bitHeight/150 * 26);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *91,bitHeight/150 * 86,bitHeight/150 * 100);
//Eye 1
fill(255, 255, 255);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *94,bitHeight/150 * 20,bitHeight/150 * 20);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *94,bitHeight/150 * 20,bitHeight/150 * 20);
//Eye 2
fill(135, 82, 2);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *94,bitHeight/150 * 13,bitHeight/150 * 13);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *94,bitHeight/150 * 13,bitHeight/150 * 13);
//Eye 3
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *94,bitHeight/150 * 8,bitHeight/150 * 8);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *94,bitHeight/150 * 8,bitHeight/150 * 8);
//Eye 4
fill(250, 250, 250);
ellipse(BitX + bitHeight/150 * 117,BitY+ bitHeight/150 *92,bitHeight/150 * 4,bitHeight/150 * 4);
ellipse(BitX + bitHeight/150 * 77,BitY+ bitHeight/150 *92,bitHeight/150 * 4,bitHeight/150 * 4);
//Beanie
fill(124, 124, 125);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *51,bitHeight/150 *78,bitHeight/150 *42);
rect(BitX + bitHeight/150 * 58,BitY+ bitHeight/150 *55,bitHeight/150 *83,bitHeight/150 *18);
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *29,bitHeight/150 *10,bitHeight/150 *5);
//Nose
fill(219, 168, 105);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *109,bitHeight/150 *17,bitHeight/150 *12);
//Lips
fill(255, 129, 112);
ellipse(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *126,bitHeight/150 *33,bitHeight/150 *10);
line(BitX + bitHeight/150 * 115,BitY+ bitHeight/150 *125,BitX + bitHeight/150 * 84,BitY+ bitHeight/150 *125);
//Facial Hair
fill(0, 0, 0);
ellipse(BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *79,bitHeight/150 *19,bitHeight/150 *3);
ellipse(BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *79,bitHeight/150 *19,bitHeight/150 *3);
triangle(BitX + bitHeight/150 * 100,BitY+ bitHeight/150 *144,BitX + bitHeight/150 * 120,BitY+ bitHeight/150 *135,BitX + bitHeight/150 * 80,BitY+ bitHeight/150 *135);
rect(BitX + bitHeight/150 * 87,BitY+ bitHeight/150 *117,bitHeight/150 *25,bitHeight/150 *1);
};
var drawbitGuard = function (BitX,BitY,bitHeight){
    //Boxing Gloves
fill(255, 0, 0);
ellipse(BitX + bitHeight/150 * 70,BitY+bitHeight/150 *120,bitHeight/150 * 40,bitHeight/150 * 39);
ellipse(BitX + bitHeight/150 * 135,BitY+bitHeight/150 *120,bitHeight/150 * 40,bitHeight/150 * 39);
    
};
var drawbitPunch = function (BitX,BitY,bitHeight){
    //Boxing Gloves
fill(255, 0, 0);
ellipse(pX = BitX + bitHeight/150 * 70, pY = BitY+bitHeight/150 *120, pW = bitHeight/150 * 40, pH = bitHeight/150 * 39);
ellipse(BitX + bitHeight/150 * 185,BitY+bitHeight/150 *137,bitHeight/150 * 40,bitHeight/150 * 39);

};

//enemy
var enTop = function(eX, eY, eW, eH){
    fill(110, 143, 189);
    rect(eX, eY, eW, eH);
    
};


//Health Bar Code
var healthBar = function(x,y,w,h,maxHealth){
    
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.maxHealth = maxHealth;
    this.maxWidth = w;
    this.health = maxHealth;
    
};

healthBar.prototype.draw = function() {
    
    strokeWeight(5);
    stroke(0, 0, 0);
    fill(255, 255, 255);
    rect(this.x, this.y, this.maxWidth, this.h);
    fill(255, 0, 0);
    rect(this.x, this.y, this.w, this.h);
    
};

healthBar.prototype.Damage = function(amount) {
    
    this.health = amount;
    this.w = (this.health / this.maxHealth) * this.maxWidth;
    if(this.w <= 0){this.w = 0;}
    
};

var health = 100;
var healthBarWidth = 200;
var healthBarHeight = 25;
var x1 = width / 2 - healthBarWidth / 2;
var y1 = height / 2 - healthBarHeight / 2;

var health1 = new healthBar(x1 - 60, y1  + 175, healthBarWidth - 60, healthBarHeight, health);
var health2 = new healthBar(x1 + 100, y1  + 175, healthBarWidth - 60, healthBarHeight, health);

//Main Code
    var draw = function() {
        background(121, 121, 168);
        var drawRing = function(){
        //Bottom
        fill(31, 28, 31);
        rect(40,300,300,40);
        //Ring Floor
        fill(86, 135, 132);
        rect(40,140,300,160);
        //Blue Corner
        fill(59, 71, 199);
        rect(40,90,8,50);
        rect(332,90,8,50);
        //Red Corner
        fill(247, 32, 32);
        rect(332,250,8,50);
        rect(40,250,8,50);
        //Rope Rings
        fill(46, 42, 42);
        ellipse(54,95,12,10);
        ellipse(54,112,12,10);
        ellipse(54,130,12,10);
        ellipse(326,95,12,10);
        ellipse(326,112,12,10);
        ellipse(326,130,12,10);
        ellipse(54,255,12,10);
        ellipse(54,273,12,10);
        ellipse(54,290,12,10);
        ellipse(326,255,12,10);
        ellipse(326,273,12,10);
        ellipse(326,290,12,10);
        //Top Rope
        fill(227, 20, 20);
        rect(51,95,5,155);
        rect(323,95,5,155);
        rect(60,92,260,5);
        //Middle Rope
        fill(247, 247, 247);
        rect(323,260,5,8);
        rect(51,260,5,8);
        rect(60,109,260,5);
        //Bottom Rope
        fill(27, 186, 2);
        rect(323,277,5,8);
        rect(51,277,5,8);
        rect(60,127,260,5);
        };
        drawRing();
        enTop(player2X, player2Y, eW, eH);
    
//Health Bar Damage
    var hitPoint = function() {
        var newHealth = health -= random(1,10);
        var newHealth2 = health -= random(1,10);
        health1.Damage(newHealth);
        health2.Damage(newHealth2);
};

//Draw Health Bars    
    health1.draw();
    health2.draw();
    strokeWeight(1);
     
//Control Layout For Player
    if (keyIsPressed && keys[UP]) {
        player1Y = player1Y-boxerSpeed;
    } 
    
    if (keyIsPressed && keys[DOWN]) {
        player1Y = player1Y + boxerSpeed;
    }
    
    if (keyIsPressed && keys[LEFT]) {
        player1X = player1X - boxerSpeed;
    }
    
    if (keyIsPressed && keys[RIGHT]) {
        player1X = player1X + boxerSpeed;
    }
     if (keyIsPressed && keys[77]) {
        drawtopPunch(player1X, player1Y, 50);
        drawbitheadPunch(player1X, player1Y, 50);
        drawbitPunch(player1X, player1Y, 50);
    }
    else{
        drawtop(player1X, player1Y, 50);
        drawbithead(player1X, player1Y, 50);
        drawbitGuard(player1X, player1Y, 50);
    }
//Control Layout For Enemy
    if (keyIsPressed && keys[87]) {
        player2Y = player2Y - enemyboxerSpeed;
    } 
    
    if (keyIsPressed && keys[83]) {
        player2Y = player2Y + enemyboxerSpeed;
    }
    
    if (keyIsPressed && keys[65]) {
        player2X = player2X - enemyboxerSpeed;
    }
    
    if (keyIsPressed && keys[68]) {
        player2X = player2X + enemyboxerSpeed;
    }
    else
    {
        enTop(player2X, player2Y, 50);
    }
    
    
//Keep Player1 In The Ring   
    if(player1Y > 210){
        player1Y = 210;
    }
        
    if(player1Y < 50){
        player1Y = 50;
    }
    if(player1X > 275){
        player1X = 275;
    }
    if(player1X < 35){
        player1X = 35;
    }
//Keep Player2 In The Ring
    
    if(player2Y > 210){
        player2Y = 210;
    }
        
    if(player2Y < 50){
        player2Y = 50;
    }
    if(player2X > 275){
        player2X = 275;
    }
    if(player2X < 35){
        player2X = 35;
    }
    
//Detect Enemy Punched
    if(pX > player2X - eW && pX < player2X + eW && pY > player2Y - eH && pY < player2Y + eH)    {
        
        var newHealth2 = health -= random(0.01,0.5);
        health2.Damage(newHealth2);
        
        pX = player1X - boxerSpeed;
        pY = player1Y + boxerSpeed;
        
    }


 };