mga paps patulong naman paano mag implement or mag code ng scoreboard? may game kasi ako na kinuha yung tic tac toe na game sa google kaso wala siyang scoreboard so ang gusto ko sana is dag dagan ng scoreboard ung game para hindi masyado lame ung game. Thanks sa sasagot!
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.
HTML Game (Scoreboard source code)
- Thread starter Petunia08
- Start date
live-for-more
Honorary Poster
may alam ka na sa javascript paps?
- TS TS
- #3
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?
- TS TS
- #4
<!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
Eternal Poster
nice
Similar threads
-
-
Tutorial Installing mobox wine for emulating pc games on android
- Started by kruizer
- Replies: 1
-
-
V
Popular Tags
android
api
app
arduino
bot
c
c++
capstone
capstone project
code
coding
coding and programming
css
database
developer
development
help
how
how to
html
in
java
javascript
language
laravel
mag
mysql
need
patulong
php
program
programmer
programming
programming language
project
python
question
react
script
sql
system
thesis
tutorial
udemy
vb.net
visual basic
web
web development
website
with
About this Thread
-
4Replies
-
405Views
-
3Participants
Last reply from:
Heizengberg
Heizengberg
Online statistics
- Members online
- 1,127
- Guests online
- 5,100
- Total visitors
- 6,227