Skip to content

Commit

Permalink
Added Carrom Game
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aditijainnn
Aditijainnn committed Jul 7, 2024
1 parent 77d0852 commit 49d491b
Show file tree
Hide file tree
Showing 11 changed files with 474 additions and 0 deletions.
44 changes: 44 additions & 0 deletions Carrom Game/carrom.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Carrom</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/canvasFunc.js"></script>
<script type="text/javascript" src="js/canvasCalls.js"></script>
<script type="text/javascript" src="js/coinFunc.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body style="background-image:url(carrom.jpg)">
<div class="row" style="margin: 0px;padding: 0px;">
<div class="col-md-3">
<div class="jumbotron">
<h3><b>Player 1</b></h3>
<p><b>Score : <span id="0">0</span></b></p>
</div>
<button class="btn btn-primary" type="button" id="Reset">Reset</button>
<div class="range range-primary">
<input type="range" name="range" min="10" max="70" value="35" id="Ranger">
</div>
</div>
<div class="col-md-6">
<canvas id="Carrom" width="720" height="720">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="Striker" width="720" height="720">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div class="col-md-3">
<div class="jumbotron">
<h3><b>Player 2</b></h3>
<p><b>Score : <span id="1">0</span></b></p>
</div>
<p id="mp">Mouse Positions :</p>
</div>
</div>
<script type="text/javascript">
canvasCalls();
initializePlayers(2);
</script>
</body>
</html>
Binary file added Carrom Game/carrom.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions Carrom Game/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions Carrom Game/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
body,html{
padding: 0px;
margin: 0px;

}
body{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
div{
margin: 0px;
padding: 0px;
}
#Carrom{
background-color: black;
position: absolute;
}
#Striker{
position: relative;
}
.jumbotron{
padding: 0px;
margin: 0px;
padding-left: 20px;
}
7 changes: 7 additions & 0 deletions Carrom Game/js/bootstrap.min.js
View file

Large diffs are not rendered by default.

100 changes: 100 additions & 0 deletions Carrom Game/js/canvasCalls.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
function canvasCalls(){
var c = document.getElementById("Carrom");
var ctx = c.getContext("2d");
//inner rectangle
drawRect(20,20,680,680,'#f3e5ab',ctx);
//Corner Circles
drawCircle(35,35,22,'black',ctx);
drawCircle(685,35,22,'black',ctx);
drawCircle(685,685,22,'black',ctx);
drawCircle(35,685,22,'black',ctx);
//Central Circles
drawCircle(360,360,10,'black',ctx);
drawCircleS(360,360,70,ctx);
drawCircleS(360,360,75,ctx);
//demo rect
//drawRectS(100,100,520,520,ctx);
//drawRectS(125,125,470,470,ctx);
//top Left Design
//Circles
drawCircleS(125,125,5,ctx);
drawCircle(125+12.5,125-12.5,12.5,'red',ctx);
drawCircle(125-12.5,125+12.5,12.5,'red',ctx);
//Lines Connecting Circles
drawLine(125+12.5,125,595-12.5,125,'black',ctx);
drawLine(125+12.5,100,595-12.5,100,'black',ctx);
//Line and Arc
drawLine(75,75,235+5,235+5,'black',ctx);
drawArc(220,220,30,1.5*Math.PI,1*Math.PI,ctx);
//top Right Design
//Circles
drawCircleS(595,125,5,ctx);
drawCircle(595-12.5,125-12.5,12.5,'red',ctx);
drawCircle(595+12.5,125+12.5,12.5,'red',ctx);
//Lines Connecting Circles
drawLine(595,125+12.5,595,595-12.5,'black',ctx);
drawLine(595+25,125+12.5,595+25,595-12.5,'black',ctx);
//Line and Arc
drawLine(645,75,485-5,235+5,'black',ctx);
drawArc(500,220,30,0*Math.PI,1.5*Math.PI,ctx);

//bottom Right Design
//Circles
drawCircleS(595,595,5,ctx);
drawCircle(595-12.5,595+12.5,12.5,'red',ctx);
drawCircle(595+12.5,595-12.5,12.5,'red',ctx);
//Lines Connecting Circles
drawLine(595-12.5,595,125+12.5,595,'black',ctx);
drawLine(595-12.5,595+25,125+12.5,595+25,'black',ctx);
//Line and Arc
drawLine(645,645,485-5,485-5,'black',ctx);
drawArc(500,500,30,0.5*Math.PI,0*Math.PI,ctx);

//bottom Left Design
//Circles
drawCircleS(125,595,5,ctx);
drawCircle(125+12.5,595+12.5,12.5,'red',ctx);
drawCircle(125-12.5,595-12.5,12.5,'red',ctx);
//Lines Connecting Circles
drawLine(125,595-12.5,125,125+12.5,'black',ctx);
drawLine(125-25,595-12.5,125-25,125+12.5,'black',ctx);
//Line and Arc
drawLine(75,645,235+5,485-5,'black',ctx);
drawArc(220,500,30,1*Math.PI,0.5*Math.PI,ctx);

//coins
coins = [];
coins.push(new coin(0,0,'white',0,0));
coins.push(new coin(360-25,360,'#515050',0,0));
coins.push(new coin(360,360,'brown',0,0));
coins.push(new coin(360+25,360,'#515050',0,0));
coins.push(new coin(360,360+25,'#515050',0,0));
coins.push(new coin(360-25,360+25,'brown',0,0));
coins.push(new coin(360+25,360+25,'brown',0,0));
coins.push(new coin(360,360-25,'#515050',0,0));
coins.push(new coin(360-25,360-25,'brown',0,0));
coins.push(new coin(360+25,360-25,'brown',0,0));

drawCoins();
}

