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.
Similar threads
-
-
🏷️ For Sale [SALE] CC Gen Source Code Ko | Luhn-Valid | May BINs Na
- Started by pinoyakogago
- Replies: 0
About this Thread
-
4Replies
-
643Views
-
3Participants
Last reply from:
Heizengberg
Heizengberg
New Topics
-
-
SIM CARD CHECKER
- Started by HiroshiKim
- Replies: 11
- 💻 Coding & Programming
-
How to Redeem Your 1 Billion Tokens in Muse AI
- Started by Keinz
- Replies: 1
- 💻 Coding & Programming
-
CODING AI Is FREE on Cline Desktop ( LIMITED TIME )
- Started by Keinz
- Replies: 0
- 💻 Coding & Programming
-
Scan and fix compromised wordpress website
- Started by caredebs
- Replies: 0
- 💻 Coding & Programming
-
Zefame Free Service Automated
- Started by mtplay
- Replies: 2
- 💻 Coding & Programming
-
Newbie Coding/Programming Question.
- Started by zhaenarez25
- Replies: 10
- 💻 Coding & Programming
-
Cαиνα TEAMS LINK
- Started by Keinz
- Replies: 2
- 💻 Coding & Programming
-
Spotify 3M Redeem Links
- Started by Keinz
- Replies: 4
- 💻 Coding & Programming
Trending Topics
Online now
- Members online
- 1,117
- Guests online
- 2,374
- Total visitors
- 3,491