jQuery addClass example

Change class name on click in jQuery

by Cristi257

HTML

<div id="scoreboard">

</div>


<div id="table">

  <canvas id="canvasId">
      CANVAS IS NOT WORKING
  </canvas>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#table {
  position: relative;
  border: 1px solid white;
  height: 375px;
  width: 750px;
  background-color: lightgrey;
}

#scoreboard {
  display:flex;
  position: relative;
  justify-content: space-between;
  /* border: 1px solid white; */
  /* height: 100px; */
  width: 751px;
}

#ball-player1 {
  background-image: url("https://i.postimg.cc/2jZHRKqw/evil.png");
  background-size: cover;
  /* display: block; */
  border-radius: 10px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
}

#ball-player2 {
  background-image: url("https://i.postimg.cc/tR3hzQZL/joker.png");
  background-size: cover;
  border-radius: 10px;
  position: absolute;
  top: 350px;
  left: 725px;
  width: 25px;
  height: 25px;
}

.ball-black {
  background-color: black;
  border-radius: 12.5px;
  position: absolute;
  width: 25px;
  height: 25px;
}

.ball-blue {
  background-color: blue;
  border-radius: 12.5px;
  position: absolute;
  width: 25px;
  height: 25px;
}

.ball-green {
  background-color: green;
  border-radius: 12.5px;
  position: absolute;
  width: 25px;
  height: 25px;
}

.ball-yellow {
  background-color: yellow;
  border-radius: 12.5px;
  position: absolute;
  width: 25px;
  height: 25px;
}

.playerNames {
  display:inline-block;
  color: white;
  font-weight:bold;
}

#canvasId {
  background-color: lightgrey;
  border-radius: 5px;
  position: absolute;
  width: 750px;
  height: 375px;
}

.explosion {
  z-index: 100;
  position: absolute;
  height: 100px;
  width: 100px;
  background: url('https://commondatastorage.googleapis.com/codeskulptor-assets/explosion.hasgraphics.png') 0px 0px;
}

#playerScore{
  display:inline-block;
  margin-left: 15px;
  font-weight: 400;
}

JavaScript

var score1 = 0,
  score2 = 0;
var tableWidth = parseInt($('#table').css('width')),
  tableHeight = parseInt($('#table').css('height'));
tableWidth -= 25; ///Din cauza borderului si radius mingii
tableHeight -= 25;
tableArea = tableWidth * tableHeight;
const blackBalls = Math.floor((0.005 / 100) * tableArea);
const specialBalls = Math.floor((0.0025 / 100) * tableArea);
const blueBalls = specialBalls / 3,
  greenBalls = specialBalls / 3,
  yellowBalls = specialBalls / 3;
var ballPositions = [];
var numberOfBalls = 0;
var radius = 0;
var frozen1 = false,
  frozen2 = false;
var name1 = prompt("Enter player 1 name");
var name2 = prompt("Enter player 2 name");
var gameOver = false;
var gameTimer = 30000,
  coloredTimer = 3000;
var timeFrozen1, timeFrozen2, timeShot1 = 0,
  timeShot2 = 0;
var bulletList = [],
  bulletIndex = 0,
  bulletRadius = 5,
  bulletSpeed = 3;
var canvas = document.getElementById("canvasId");
var c = canvas.getContext("2d");
var sprite1Line = 0;
var sprite1Column = 0;
var sprite2Line = 0;
var sprite2Column = 0;


var pressedKeys1 = {

  13: false,
  37: false,
  38: false,
  39: false,
  40: false

};

var pressedKeys2 = {

  32: false,
  65: false,
  87: false,
  68: false,
  83: false

};

function initialisePlayersPosition() {

  var player1 = '<div id ="ball-player1"> </div>';
  var player2 = '<div id ="ball-player2"> </div>';
  $("#table").append(player1);
  $("#table").append(player2);
}

function initialiseScoreBoard() {

  if (name1 === "" || name1 === null)
    name1 = "Player1";
  if (name2 === "" || name2 === null)
    name2 = "Player2";
  name1 += ' ';
  name2 += ' ';
  var player1spot = $(document.createElement('div')).attr('class', 'playerNames');
  player1spot.append(name1);
  var player1score = $(document.createElement('div')).attr("id", 'playerScore');
  player1score.append(score1);
  player1spot.append(player1score);
  var player2spot = $(document.createElement('div')).attr('class', 'playerNames');
  player2spot.append(name2);
 ...