function drawCoins()
{
var ct = document.getElementById("Striker");
var ctxt = ct.getContext("2d");
for(var i=1;i<coins.length;i++)
{
drawCircle(coins[i].x,coins[i].y,12.5,coins[i].color,ctxt);
}

}

function initializePlayers(no)
{
TotalplayerNo = no;
currPlayer = 0;
players = [];
players.push(new player(595-12.5-230+390,595+12.5,595-12.5+390,125+12.5+390));
players.push(new player(595-12.5-230+390,125-12.5,595-12.5+390,125+12.5+390));
//alert(players[currPlayer].x);
}
37 changes: 37 additions & 0 deletions Carrom Game/js/canvasFunc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
function drawCircle(x,y,r,color,ctx){
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, r-3, 0, 2 * Math.PI, false);
ctx.stroke();
}
function drawCircleS(x,y,r,ctx){
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.stroke();

}
function drawRect(x,y,width,height,color,ctx){
ctx.fillStyle = color;
ctx.fillRect(x,y,width,height);
}
function drawRectS(x,y,width,height,ctx){
ctx.rect(x, y, width, height);
ctx.stroke();
}
function drawArc(x,y,r,angle_st,angle_end,ctx){
ctx.beginPath();
ctx.arc(x, y, r, angle_st, angle_end, false);
ctx.stroke();
}
function drawLine(x1,y1,x2,y2,colorL,ctx){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
//ctx.lineWidth = 10;
ctx.strokeStyle = colorL;
ctx.stroke();
}
109 changes: 109 additions & 0 deletions Carrom Game/js/coinFunc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
function player(x,y,rightBound,leftBound){
this.x = x;
this.y = y;
this.lb = leftBound;
this.rb = rightBound;
this.score = 0;
}
function updateScore(){
var score = document.getElementById(currPlayer);
score.innerHTML = players[currPlayer].score;
}
function dist(x1,y1,x2,y2){
var dis = Math.pow((x1-x2),2)+Math.pow((y1-y2),2);
dis = Math.sqrt(dis);
return dis;
}
function allCoinStop(){
for(var i=0;i<coins.length;i++)
{
if( coins[i].vx != 0 && coins[i].vy !=0)
return 0;
}
return 1;
}
function coinPot(coin)
{
var potLeftUp = dist(coin.x,coin.y,35,35);
var potRightUp = dist(coin.x,coin.y,35,685);
var potLeftDown = dist(coin.x,coin.y,685,35);
var potRightDown = dist(coin.x,coin.y,685,685);
var rad = 18;
if(potLeftUp<rad || potLeftDown<rad || potRightUp<rad || potRightDown<rad)
return true;
else
return false;
}
function coin(x,y,color,vx,vy)
{
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.color = color;
this.rebound = function() {
//alert("rebound");
if( (this.x + 12.5 + this.vx > 700 ) || (this.x - 12.5 + this.vx < 20) )
{
this.vx = -this.vx;
}
if((this.y + this.vy+ 12.5 > 700 ) || (this.y-12.5+this.vy < 20))
{
this.vy = -this.vy;
}
}
this.update = function() {
//alert("Update");
this.x+=this.vx;
this.y+=this.vy;
this.vx*=0.98;
this.vy*=0.98;
}
this.crash = function(i,j){
//alert("i : "+ coins[i].x);
var dis = dist(this.x+this.vx,this.y+this.vy,coins[i].x+coins[i].vx,coins[i].y+coins[i].vy);
if(dis<=25)
{
var dx = coins[j].x+coins[j].vx-coins[i].x+coins[i].vx;
var dy = coins[j].y+coins[j].vy-coins[i].y+coins[i].vy;
var collisionAngle = Math.atan2(dy, dx);

var speed1 = Math.sqrt(coins[i].vx*coins[i].vx + coins[i].vy*coins[i].vy );
var speed2 = Math.sqrt(coins[j].vx*coins[j].vx + coins[j].vy*coins[j].vy);

var direction1 = Math.atan2(coins[i].vy, coins[i].vx);
var direction2 = Math.atan2(coins[j].vy, coins[j].vx);

var velocityx_1 = speed1 * Math.cos(direction1 - collisionAngle);
var velocityy_1 = speed1 * Math.sin(direction1 - collisionAngle);
var velocityx_2 = speed2 * Math.cos(direction2 - collisionAngle);
var velocityy_2 = speed2 * Math.sin(direction2 - collisionAngle);

var final_velocityx_1 = velocityx_2;
var final_velocityx_2 = velocityx_1;
var final_velocityy_1 = velocityy_1;
var final_velocityy_2 = velocityy_2;

ball1_velocityx = Math.cos(collisionAngle) * final_velocityx_1 +
Math.cos(collisionAngle + Math.PI/2) * final_velocityy_1;
ball1_velocityy = Math.sin(collisionAngle) * final_velocityx_1 +
Math.sin(collisionAngle + Math.PI/2) * final_velocityy_1;
ball2_velocityx = Math.cos(collisionAngle) * final_velocityx_2 +
Math.cos(collisionAngle + Math.PI/2) * final_velocityy_2;
ball2_velocityy = Math.sin(collisionAngle) * final_velocityx_2 +
Math.sin(collisionAngle + Math.PI/2) * final_velocityy_2;

coins[i].vx = ball1_velocityx;
coins[i].vy = ball1_velocityy;
coins[j].vx = ball2_velocityx;
coins[j].vy = ball2_velocityy;

coins[j].x+=coins[j].vx;
coins[j].y+=coins[j].vy;
coins[i].x+=coins[i].vx;
coins[i].y+=coins[i].vy;
}
}


}
4 changes: 4 additions & 0 deletions Carrom Game/js/jquery.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 49d491b

Please sign in to comment.