Skip to content

My first game in js #10

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

Open
sami-odoo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

My first game in js #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 34 additions & 0 deletions exercise.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// const object = {
// "p1": 1,
// "p2": 2,
// "p3": 3,
// "p4": {
// "p5": 4
// },
// }

// console.log(object);
// var size = Object.keys(object).length;
// console.log(size);

// let myPromise = new Promise(function(myResolve, myReject) {
// // "Producing Code" (May take some time)

// myResolve(); // when successful
// myReject(); // when error
// });

// // "Consuming Code" (Must wait for a fulfilled Promise)
// myPromise.then(
// function(value) { /* code if successful */ },
// function(error) { /* code if some error */ }
// );

// console.log((fetch('portal.tycoonstats.com/api/demo')));

async function abc() {
const data = await fetch('https://portal.tycoonstats.com/api/demo')
console.log(data.text())
}

abc();
16 changes: 16 additions & 0 deletions fetch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
async function abc() {
const data = await fetch('https://portal.tycoonstats.com/api/demo')
console.log(await data.text())
}

abc();
</script>
</body>
</html>
118 changes: 118 additions & 0 deletions game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="position-absolute top-50 start-50 translate-middle">

<h2 class="mt-5 mb-5">Stone Paper Scissor</h2>
<div class="mt-5 mb-5">
<span><strong>Player: </strong></span><h3 id="demo"></h3><br/>
<span><strong>Computer: </strong></span><h3 id="demo2"></h3><br/>
<span><strong>Win: </strong></span><h3 id="demo4"></h3><br/>
<span><strong>This Game: </strong></span><h3 id="demo3"></h3>
</div>


<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" id="myBtn" class="btn btn-outline-dark" onclick="document.getElementById('demo').innerHTML = getRndInteger(1,3)">Stone</button>
<button type="button" id="myBtn1" class="btn btn-outline-dark" onclick="document.getElementById('demo').innerHTML = getRndInteger1(1,3)">Paper</button>
<button type="button" id="myBtn2" class="btn btn-outline-dark" onclick="document.getElementById('demo').innerHTML = getRndInteger2(1,3)">Scissor</button>
</div>

</div>


<script>
Copy link
Owner

@shsa-odoo shsa-odoo Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of adding code to html <script> create a separate file for JS.

Copy link
Author

@sami-odoo sami-odoo Feb 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohk sir. I will take care from next time

document.getElementById("myBtn").addEventListener("click", displayDate);
document.getElementById("myBtn1").addEventListener("click", displayPaper);
document.getElementById("myBtn2").addEventListener("click", displayScissor);
Comment on lines +32 to +34
Copy link
Owner

@shsa-odoo shsa-odoo Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for this specific case we can add logic of querySelectorAll("botton"), and for each button click we can call a method that will update the scenario who win.
Re- write the code: using concept of:
querySelectorAll("botton"), use foreach, and onclick call one method that will update the state, also use ternary operator as user can win in three cases only
you_win = ( (you === "rock") && (opponent === "scissor") ||
(you === "paper") && (opponent === "rock") ||
(you === "scissor") && (opponent === "rock") ) // returns true for your win cases only.

Copy link
Author

@sami-odoo sami-odoo Feb 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will update my code sir . Thank you for the help


var pl =0,cmp=0,cnt=0;

function displayDate() {
document.getElementById("demo").innerHTML = "Stone";
cnt++;
}

function displayPaper() {
document.getElementById("demo").innerHTML = "Paper";
cnt++;
}

function displayScissor() {
document.getElementById("demo").innerHTML = "Scissor";
cnt++;
}

function getRndInteger(min, max) {
let n = Math.floor(Math.random() * (max - min + 1) ) + min;

if(n==1){
document.getElementById("demo2").innerHTML = "Stone";
document.getElementById("demo3").innerHTML = "Tie";
}
else if(n==2){
document.getElementById("demo2").innerHTML = "Paper";
document.getElementById("demo3").innerHTML = "Lost";
cmp=cmp+1;
}
else if(n==3){
document.getElementById("demo2").innerHTML = "Scissor";
document.getElementById("demo3").innerHTML = "Won";
pl=pl+1;
}

document.getElementById("demo4").innerHTML = ` ${pl}:${cmp} `;
}

function getRndInteger1(min, max) {
let n = Math.floor(Math.random() * (max - min + 1) ) + min;

if(n==1){
document.getElementById("demo2").innerHTML = "Stone";
document.getElementById("demo3").innerHTML = "Won";
pl=pl+1;
}
else if(n==2){
document.getElementById("demo2").innerHTML = "Paper";
document.getElementById("demo3").innerHTML = "Tie";

}
else if(n==3){
document.getElementById("demo2").innerHTML = "Scissor";
document.getElementById("demo3").innerHTML = "Lost";
cmp=cmp+1;
}

document.getElementById("demo4").innerHTML = ` ${pl}:${cmp} `;
}

function getRndInteger2(min, max) {
let n = Math.floor(Math.random() * (max - min + 1) ) + min;

if(n==1){
document.getElementById("demo2").innerHTML = "Stone";
document.getElementById("demo3").innerHTML = "Lost";
cmp=cmp+1;
}
else if(n==2){
document.getElementById("demo2").innerHTML = "Paper";
document.getElementById("demo3").innerHTML = "Won";
pl=pl+1;
}
else if(n==3){
document.getElementById("demo2").innerHTML = "Scissor";
document.getElementById("demo3").innerHTML = "Tie";
}

document.getElementById("demo4").innerHTML = ` ${pl}:${cmp} `;
}
</script>
</body>
</html>