var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var x = canvas.height;
var paddleXPlayer1 = x * 0.25;
var paddleXPlayer2 = x * 0.75;
var y = canvas.width;
var paddleYPlayer1 = y / 2;
var paddleYPlayer2 = y / 2;
var ballRadius1 = 23;
var ballRadius2 = 23;
var paddleXTopArmPlayer1 = 100;
var paddleXBottomArmPlayer1 = 100;
var paddleXTopArmPlayer2 = 270;
var paddleXBottomArmPlayer2 = 270;
var paddleYTopArmPlayer1 = 170;
var paddleYBottomArmPlayer1 = 220;
var paddleYTopArmPlayer2 = 170;
var paddleYBottomArmPlayer2 = 220;
var rightPunchPlayer1=false;
var leftPunchPlayer1=false;
var topPressedPlayer1 = false;
var bottomPressedPlayer1 = false;
var leftPressedPlayer1 = false;
var rightPressedPlayer1 = false;
var rightPunchPlayer2= false;
var leftPunchPlayer2 = false;
var topPressedPlayer2 = false;
var bottomPressedPlayer2 = false;
var leftPressedPlayer2 = false;
var rightPressedPlayer2 = false;
var zButton = false;
var xButton = false;
var cButton = false;
var commaButton = false;
var mButton = false;
var nButton = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("keypress", keyPressHandler, false);
function keyDownHandler(e) {
// BOTONES AL PRESIONAR JUGADOR 1
//O
if(e.keyCode == 79){
rightPunchPlayer2 = true;
}
//U
if(e.keyCode == 85){
leftPunchPlayer2 = true;
}
//E
if (e.keyCode == 69){
leftPunchPlayer1 = true;
}
//Q
if (e.keyCode == 81){
rightPunchPlayer1 = true;
}
// W
if (e.keyCode == 87 || e.keyCode == 119) {
topPressedPlayer1 = true;
}
// S
else if (e.keyCode == 83 || e.keyCode == 115) {
bottomPressedPlayer1 = true;
}
// A
else if (e.keyCode == 65 || e.keyCode == 97) {
leftPressedPlayer1 = true;
}
// D
else if (e.keyCode == 68 || e.keyCode == 100) {
rightPressedPlayer1 = true;
}
// Z
else if (e.keyCode == 90 || e.keyCode == 122) {
}
// X
else if (e.keyCode == 88 || e.keyCode == 120) {
}
// C
else if (e.keyCode == 67 || e.keyCode == 99) {
}
//BOTONES AL PRESIONAR JUGADOR 2
// I
else if (e.keyCode == 73 || e.keyCode == 115) {
topPressedPlayer2 = true;
}
// K
else if (e.keyCode == 75 || e.keyCode == 107) {
bottomPressedPlayer2 = true;
}
// J
else if (e.keyCode == 74 || e.keyCode == 106) {
leftPressedPlayer2 = true;
}
// L
else if (e.keyCode == 76 || e.keyCode == 108) {
rightPressedPlayer2 = true;
}
// ,
else if (e.keyCode == 44 || e.keyCode == 60) {
}
// M
else if (e.keyCode == 77 || e.keyCode == 109) {
}
// N
else if (e.keyCode == 78 || e.keyCode == 110) {
}
}
function keyUpHandler(e) {
// BOTONES SIN PRESIONAR JUGADOR 1
//E
if (e.keyCode == 69){
leftPunchPlayer1 = false;
}
//Q
if(e.keyCode == 81){
rightPunchPlayer1 = false;
}
// W
if (e.keyCode == 87 || e.keyCode == 119) {
topPressedPlayer1 = false;
}
// S
else if (e.keyCode == 83 || e.keyCode == 115) {
bottomPressedPlayer1 = false;
}
// A
else if (e.keyCode == 65 || e.keyCode == 97) {
leftPressedPlayer1 = false;
}
// D
else if (e.keyCode == 68 || e.keyCode == 100) {
rightPressedPlayer1 = false;
}
// BOTONES SIN PRESIONAR JUGADOR 2
//O
if(e.keyCode == 79){
rightPunchPlayer2 = false;
}
//U
else if(e.keyCode == 85){
leftPunchPlayer2 = false;
}
// I
else if (e.keyCode == 73 || e.keyCode == 115) {
topPressedPlayer2 = false;
}
// K
else if (e.keyCode == 75 || e.keyCode == 107) {
bottomPressedPlayer2 = false;
}
// J
else if (e.keyCode == 74 || e.keyCode == 106) {
leftPressedPlayer2 = false;
}
// L
else if (e.keyCode == 76 || e.keyCode == 108) {
rightPressedPlayer2 = false;
}
}
function keyPressHandler(e) {
}
/*
function ColissionYPlayer1() {
do {
paddleYPlayer1 += 4;
} while (ballRadius1 == ballRadius2)
}
*/
function movementPlayer1() {
// MOVIMIENTO JUGADOR 1
// W
if (topPressedPlayer1 && paddleYPlayer1 > 0) {
paddleYPlayer1 -= 4;
paddleYTopArmPlayer1 -= 4;
paddleYBottomArmPlayer1 -= 4;
}
// S
else if (bottomPressedPlayer1 && paddleYPlayer1 < y) {
paddleYPlayer1 += 4;
paddleYTopArmPlayer1 += 4;
paddleYBottomArmPlayer1 += 4;
}
// A
else if (leftPressedPlayer1 && paddleXPlayer1 > 0) {
paddleXPlayer1 -= 4;
paddleXTopArmPlayer1 -= 4;
paddleXBottomArmPlayer1 -= 4;
}
// D
else if (rightPressedPlayer1 && paddleXPlayer1 < x) {
paddleXPlayer1 += 4;
paddleXTopArmPlayer1 += 4;
paddleXBottomArmPlayer1 += 4;
}
}
function movementPlayer2() {
// MOVIMIENTO JUGADOR 2
// I
if (topPressedPlayer2 && paddleYPlayer2 > 0) {
paddleYPlayer2 -= 4;
paddleYTopArmPlayer2 -= 4;
paddleYBottomArmPlayer2 -= 4;
}
// K
else if (bottomPressedPlayer2 && paddleYPlayer2 < y) {
paddleYPlayer2 += 4;
paddleYTopArmPlayer2 += 4;
paddleYBottomArmPlayer2 += 4;
}
// J
else if (leftPressedPlayer2 && paddleXPlayer2 > 0) {
paddleXPlayer2 -= 4;
paddleXTopArmPlayer2 -= 4;
paddleXBottomArmPlayer2 -= 4;
}
// L
else if (rightPressedPlayer2 && paddleXPlayer2 < x) {
paddleXPlayer2 += 4;
paddleXTopArmPlayer2 += 4;
paddleXBottomArmPlayer2 += 4;
}
}
function drawHead1() {
ctx.beginPath();
ctx.arc(paddleXPlayer1, paddleYPlayer1, ballRadius1, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
var face1 = new Image();
head1.src= 'https://cdn.staticneo.com/w/digimon/c/c6/Mamemon.jpg';
// BRAZO DE ABAJO
ctx.fillRect(paddleXBottomArmPlayer1, paddleYBottomArmPlayer1, 30, 10);
// BRAZO DE ARRIBA
ctx.fillRect(paddleXTopArmPlayer1, paddleYTopArmPlayer1, 30, 10);
}
function drawHead2() {
ctx.beginPath();
ctx.arc(paddleXPlayer2, paddleYPlayer2, ballRadius2, 0, Math.PI*2);
ctx.fillStyle = "rgba(255, 0, 0, 1)";
ctx.fill();
// BRAZO DE ABAJO
ctx.fillRect(paddleXBottomArmPlayer2, paddleYBottomArmPlayer2, 30, 10);
// BRAZO DE ARRIBA
ctx.fillRect(paddleXTopArmPlayer2, paddleYTopArmPlayer2, 30, 10);
ctx.closePath();
}
function punch2(){
if(rightPunchPlayer2 && paddleYPlayer2 > 0 ){
ctx.beginPath();
ctx.arc(paddleXPlayer2, paddleYPlayer2, ballRadius2, 0, Math.PI*2);
ctx.fillStyle = "rgba(255, 0, 0, 1)";
ctx.fill();
// BRAZO DE ABAJO
ctx.fillRect(paddleXBottomArmPlayer2 +10, paddleYBottomArmPlayer2, 30, 10);
// BRAZO DE ARRIBA
ctx.fillRect(paddleXTopArmPlayer2 -5, paddleYTopArmPlayer2, 25, 10);
ctx.closePath();
}
else if(leftPunchPlayer2 && paddleYPlayer2 > 0){
ctx.beginPath();
ctx.arc(paddleXPlayer2, paddleYPlayer2, ballRadius2, 0, Math.PI*2);
ctx.fillStyle = "rgba(255, 0, 0, 1)";
ctx.fill();
// BRAZO DE ABAJO
ctx.fillRect(paddleXBottomArmPlayer2 -5, paddleYBottomArmPlayer2, 25, 10);
// BRAZO DE ARRIBA
ctx.fillRect(paddleXTopArmPlayer2 +10 , paddleYTopArmPlayer2, 30, 10);
ctx.closePath();
}}
function punch1(){
if(rightPunchPlayer1 && paddleYPlayer1 > 0 ){
ctx.beginPath();
ctx.arc(paddleXPlayer1, paddleYPlayer1, ballRadius1, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
// BRAZO DE ABAJO
ctx.fillRect(paddleXBottomArmPlayer1 -5, paddleYBottomArmPlayer1, 25, 10);
// BRAZO DE ARRIBA
ctx.fillRect(paddleXTopArmPlayer1 +10, paddleYTopArmPlayer1, 30, 10);
ctx.closePath();
}
else if(leftPunchPlayer1 && paddleYPlayer1 > 0){
ctx.beginPath();
ctx.arc(paddleXPlayer1, paddleYPlayer1, ballRadius1, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
// BRAZO DE ABAJO
ctx.fillRect(paddleXBottomArmPlayer1 +10, paddleYBottomArmPlayer1, 30, 10);
// BRAZO DE ARRIBA
ctx.fillRect(paddleXTopArmPlayer1 -5, paddleYTopArmPlayer1, 25, 10);
ctx.closePath();
}
window.requestAnimationFrame(drawHead1)
}
function head1(){
drawHead1();
movementPlayer1();
this.display = function(){
}
}
function head2(){
drawHead2();
movementPlayer2();
}
function radius(){
ballRadius1;
ballRadius2;
}
var h1;
var h2;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
h1 = new head1();
h2 = new head2();
punch1();
punch2();
}
setInterval(draw, 10);
body {
padding-left: 34.5%;
padding-top: 7%;
}
canvas{
background: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="BoxingStyle.css">
<title>Boxing</title>
</head>
<body>
<canvas id="myCanvas" height="400" width="400">
</canvas>
<script type="text/javascript" src="Boxing.js"></script>
</body>
</html>