Skip to content

Instantly share code, notes, and snippets.

@choopi24

choopi24/FourInRow Half Finished

Created February 4, 2018 14:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save choopi24/929f6f92f737ca917f2f3f51b25bb723 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save choopi24/929f6f92f737ca917f2f3f51b25bb723 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
FourInRow Half Finished
<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));
//}
//if (x == 10 && y == 10){throw '';}
//
//function MyTurn(){
var x , y , color , Row , Column;
var Board = new Array(6);
for (var i=0;i<6;i++){
Board[i] = new Array(7);
}
for (var i=0;i<6;i++){
for (var j =0;j<7;j++){
Board[i][j]="White";
}
var TERMINATE;
var z;
}
function start(x,y){
if (TERMINATE == 666){throw ''}
TERMINATE = Play(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;}
z = CheckMate(1,1);
if (Turn%2 == 0){
document.getElementById("1r-1c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-1c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 1-2
case 2:
if(document.getElementById("1r-2c").className == 'button-color'){break;}
if(document.getElementById("1r-2c").className == 'button_color'){break;}
z = CheckMate(1,2);
if (Turn%2 == 0){
document.getElementById("1r-2c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-2c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 1-3
case 3:
if(document.getElementById("1r-3c").className == 'button-color'){break;}
if(document.getElementById("1r-3c").className == 'button_color'){break;}
z = CheckMate(1,3);
if (Turn%2 == 0){
document.getElementById("1r-3c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-3c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 1-4
case 4:
if(document.getElementById("1r-4c").className == 'button-color'){break;}
if(document.getElementById("1r-4c").className == 'button_color'){break;}
z = CheckMate(1,4);
if (Turn%2 == 0){
document.getElementById("1r-4c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-4c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 1-5
case 5:
if(document.getElementById("1r-5c").className == 'button-color'){break;}
if(document.getElementById("1r-5c").className == 'button_color'){break;}
z = CheckMate(1,5);
if (Turn%2 == 0){
document.getElementById("1r-5c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-5c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 1-6
case 6:
if(document.getElementById("1r-6c").className == 'button-color'){break;}
if(document.getElementById("1r-6c").className == 'button_color'){break;}
z = CheckMate(1,6);
if (Turn%2 == 0){
document.getElementById("1r-6c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-6c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 1-7
case 7:
if(document.getElementById("1r-7c").className == 'button-color'){break;}
if(document.getElementById("1r-7c").className == 'button_color'){break;}
z = CheckMate(1,7);
if (Turn%2 == 0){
document.getElementById("1r-7c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("1r-7c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
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;}
z = CheckMate(2,1);
if (Turn%2 == 0){
document.getElementById("2r-1c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-1c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 2-2
case 2:
if(document.getElementById("2r-2c").className == 'button-color'){break;}
if(document.getElementById("2r-2c").className == 'button_color'){break;}
z = CheckMate(2,2);
if (Turn%2 == 0){
document.getElementById("2r-2c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-2c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 2-3
case 3:
if(document.getElementById("2r-3c").className == 'button-color'){break;}
if(document.getElementById("2r-3c").className == 'button_color'){break;}
z = CheckMate(2,3);
if (Turn%2 == 0){
document.getElementById("2r-3c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-3c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 2-4
case 4:
if(document.getElementById("2r-4c").className == 'button-color'){break;}
if(document.getElementById("2r-4c").className == 'button_color'){break;}
z = CheckMate(2,4);
if (Turn%2 == 0){
document.getElementById("2r-4c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-4c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 2-5
case 5:
if(document.getElementById("2r-5c").className == 'button-color'){break;}
if(document.getElementById("2r-5c").className == 'button_color'){break;}
z = CheckMate(2,5);
if (Turn%2 == 0){
document.getElementById("2r-5c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-5c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 2-6
case 6:
if(document.getElementById("2r-6c").className == 'button-color'){break;}
if(document.getElementById("2r-6c").className == 'button_color'){break;}
z = CheckMate(2,6);
if (Turn%2 == 0){
document.getElementById("2r-6c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-6c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 2-7
case 7:
if(document.getElementById("2r-7c").className == 'button-color'){break;}
if(document.getElementById("2r-7c").className == 'button_color'){break;}
z = CheckMate(2,7);
if (Turn%2 == 0){
document.getElementById("2r-7c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("2r-7c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
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;}
z = CheckMate(3,1);
if (Turn%2 == 0){
document.getElementById("3r-1c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-1c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 3-2
case 2:
if(document.getElementById("3r-2c").className == 'button-color'){break;}
if(document.getElementById("3r-2c").className == 'button_color'){break;}
z = CheckMate(3,2);
if (Turn%2 == 0){
document.getElementById("3r-2c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-2c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 3-3
case 3:
if(document.getElementById("3r-3c").className == 'button-color'){break;}
if(document.getElementById("3r-3c").className == 'button_color'){break;}
z = CheckMate(3,3);
if (Turn%2 == 0){
document.getElementById("3r-3c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-3c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 3-4
case 4:
if(document.getElementById("3r-4c").className == 'button-color'){break;}
if(document.getElementById("3r-4c").className == 'button_color'){break;}
z = CheckMate(3,4);
if (Turn%2 == 0){
document.getElementById("3r-4c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-4c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 3-5
case 5:
if(document.getElementById("3r-5c").className == 'button-color'){break;}
if(document.getElementById("3r-5c").className == 'button_color'){break;}
z = CheckMate(3,5);
if (Turn%2 == 0){
document.getElementById("3r-5c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-5c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 3-6
case 6:
if(document.getElementById("3r-6c").className == 'button-color'){break;}
if(document.getElementById("3r-6c").className == 'button_color'){break;}
z = CheckMate(3,6);
if (Turn%2 == 0){
document.getElementById("3r-6c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-6c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 3-7
case 7:
if(document.getElementById("3r-7c").className == 'button-color'){break;}
if(document.getElementById("3r-7c").className == 'button_color'){break;}
z = CheckMate(3,7);
if (Turn%2 == 0){
document.getElementById("3r-7c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("3r-7c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
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;}
z = CheckMate(4,1);
if (Turn%2 == 0){
document.getElementById("4r-1c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-1c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 4-2
case 2:
if(document.getElementById("4r-2c").className == 'button-color'){break;}
if(document.getElementById("4r-2c").className == 'button_color'){break;}
z = CheckMate(4,2);
if (Turn%2 == 0){
document.getElementById("4r-2c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-2c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 4-3
case 3:
if(document.getElementById("4r-3c").className == 'button-color'){break;}
if(document.getElementById("4r-3c").className == 'button_color'){break;}
z = CheckMate(4,3);
if (Turn%2 == 0){
document.getElementById("4r-3c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-3c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 4-4
case 4:
if(document.getElementById("4r-4c").className == 'button-color'){break;}
if(document.getElementById("4r-4c").className == 'button_color'){break;}
z = CheckMate(4,4);
if (Turn%2 == 0){
document.getElementById("4r-4c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-4c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 4-5
case 5:
if(document.getElementById("4r-5c").className == 'button-color'){break;}
if(document.getElementById("4r-5c").className == 'button_color'){break;}
z = CheckMate(4,5);
if (Turn%2 == 0){
document.getElementById("4r-5c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-5c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 4-6
case 6:
if(document.getElementById("4r-6c").className == 'button-color'){break;}
if(document.getElementById("4r-6c").className == 'button_color'){break;}
z = CheckMate(4,6);
if (Turn%2 == 0){
document.getElementById("4r-6c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-6c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 4-7
case 7:
if(document.getElementById("4r-7c").className == 'button-color'){break;}
if(document.getElementById("4r-7c").className == 'button_color'){break;}
z = CheckMate(4,7);
if (Turn%2 == 0){
document.getElementById("4r-7c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("4r-7c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
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;}
z = CheckMate(5,1);
if (Turn%2 == 0){
document.getElementById("5r-1c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-1c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 5-2
case 2:
if(document.getElementById("5r-2c").className == 'button-color'){break;}
if(document.getElementById("5r-2c").className == 'button_color'){break;}
z = CheckMate(5,2);
if (Turn%2 == 0){
document.getElementById("5r-2c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-2c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 5-3
case 3:
if(document.getElementById("5r-3c").className == 'button-color'){break;}
if(document.getElementById("5r-3c").className == 'button_color'){break;}
z = CheckMate(5,3);
if (Turn%2 == 0){
document.getElementById("5r-3c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-3c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 5-4
case 4:
if(document.getElementById("5r-4c").className == 'button-color'){break;}
if(document.getElementById("5r-4c").className == 'button_color'){break;}
z = CheckMate(5,4);
if (Turn%2 == 0){
document.getElementById("5r-4c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-4c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 5-5
case 5:
if(document.getElementById("5r-5c").className == 'button-color'){break;}
if(document.getElementById("5r-5c").className == 'button_color'){break;}
z = CheckMate(5,5);
if (Turn%2 == 0){
document.getElementById("5r-5c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-5c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 5-6
case 6:
if(document.getElementById("5r-6c").className == 'button-color'){break;}
if(document.getElementById("5r-6c").className == 'button_color'){break;}
z = CheckMate(5,6);
if (Turn%2 == 0){
document.getElementById("5r-6c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-6c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 5-7
case 7:
if(document.getElementById("5r-7c").className == 'button-color'){break;}
if(document.getElementById("5r-7c").className == 'button_color'){break;}
z = CheckMate(5,7);
if (Turn%2 == 0){
document.getElementById("5r-7c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("5r-7c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
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;}
z = CheckMate(6,1);
if (Turn%2 == 0){
document.getElementById("6r-1c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-1c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 6-2
case 2:
if(document.getElementById("6r-2c").className == 'button-color'){break;}
if(document.getElementById("6r-2c").className == 'button_color'){break;}
z = CheckMate(6,2);
if (Turn%2 == 0){
document.getElementById("6r-2c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-2c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 6-3
case 3:
if(document.getElementById("6r-3c").className == 'button-color'){break;}
if(document.getElementById("6r-3c").className == 'button_color'){break;}
z = CheckMate(6,3);
if (Turn%2 == 0){
document.getElementById("6r-3c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-3c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 6-4
case 4:
if(document.getElementById("6r-4c").className == 'button-color'){break;}
if(document.getElementById("6r-4c").className == 'button_color'){break;}
z = CheckMate(6,4);
if (Turn%2 == 0){
document.getElementById("6r-4c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-4c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 6-5
case 5:
if(document.getElementById("6r-5c").className == 'button-color'){break;}
if(document.getElementById("6r-5c").className == 'button_color'){break;}
z = CheckMate(6,5);
if (Turn%2 == 0){
document.getElementById("6r-5c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-5c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 6-6
case 6:
if(document.getElementById("6r-6c").className == 'button-color'){break;}
if(document.getElementById("6r-6c").className == 'button_color'){break;}
z = CheckMate(6,6);
if (Turn%2 == 0){
document.getElementById("6r-6c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-6c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
//case 6-7
case 7:
if(document.getElementById("6r-7c").className == 'button-color'){break;}
if(document.getElementById("6r-7c").className == 'button_color'){break;}
z = CheckMate(6,7);
if (Turn%2 == 0){
document.getElementById("6r-7c").className = 'button-color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
else{
document.getElementById("6r-7c").className = 'button_color';
Turn = Turn + 1;
if (z == 5){return 666;}
break;
}
default:
alert("Error");
}
}
break;
default:
alert("Error1");
}
}
function CheckMate(Row,Column)
{
Row -=1;
Column -=1;
//window.alert("function work");
var RED = 0 , BLACK = 0;
if( Turn % 2 == 0)
{
//window.alert("inside if");
Board[Row][Column]= "Red";
}
else
{
//window.alert("inside else");
Board[Row][Column] = "Black";
}
//window.alert("before loops");
//Check Columns Loop
for(var i=0;i<7;i++){
//alert ("1st loop");
if(Board[Row][i] == "Red")
{
RED++;
//alert ("RED++ column");
}
if(Board[Row][i] == "Black")
{
BLACK++;
//alert ("BLACK++ column");
}
if(BLACK == 4){
alert("Black Won");
return 5;
}
if(RED == 4){
alert("Red Won");
return 5;
}
}
var RED = 0 , BLACK = 0;
//Check Rows Loop
for(var i=0;i<6;i++){
//alert ("2nd loop")
if(Board[i][Column] == "Red")
{
RED++;
//alert ("RED++ row");
}
if(Board[i][Column] == "Black")
{
BLACK++;
//alert ("BLACK++ row");
}
if(BLACK == 4){
alert("Black Won");
return 5;
}
if(RED == 4){
alert("Red Won");
return 5;
}
}
}
</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="start(1,1)"> </button>
<button type="button" id="1r-2c" class="st" style="top:155;left:680;" onclick="start(1,2)"> </button>
<button type="button" id="1r-3c" class="st" style="top:155;left:760;" onclick="start(1,3)"> </button>
<button type="button" id="1r-4c" class="st" style="top:155;left:840;" onclick="start(1,4)"> </button>
<button type="button" id="1r-5c" class="st" style="top:155;left:920;" onclick="start(1,5)"> </button>
<button type="button" id="1r-6c" class="st" style="top:155;left:1000;" onclick="start(1,6)"> </button>
<button type="button" id="1r-7c" class="st" style="top:155;left:1080;" onclick="start(1,7)"> </button>
<!-- 2nd row -->
<button type="button" id="2r-1c" class="st" style="top:235;left:600;" onclick="start(2,1)"> </button>
<button type="button" id="2r-2c" class="st" style="top:235;left:680;" onclick="start(2,2)"> </button>
<button type="button" id="2r-3c" class="st" style="top:235;left:760;" onclick="start(2,3)"> </button>
<button type="button" id="2r-4c" class="st" style="top:235;left:840;" onclick="start(2,4)"> </button>
<button type="button" id="2r-5c" class="st" style="top:235;left:920;" onclick="start(2,5)"> </button>
<button type="button" id="2r-6c" class="st" style="top:235;left:1000;" onclick="start(2,6)"> </button>
<button type="button" id="2r-7c" class="st" style="top:235;left:1080;" onclick="start(2,7)"> </button>
<!-- 3rd row -->
<button type="button" id="3r-1c" class="st" style="top:315;left:600;" onclick="start(3,1)"> </button>
<button type="button" id="3r-2c" class="st" style="top:315;left:680;" onclick="start(3,2)"> </button>
<button type="button" id="3r-3c" class="st" style="top:315;left:760;" onclick="start(3,3)"> </button>
<button type="button" id="3r-4c" class="st" style="top:315;left:840;" onclick="start(3,4)"> </button>
<button type="button" id="3r-5c" class="st" style="top:315;left:920;" onclick="start(3,5)"> </button>
<button type="button" id="3r-6c" class="st" style="top:315;left:1000;" onclick="start(3,6)"> </button>
<button type="button" id="3r-7c" class="st" style="top:315;left:1080;" onclick="start(3,7)"> </button>
<!-- 4th row -->
<button type="button" id="4r-1c" class="st" style="top:395;left:600;" onclick="start(4,1)"> </button>
<button type="button" id="4r-2c" class="st" style="top:395;left:680;" onclick="start(4,2)"> </button>
<button type="button" id="4r-3c" class="st" style="top:395;left:760;" onclick="start(4,3)"> </button>
<button type="button" id="4r-4c" class="st" style="top:395;left:840;" onclick="start(4,4)"> </button>
<button type="button" id="4r-5c" class="st" style="top:395;left:920;" onclick="start(4,5)"> </button>
<button type="button" id="4r-6c" class="st" style="top:395;left:1000;" onclick="start(4,6)"> </button>
<button type="button" id="4r-7c" class="st" style="top:395;left:1080;" onclick="start(4,7)"> </button>
<!-- 5th row -->
<button type="button" id="5r-1c" class="st" style="top:475;left:600;" onclick="start(5,1)"> </button>
<button type="button" id="5r-2c" class="st" style="top:475;left:680;" onclick="start(5,2)"> </button>
<button type="button" id="5r-3c" class="st" style="top:475;left:760;" onclick="start(5,3)"> </button>
<button type="button" id="5r-4c" class="st" style="top:475;left:840;" onclick="start(5,4)"> </button>
<button type="button" id="5r-5c" class="st" style="top:475;left:920;" onclick="start(5,5)"> </button>
<button type="button" id="5r-6c" class="st" style="top:475;left:1000;" onclick="start(5,6)"> </button>
<button type="button" id="5r-7c" class="st" style="top:475;left:1080;" onclick="start(5,7)"> </button>
<!-- 6th row -->
<button type="button" id="6r-1c" class="st" style="top:555;left:600;" onclick="start(6,1)"> </button>
<button type="button" id="6r-2c" class="st" style="top:555;left:680;" onclick="start(6,2)"> </button>
<button type="button" id="6r-3c" class="st" style="top:555;left:760;" onclick="start(6,3)"> </button>
<button type="button" id="6r-4c" class="st" style="top:555;left:840;" onclick="start(6,4)"> </button>
<button type="button" id="6r-5c" class="st" style="top:555;left:920;" onclick="start(6,5)"> </button>
<button type="button" id="6r-6c" class="st" style="top:555;left:1000;" onclick="start(6,6)"> </button>
<button type="button" id="6r-7c" class="st" style="top:555;left:1080;" onclick="start(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