Skip to content

Instantly share code, notes, and snippets.

@choopi24
Created February 1, 2018 07:24
Show Gist options
  • Save choopi24/4bdb7ecd76b4ba3eac5aea2007d0dbfe to your computer and use it in GitHub Desktop.
Save choopi24/4bdb7ecd76b4ba3eac5aea2007d0dbfe to your computer and use it in GitHub Desktop.
<html>
<head>
<script>
alert("Welcome");
//var Buttons = document.getElementsByTagName("button");
//for (var i = 0; i < buttons.length; i++) {
// alert(buttons[i].id);
//}
var Turn = 2;
//function funrun() {
//alert("Welcome");
//var x = document.getElementsByClassName("st");
// x[0].innerHTML = "Hello";
// document.getElementsByClassName('st')[0].id = "Right";
// var y = document.getElementById("Right").id;
// window.alert(document.getElementById(y));
//}
//
//function MyTurn(){
var x , y;
function Play(x, y){
switch (x){
case 1:{
switch (y){
//case 1-1
case 1:
if(document.getElementById("1r-1c").className == 'button-color'){break;}
if(document.getElementById("1r-1c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-1c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-1c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 1-2
case 2:
if(document.getElementById("1r-2c").className == 'button-color'){break;}
if(document.getElementById("1r-2c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-2c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-2c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 1-3
case 3:
if(document.getElementById("1r-3c").className == 'button-color'){break;}
if(document.getElementById("1r-3c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-3c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-3c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 1-4
case 4:
if(document.getElementById("1r-4c").className == 'button-color'){break;}
if(document.getElementById("1r-4c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-4c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-4c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 1-5
case 5:
if(document.getElementById("1r-5c").className == 'button-color'){break;}
if(document.getElementById("1r-5c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-5c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-5c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 1-6
case 6:
if(document.getElementById("1r-6c").className == 'button-color'){break;}
if(document.getElementById("1r-6c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-6c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-6c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 1-7
case 7:
if(document.getElementById("1r-7c").className == 'button-color'){break;}
if(document.getElementById("1r-7c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("1r-7c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("1r-7c").className = 'button_color';
Turn = Turn + 1;
break;
}
default:
alert("Error");
}
}
break;
case 2:{
switch (y){
//case 2-1
case 1:
if(document.getElementById("2r-1c").className == 'button-color'){break;}
if(document.getElementById("2r-1c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-1c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-1c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 2-2
case 2:
if(document.getElementById("2r-2c").className == 'button-color'){break;}
if(document.getElementById("2r-2c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-2c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-2c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 2-3
case 3:
if(document.getElementById("2r-3c").className == 'button-color'){break;}
if(document.getElementById("2r-3c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-3c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-3c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 2-4
case 4:
if(document.getElementById("2r-4c").className == 'button-color'){break;}
if(document.getElementById("2r-4c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-4c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-4c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 2-5
case 5:
if(document.getElementById("2r-5c").className == 'button-color'){break;}
if(document.getElementById("2r-5c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-5c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-5c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 2-6
case 6:
if(document.getElementById("2r-6c").className == 'button-color'){break;}
if(document.getElementById("2r-6c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-6c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-6c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 2-7
case 7:
if(document.getElementById("2r-7c").className == 'button-color'){break;}
if(document.getElementById("2r-7c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("2r-7c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("2r-7c").className = 'button_color';
Turn = Turn + 1;
break;
}
default:
alert("Error");
}
}
break;
case 3:{
switch (y){
//case 3-1
case 1:
if(document.getElementById("3r-1c").className == 'button-color'){break;}
if(document.getElementById("3r-1c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-1c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-1c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 3-2
case 2:
if(document.getElementById("3r-2c").className == 'button-color'){break;}
if(document.getElementById("3r-2c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-2c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-2c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 3-3
case 3:
if(document.getElementById("3r-3c").className == 'button-color'){break;}
if(document.getElementById("3r-3c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-3c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-3c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 3-4
case 4:
if(document.getElementById("3r-4c").className == 'button-color'){break;}
if(document.getElementById("3r-4c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-4c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-4c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 3-5
case 5:
if(document.getElementById("3r-5c").className == 'button-color'){break;}
if(document.getElementById("3r-5c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-5c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-5c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 3-6
case 6:
if(document.getElementById("3r-6c").className == 'button-color'){break;}
if(document.getElementById("3r-6c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-6c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-6c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 3-7
case 7:
if(document.getElementById("3r-7c").className == 'button-color'){break;}
if(document.getElementById("3r-7c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("3r-7c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("3r-7c").className = 'button_color';
Turn = Turn + 1;
break;
}
default:
alert("Error");
}
}
break;
case 4:{
switch (y){
//case 4-1
case 1:
if(document.getElementById("4r-1c").className == 'button-color'){break;}
if(document.getElementById("4r-1c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-1c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-1c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 4-2
case 2:
if(document.getElementById("4r-2c").className == 'button-color'){break;}
if(document.getElementById("4r-2c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-2c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-2c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 4-3
case 3:
if(document.getElementById("4r-3c").className == 'button-color'){break;}
if(document.getElementById("4r-3c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-3c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-3c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 4-4
case 4:
if(document.getElementById("4r-4c").className == 'button-color'){break;}
if(document.getElementById("4r-4c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-4c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-4c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 4-5
case 5:
if(document.getElementById("4r-5c").className == 'button-color'){break;}
if(document.getElementById("4r-5c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-5c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-5c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 4-6
case 6:
if(document.getElementById("4r-6c").className == 'button-color'){break;}
if(document.getElementById("4r-6c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-6c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-6c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 4-7
case 7:
if(document.getElementById("4r-7c").className == 'button-color'){break;}
if(document.getElementById("4r-7c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("4r-7c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("4r-7c").className = 'button_color';
Turn = Turn + 1;
break;
}
default:
alert("Error");
}
}
break;
case 5:{
switch (y){
//case 5-1
case 1:
if(document.getElementById("5r-1c").className == 'button-color'){break;}
if(document.getElementById("5r-1c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-1c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-1c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 5-2
case 2:
if(document.getElementById("5r-2c").className == 'button-color'){break;}
if(document.getElementById("5r-2c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-2c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-2c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 5-3
case 3:
if(document.getElementById("5r-3c").className == 'button-color'){break;}
if(document.getElementById("5r-3c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-3c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-3c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 5-4
case 4:
if(document.getElementById("5r-4c").className == 'button-color'){break;}
if(document.getElementById("5r-4c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-4c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-4c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 5-5
case 5:
if(document.getElementById("5r-5c").className == 'button-color'){break;}
if(document.getElementById("5r-5c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-5c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-5c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 5-6
case 6:
if(document.getElementById("5r-6c").className == 'button-color'){break;}
if(document.getElementById("5r-6c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-6c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-6c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 5-7
case 7:
if(document.getElementById("5r-7c").className == 'button-color'){break;}
if(document.getElementById("5r-7c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("5r-7c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("5r-7c").className = 'button_color';
Turn = Turn + 1;
break;
}
default:
alert("Error");
}
}
break;
case 6:{
switch (y){
//case 6-1
case 1:
if(document.getElementById("6r-1c").className == 'button-color'){break;}
if(document.getElementById("6r-1c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-1c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-1c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 6-2
case 2:
if(document.getElementById("2r-2c").className == 'button-color'){break;}
if(document.getElementById("6r-2c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-2c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-2c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 6-3
case 3:
if(document.getElementById("6r-3c").className == 'button-color'){break;}
if(document.getElementById("6r-3c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-3c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-3c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 6-4
case 4:
if(document.getElementById("6r-4c").className == 'button-color'){break;}
if(document.getElementById("6r-4c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-4c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-4c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 6-5
case 5:
if(document.getElementById("6r-5c").className == 'button-color'){break;}
if(document.getElementById("6r-5c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-5c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-5c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 6-6
case 6:
if(document.getElementById("6r-6c").className == 'button-color'){break;}
if(document.getElementById("6r-6c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-6c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-6c").className = 'button_color';
Turn = Turn + 1;
break;
}
//case 6-7
case 7:
if(document.getElementById("6r-7c").className == 'button-color'){break;}
if(document.getElementById("6r-7c").className == 'button_color'){break;}
if (Turn%2 == 0){
document.getElementById("6r-7c").className = 'button-color';
Turn = Turn + 1;
break;
}
else{
document.getElementById("6r-7c").className = 'button_color';
Turn = Turn + 1;
break;
}
default:
alert("Error");
}
}
break;
default:
alert("Error1");
}
}
//document.getElementById().className = 'button-color';
</script>
<style>
body{
background-color: aquamarine;
}
button{
border:1px solid black;
display:block;
background-color: beige;
padding: 25px;
width: 25px;
height: 25px;
position: absolute;
}
</style>
</head>
<body>
<form>
Enter Your Name: <input type="text"> </input>
<input type="submit"> </input>
</form>
<br><br><br><br><hr>
<!-- 1st row -->
<button type="button" id="1r-1c" class="st" style="top:155;left:600;" onclick="Play(1,1)"> </button>
<button type="button" id="1r-2c" class="st" style="top:155;left:680;" onclick="Play(1,2)"> </button>
<button type="button" id="1r-3c" class="st" style="top:155;left:760;" onclick="Play(1,3)"> </button>
<button type="button" id="1r-4c" class="st" style="top:155;left:840;" onclick="Play(1,4)"> </button>
<button type="button" id="1r-5c" class="st" style="top:155;left:920;" onclick="Play(1,5)"> </button>
<button type="button" id="1r-6c" class="st" style="top:155;left:1000;" onclick="Play(1,6)"> </button>
<button type="button" id="1r-7c" class="st" style="top:155;left:1080;" onclick="Play(1,7)"> </button>
<!-- 2nd row -->
<button type="button" id="2r-1c" class="st" style="top:235;left:600;" onclick="Play(2,1)"> </button>
<button type="button" id="2r-2c" class="st" style="top:235;left:680;" onclick="Play(2,2)"> </button>
<button type="button" id="2r-3c" class="st" style="top:235;left:760;" onclick="Play(2,3)"> </button>
<button type="button" id="2r-4c" class="st" style="top:235;left:840;" onclick="Play(2,4)"> </button>
<button type="button" id="2r-5c" class="st" style="top:235;left:920;" onclick="Play(2,5)"> </button>
<button type="button" id="2r-6c" class="st" style="top:235;left:1000;" onclick="Play(2,6)"> </button>
<button type="button" id="2r-7c" class="st" style="top:235;left:1080;" onclick="Play(2,7)"> </button>
<!-- 3rd row -->
<button type="button" id="3r-1c" class="st" style="top:315;left:600;" onclick="Play(3,1)"> </button>
<button type="button" id="3r-2c" class="st" style="top:315;left:680;" onclick="Play(3,2)"> </button>
<button type="button" id="3r-3c" class="st" style="top:315;left:760;" onclick="Play(3,3)"> </button>
<button type="button" id="3r-4c" class="st" style="top:315;left:840;" onclick="Play(3,4)"> </button>
<button type="button" id="3r-5c" class="st" style="top:315;left:920;" onclick="Play(3,5)"> </button>
<button type="button" id="3r-6c" class="st" style="top:315;left:1000;" onclick="Play(3,6)"> </button>
<button type="button" id="3r-7c" class="st" style="top:315;left:1080;" onclick="Play(3,7)"> </button>
<!-- 4th row -->
<button type="button" id="4r-1c" class="st" style="top:395;left:600;" onclick="Play(4,1)"> </button>
<button type="button" id="4r-2c" class="st" style="top:395;left:680;" onclick="Play(4,2)"> </button>
<button type="button" id="4r-3c" class="st" style="top:395;left:760;" onclick="Play(4,3)"> </button>
<button type="button" id="4r-4c" class="st" style="top:395;left:840;" onclick="Play(4,4)"> </button>
<button type="button" id="4r-5c" class="st" style="top:395;left:920;" onclick="Play(4,5)"> </button>
<button type="button" id="4r-6c" class="st" style="top:395;left:1000;" onclick="Play(4,6)"> </button>
<button type="button" id="4r-7c" class="st" style="top:395;left:1080;" onclick="Play(4,7)"> </button>
<!-- 5th row -->
<button type="button" id="5r-1c" class="st" style="top:475;left:600;" onclick="Play(5,1)"> </button>
<button type="button" id="5r-2c" class="st" style="top:475;left:680;" onclick="Play(5,2)"> </button>
<button type="button" id="5r-3c" class="st" style="top:475;left:760;" onclick="Play(5,3)"> </button>
<button type="button" id="5r-4c" class="st" style="top:475;left:840;" onclick="Play(5,4)"> </button>
<button type="button" id="5r-5c" class="st" style="top:475;left:920;" onclick="Play(5,5)"> </button>
<button type="button" id="5r-6c" class="st" style="top:475;left:1000;" onclick="Play(5,6)"> </button>
<button type="button" id="5r-7c" class="st" style="top:475;left:1080;" onclick="Play(5,7)"> </button>
<!-- 6th row -->
<button type="button" id="6r-1c" class="st" style="top:555;left:600;" onclick="Play(6,1)"> </button>
<button type="button" id="6r-2c" class="st" style="top:555;left:680;" onclick="Play(6,2)"> </button>
<button type="button" id="6r-3c" class="st" style="top:555;left:760;" onclick="Play(6,3)"> </button>
<button type="button" id="6r-4c" class="st" style="top:555;left:840;" onclick="Play(6,4)"> </button>
<button type="button" id="6r-5c" class="st" style="top:555;left:920;" onclick="Play(6,5)"> </button>
<button type="button" id="6r-6c" class="st" style="top:555;left:1000;" onclick="Play(6,6)"> </button>
<button type="button" id="6r-7c" class="st" style="top:555;left:1080;" onclick="Play(6,7)"> </button>
<style>
button.button-color {
background-color:red;
border:1px solid black;
padding: 25px;
width: 25px;
height: 25px;
position: absolute;
}
button.button_color {
background-color:black;
border:1px solid black;
padding: 25px;
width: 25px;
height: 25px;
position: absolute;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment