PH-
Welcome to PHCorner Forums! Sign up for free to unlock full access and exclusive privileges, including:
- Asking questions about computer and mobile issues
- Discovering internet tips for your mobile network and computer
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
🔒 Closed HTML Game (Scoreboard source code)
- Thread starter Petunia08
- Start date
- Status
- Not open for further replies.
live-for-more
Fanatic
may alam ka na sa javascript paps?
what do you mean by javascript paps? mga codes? sorry paps medyo newbie palang kaya wla pko alam ahahhamay alam ka na sa javascript paps?
<!DOCTYPE html>
<html>
<head>
<title>S.O.S Game</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center> <p style="font-size:30px"> SCOREBOARD </center>
<table id="scoreboard" align="center">
<tr>
<td>S</td>
<td width="30"> </td>
<td>O</td>
</tr>
<tr>
<td class="score" id="S">
0
</td>
<td> </td>
<td class="score" id="O">
0
</td>
</tr>
</table>
<style>
*{box-sizing: border-box}
.container{width: 300px;
overflow: hidden;
margin: 50px auto 0 auto;
}
.container span{width: 100%;
display: block;
text-align: center;
font-family: sans-serif;
color: #fff;
font-size: 25px;
background: #6e1f15;
}
.container .box{float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
transition: all .25s ease-in-out;
font-family: sans-serif;
font-size: 85px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.container .box:hover{background: rgba(10,10,10,0.5);
color: #fff
}
button{background: #eb6f59;
color: #fff;
font-weight: bold;
border: 1px black;
cursor: pointer;
width: 200px;
height: 40px;
font-size: 22px;
display: block;
margin: 10px auto}
.win{background: #FF0000; color: #000000}
#scoreboard .score {
text-align: center;
font-size: 30px
}
#scoreboard .score#S {
color: #FF0000;
}
#scoreboard .score#O {
color: #FF0000;
}
</style>
</head>
<body>
<div class="container" id="main">
<span id="turn">Start The Game</span>
<!-- show S or O on div click -->
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
</div>
<!-- Play Again And Reset All Info -->
<button onclick="replay()">Play Again</button>
<script>
var turn = document.getElementById("turn"),
// boxes => all boxes
// S_or_O => to set S or O into the box
boxes = document.querySelectorAll("#main div"), S_or_O = 0;
function selectWinnerBoxes(b1,b2,b3){
b1.classList.add("win");
b2.classList.add("win");
b3.classList.add("win");
turn.innerHTML = b1.innerHTML + " You Won!";
turn.style.fontSize = "40px";
}
function getWinner(){
var box1 = document.getElementById("box1"),
box2 = document.getElementById("box2"),
box3 = document.getElementById("box3"),
box4 = document.getElementById("box4"),
box5 = document.getElementById("box5"),
box6 = document.getElementById("box6"),
box7 = document.getElementById("box7"),
box8 = document.getElementById("box8"),
box9 = document.getElementById("box9");
// get all posibilites
if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
selectWinnerBoxes(box1,box2,box3);
if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
selectWinnerBoxes(box4,box5,box6);
if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
selectWinnerBoxes(box7,box8,box9);
if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
selectWinnerBoxes(box1,box4,box7);
if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
selectWinnerBoxes(box2,box5,box8);
if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
selectWinnerBoxes(box3,box6,box9);
if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
selectWinnerBoxes(box1,box5,box9);
if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
selectWinnerBoxes(box3,box5,box7);
}
// set event onclick
for(var i = 0; i < boxes.length; i++){
boxes.onclick = function(){
// not allow to change the value of the box
if(this.innerHTML !== "S" && this.innerHTML !== "O"){
if(S_or_O%2 === 0){
console.log(S_or_O);
this.innerHTML = "S";
turn.innerHTML = "O Your Turn";
getWinner();
S_or_O += 1;
}else{
console.log(S_or_O);
this.innerHTML = "O";
turn.innerHTML = "S Your Turn";
getWinner();
S_or_O += 1;
}
}
};
function replay(){
for(var i = 0; i < boxes.length; i++){
boxes.classList.remove("win");
boxes.innerHTML = "";
turn.innerHTML = "Start";
turn.style.fontSize = "25px";
}
}
</script>
</body>
</html>
yan yung code ko mga paps meron an scoreboard design kaso hindi ko pa an co-code yung function niya so parang display plang yung scoreboard ko
<html>
<head>
<title>S.O.S Game</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center> <p style="font-size:30px"> SCOREBOARD </center>
<table id="scoreboard" align="center">
<tr>
<td>S</td>
<td width="30"> </td>
<td>O</td>
</tr>
<tr>
<td class="score" id="S">
0
</td>
<td> </td>
<td class="score" id="O">
0
</td>
</tr>
</table>
<style>
*{box-sizing: border-box}
.container{width: 300px;
overflow: hidden;
margin: 50px auto 0 auto;
}
.container span{width: 100%;
display: block;
text-align: center;
font-family: sans-serif;
color: #fff;
font-size: 25px;
background: #6e1f15;
}
.container .box{float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
transition: all .25s ease-in-out;
font-family: sans-serif;
font-size: 85px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.container .box:hover{background: rgba(10,10,10,0.5);
color: #fff
}
button{background: #eb6f59;
color: #fff;
font-weight: bold;
border: 1px black;
cursor: pointer;
width: 200px;
height: 40px;
font-size: 22px;
display: block;
margin: 10px auto}
.win{background: #FF0000; color: #000000}
#scoreboard .score {
text-align: center;
font-size: 30px
}
#scoreboard .score#S {
color: #FF0000;
}
#scoreboard .score#O {
color: #FF0000;
}
</style>
</head>
<body>
<div class="container" id="main">
<span id="turn">Start The Game</span>
<!-- show S or O on div click -->
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
</div>
<!-- Play Again And Reset All Info -->
<button onclick="replay()">Play Again</button>
<script>
var turn = document.getElementById("turn"),
// boxes => all boxes
// S_or_O => to set S or O into the box
boxes = document.querySelectorAll("#main div"), S_or_O = 0;
function selectWinnerBoxes(b1,b2,b3){
b1.classList.add("win");
b2.classList.add("win");
b3.classList.add("win");
turn.innerHTML = b1.innerHTML + " You Won!";
turn.style.fontSize = "40px";
}
function getWinner(){
var box1 = document.getElementById("box1"),
box2 = document.getElementById("box2"),
box3 = document.getElementById("box3"),
box4 = document.getElementById("box4"),
box5 = document.getElementById("box5"),
box6 = document.getElementById("box6"),
box7 = document.getElementById("box7"),
box8 = document.getElementById("box8"),
box9 = document.getElementById("box9");
// get all posibilites
if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
selectWinnerBoxes(box1,box2,box3);
if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
selectWinnerBoxes(box4,box5,box6);
if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
selectWinnerBoxes(box7,box8,box9);
if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
selectWinnerBoxes(box1,box4,box7);
if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
selectWinnerBoxes(box2,box5,box8);
if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
selectWinnerBoxes(box3,box6,box9);
if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
selectWinnerBoxes(box1,box5,box9);
if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
selectWinnerBoxes(box3,box5,box7);
}
// set event onclick
for(var i = 0; i < boxes.length; i++){
boxes.onclick = function(){
// not allow to change the value of the box
if(this.innerHTML !== "S" && this.innerHTML !== "O"){
if(S_or_O%2 === 0){
console.log(S_or_O);
this.innerHTML = "S";
turn.innerHTML = "O Your Turn";
getWinner();
S_or_O += 1;
}else{
console.log(S_or_O);
this.innerHTML = "O";
turn.innerHTML = "S Your Turn";
getWinner();
S_or_O += 1;
}
}
};
function replay(){
for(var i = 0; i < boxes.length; i++){
boxes.classList.remove("win");
boxes.innerHTML = "";
turn.innerHTML = "Start";
turn.style.fontSize = "25px";
}
}
</script>
</body>
</html>
yan yung code ko mga paps meron an scoreboard design kaso hindi ko pa an co-code yung function niya so parang display plang yung scoreboard ko
Heizengberg
Honorary Poster
nice
- Status
- Not open for further replies.
About this Thread
-
4Replies
-
620Views
-
3Participants
Last reply from:
Heizengberg
Heizengberg
New Topics
-
Finished Vibe Coded a webapp, Classic pinoy Ending game NBA/PBA
- Started by kidanoni
- Replies: 0
- 💻 Coding & Programming
-
Asking po for coding about sa 𝚁𝚘𝚋𝚕𝚘𝚡
- Started by Mqnzanal
- Replies: 1
- 💻 Coding & Programming
-
Gpt plus mga idol free
- Started by xander123
- Replies: 1
- 💻 Coding & Programming
-
Thoughts on Claude Code mga Sir???
- Started by spydroid29
- Replies: 1
- 💻 Coding & Programming
-
Survey: Best backend for ESP32 IoT projects
- Started by itsmaxxcz
- Replies: 3
- 💻 Coding & Programming
-
Next.js hosting DMCA ignored?
- Started by nascosto
- Replies: 3
- 💻 Coding & Programming
Trending Topics
-
-
-
Sofia + Luhn algorithm for Spotify Trial Python Code Version Valid IMEI 2026
- PHC-PROXYPIRATE
Replies: 52 -
-
-
-
-
-
Online now
- Members online
- 1,106
- Guests online
- 2,129
- Total visitors
- 3,235