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
-
638Views
-
3Participants
Last reply from:
Heizengberg
Heizengberg
New Topics
-
Pa guide po gusto ko po maging Web Developer/programmer
- Started by Kurama13
- Replies: 5
- 💻 Coding & Programming
-
Genp v3.8.0 for A...do.....be
- Started by maxae
- Replies: 0
- 💻 Coding & Programming
-
Guide naman po dyan ng Python para sa mga beginner na kagaya ko po
- Started by leocel
- Replies: 1
- 💻 Coding & Programming
-
Diagram Design editorial Claude Code diagrams, no Mermaid-slop
- Started by 0x9d38
- Replies: 0
- 💻 Coding & Programming
-
Building an spoofer
- Started by cain1718
- Replies: 0
- 💻 Coding & Programming
-
Free POS Web System For all small stores, etc
- Started by phcodesage
- Replies: 0
- 💻 Coding & Programming
-
Embed src Adblocker?
- Started by nascosto
- Replies: 0
- 💻 Coding & Programming
-
AI-Assisted Coding? Try Starting With Free HTML/CSS Templates
- Started by Newbiee
- Replies: 2
- 💻 Coding & Programming
-
Kung AWS developer ka, may bagong tool na worth checking out.
- Started by KumaKuma
- Replies: 1
- 💻 Coding & Programming
Trending Topics
Online now
- Members online
- 472
- Guests online
- 3,053
- Total visitors
- 3,525