Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cricket Code #514

Merged
merged 2 commits into from
Jan 13, 2025
Merged

Cricket Code #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62dc35f
cricket code
Peehu1308 Jan 12, 2025
3cd1c0c
changes
Peehu1308 Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions public/cricket/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1 style="color: white;">Ball Bat Stump Game</h1>
<div class="box1">
<h1 >Ball Bat Stump Game</h1>
<button class="game_buttons" onclick="
let usermsg='Bat';

Expand Down Expand Up @@ -37,7 +37,7 @@ <h1 style="color: white;">Ball Bat Stump Game</h1>



">
">
<img src="bat.jpeg" class="game_image" alt="Bat_button">
</button>

Expand Down Expand Up @@ -120,6 +120,9 @@ <h2 id="score"></h2>
//using reset function we can also so in alert notification
" id="reset"> RESET </button>

</div>



<!-- added script -->
<script src="script.js"></script>
Expand Down
186 changes: 92 additions & 94 deletions public/cricket/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,113 @@
let score;
let scorestr=localStorage.getItem('SCORE');
let scorestr = localStorage.getItem('SCORE');
resetscore(scorestr);

function resetscore(scorestr){
score=scorestr?JSON.parse(scorestr): { //if 1st condition is !== undefined its run else
// score={ all values equals to 0}.....
win:0,
lost:0, //1.this helps 1st to clear data from storage..
tie:0, //2.and click refresh in broswer to restart newly..! hint:you can use refresh button
}; // to do both at same-time..

score.display_results=function(){
return ` won: ${score.win},lost: ${score.lost},tie: ${score.tie}. `;

function resetscore(scorestr) {
// Explicitly reset the score to 0 if no score is stored in localStorage
score = {
win: 0,
lost: 0,
tie: 0,
};
showresult(); //clicking reset button the function prints without pass parameters...

score.display_results = function () {
return `<br>Won: ${score.win/2}<br><span style="color:red"> Lost: ${score.lost/2}</span><br>
Tie: ${score.tie/2} <br> <span style="color:purple;">Total Games: ${score.win/2 + score.lost/2 + score.tie/2}</span>`;
};

}
// Save the reset score back to localStorage
localStorage.setItem('SCORE', JSON.stringify(score));



}

function computergeneratechoice(){
let choice;
//random choice by computer in between 0 & 3.
let randomnum=Math.random()*3;

if(randomnum>0 && randomnum<=1){
return 'Bat';
}
else if(randomnum >1 && randomnum<=2){
return 'Ball';
}
else{
return 'stump';
}
function computergeneratechoice() {
let randomnum = Math.random() * 3;

//return choice;
//cmpmsg='computer has chosen:'+computerchoice;
if (randomnum > 0 && randomnum <= 1) {
return 'Bat';
} else if (randomnum > 1 && randomnum <= 2) {
return 'Ball';
} else {
return 'stump';
}
}


// let total=0;


function getresult(usermove,cmpchoice){
if(usermove==='Bat'){
//total++;
if(cmpchoice==='Bat'){
score.tie+=1;
return 'its a tie';
}
else if(cmpchoice==='Ball'){
score.win++;
return 'user won';
}
else
{
score.lost++;
return 'computer has won';
}
}
else if(usermove==='Ball'){
//total++;
if(cmpchoice==='Ball'){
score.tie+=1;
return 'its a tie';
}
else if(cmpchoice==='Bat'){
score.lost+=1;
return 'computer won';
}
else
{
score.win+=1;
return 'user won';
}
}
else if(usermove==='stump'){
// total++;
if(cmpchoice==='stump'){
score.tie+=1;
return 'its a tie';
}
else if(cmpchoice==='Ball'){
score.lost+=1;
return 'computer has won';
}
else
{
score.win+=1;
return 'user won';
}
}
function choiceimage(choice) {
if (choice === 'Bat') {
return '<div style="display: flex; justify-content: center; align-items: center; height: 100px;"><img src="bat.jpeg" alt="Bat" class="game-image" style="width: 80px; height: 80px;"></div>';
} else if (choice === 'Ball') {
return '<div style="display: flex; justify-content: center; align-items: center; height: 100px;"><img src="ball.jpeg" alt="Ball" class="game-image" style="width: 80px; height: 80px;"></div>';
} else if (choice === 'stump') { // ensure 'stump' is used properly
return '<div style="display: flex; justify-content: center; align-items: center; height: 100px;"><img src="wickets.jpeg" alt="Stump" class="game-image" style="width: 80px; height: 80px;"></div>';
}
return '';
}

function getresult(usermove, cmpchoice) {
let resultMessage = '';
let userimage = '';
let cmpimage = '';

// Get the image HTML for both user and computer choices
// userimage = choiceimage(usermove);
// cmpimage = choiceimage(cmpchoice);

// Determine the result message based on user and computer choices
if (usermove === 'Bat') {
if (cmpchoice === 'Bat') {
score.tie += 1;
resultMessage = ` It's a tie.`;
} else if (cmpchoice === 'Ball') {
score.win++;
resultMessage = ` User won.`;
} else {
score.lost++;
resultMessage = `Computer won.`;
}
} else if (usermove === 'Ball') {
if (cmpchoice === 'Ball') {
score.tie += 1;
resultMessage = ` It's a tie.`;
} else if (cmpchoice === 'Bat') {
score.lost += 1;
resultMessage = `Computer won.`;
} else {
score.win += 1;
resultMessage = ` User won.`;
}
} else if (usermove === 'stump') {
if (cmpchoice === 'stump') {
score.tie += 1;
resultMessage = ` It's a tie.`;
} else if (cmpchoice === 'Ball') {
score.lost += 1;
resultMessage = ` Computer won.`;
} else {
score.win += 1;
resultMessage = `User won.`;
}
}

return `<span style="color:gold">${resultMessage}</span>`;
}


function showresult(usermove,cmpchoice,result){

localStorage.setItem('SCORE',JSON.stringify(score));

document.querySelector('#user-move').innerHTML=
usermove ? `user_chosen: ${usermove}` : '';
document.querySelector('#computer-move').innerHTML=
cmpchoice ? `computer_chosen: ${cmpchoice}` : '';
document.querySelector('#result').innerHTML= result || '';
document.querySelector('#score').innerHTML=`score: ${score.display_results()}`;
function showresult(usermove, cmpchoice) {

let result = getresult(usermove, cmpchoice);


//alert( `1.user chosen: ${usermove} \n2.computer chosen:${cmpchoice} \n3.the result is:${result}\n ${score.display_results()}`);
localStorage.setItem('SCORE', JSON.stringify(score));

// Display only the images of the user and computer's choices
document.querySelector('#user-move').innerHTML = `User chose: ${choiceimage(usermove)}`;
document.querySelector('#computer-move').innerHTML = `Computer chose: ${choiceimage(cmpchoice)}`;

// Display the result text (not repeating images)
document.querySelector('#result').innerHTML = result;
document.querySelector('#score').innerHTML = `${score.display_results()}`;
}

Binary file added public/cricket/stadiumimage.webp
View file
Open in desktop
Binary file not shown.
40 changes: 39 additions & 1 deletion public/cricket/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,50 @@ body{
margin-top: 50px;
text-align: center;

background-image:url(stadium.jpeg);
background-image:url(stadiumimage.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;

}

.box1{
background-color: black;
width: 50%;
display: inline-block;
align-items: center;
margin-top: 20px;
border-radius: 30px;
border: 3px solid white;
animation: bounceIn 2s forwards;

}

@keyframes bounceIn {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

.game-image{
align-items: center;
}
.box1 h1{
color: white;
padding: 30px;
font-weight: bold;
font-size: 50px;
font-style: italic;
text-decoration: underline;

}

.game_buttons{

height: 100px;
Expand Down
Loading