<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<style>
.humanChoice{background-image:linear-gradient(to bottom,lightgray,white);}
.humanChoice:click{background-image:linear-gradient(to bottom,white,cyan);}
</style>
<body onload='generateBoard();'>
<div id='winner' style='text-align:center;font:35px Calibri;padding:30px;'></div>
<div id='board'></div>
</body>
<script>
var placeHolder="<span style='color:rgba(0,0,0,0);'>👤</span>";
var computerPositionToPlay=-1;
var rows=[];
rows[0]=[0,0,0,0,0,0,0];
rows[1]=[0,0,0,0,0,0,0];
rows[2]=[0,0,0,0,0,0,0];
rows[3] =[0,0,0,0,0,0,0];
rows[4] =[0,0,0,0,0,0,0];
rows[5] =[0,0,0,0,0,0,0];
function generateBoard(){
var boardUiAsString="<div style='width:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:auto auto auto auto auto auto auto'>";
for(var y=0;y<6;y++){
for(var x=0;x<7;x++){
if(y==0){boardUiAsString=boardUiAsString+"<div id='"+y+"-"+x+"' onclick=setHumanChoice('"+y+"','"+x+"') class='humanChoice' style='padding:10px;margin:2px;border-radius:3px;color:rgb(120,120,120,0.5);text-align:center;cursor:pointer;height:auto;'>"+placeHolder+"</div>";}else{
boardUiAsString=boardUiAsString+"<div id='"+y+"-"+x+"' style='padding:10px;margin:2px;border-radius:3px;color:rgb(120,120,120,0.5);text-align:center;background-image:linear-gradient(to bottom,lightgray,white);'>"+placeHolder+"</div>";}
}}
boardUiAsString=boardUiAsString+"</div>";
document.getElementById('board').innerHTML=boardUiAsString;
}
var showComment=false;
var buttonJustPressed=false;
function setHumanChoice(y,x){
if(!buttonJustPressed){
buttonJustPressed=true;
setTimeout(function(){buttonJustPressed=false;},500);
if(document.getElementById('winner').innerHTML==''){
document.getElementById('winner').innerHTML='';
if(rows[0][x]==0){
document.getElementById(y+'-'+x).style.backgroundImage="linear-gradient(to bottom,white,cyan)";
document.getElementById(y+'-'+x).innerHTML='👤';
var lowestEmptySlot=0;
for(var i=0;i<6;i++){
if(rows[i][x]!=0){
break;}else{
lowestEmptySlot=i;}
}
if(showComment){console.log('human',x,lowestEmptySlot);}
rows[lowestEmptySlot][x]=1;
if(lowestEmptySlot!=0){
setTimeout(function(){drop(parseInt(y),x,1);},50);}else{
if(showComment){console.log("setHumanChoice");}
//console.log("isWin: ",isWin(rows[parseInt(y)][x],parseInt(x),parseInt(y)));
if(isWin(rows[parseInt(y)][x],parseInt(x),parseInt(y))){
//console.log('how? ', isWin(1,parseInt(x),parseInt(y)));
if(rows[parseInt(y)][x]==1){
document.getElementById('winner').innerHTML='Human wins';}
if(rows[parseInt(y)][x]==2){
document.getElementById('winner').innerHTML='Computer wins';}
}else{
computerPositionToPlay=-1;
canWin();
if(computerPositionToPlay==-1){
canBlock();}
if(computerPositionToPlay==-1){
canSetupBeBlocked();}
if(computerPositionToPlay==-1){
canSetup();}
if(computerPositionToPlay==-1){computerRandomTurn();}else{
computerTurn(computerPositionToPlay);}
}
}
}
}
}
//printRows();
}
function drop(dropPosition,x,player){
var playerColor='';
if(player==1){
playerColor="linear-gradient(to bottom,white,cyan)";}
if(player==2){
playerColor="linear-gradient(to bottom,white,yellow)";}
document.getElementById(dropPosition+'-'+x).style.backgroundImage="linear-gradient(to bottom,lightgray,white)";
document.getElementById(dropPosition+'-'+x).innerHTML=placeHolder;
dropPosition=dropPosition+1;
document.getElementById(dropPosition+'-'+x).style.backgroundImage=playerColor;
if(player==1){
document.getElementById(dropPosition+'-'+x).innerHTML='👤';}
if(player==2){
document.getElementById(dropPosition+'-'+x).innerHTML='🐬';}
if(rows[dropPosition][x]==0){
setTimeout(function(){drop(dropPosition,x,player);},50);
}else{
if(isWin(player,parseInt(x),dropPosition)){
//console.log('how? ', isWin(1,parseInt(x),dropPosition));
if(player==1){
document.getElementById('winner').innerHTML='Human wins';}
if(player==2){
document.getElementById('winner').innerHTML='Computer wins';}
}else{
if(player==1){
computerPositionToPlay=-1;
canWin();
if(computerPositionToPlay==-1){
canBlock();}
if(computerPositionToPlay==-1){
canSetupBeBlocked();}
if(computerPositionToPlay==-1){
canSetup();console.log('canSetup');}
if(computerPositionToPlay==-1){computerRandomTurn();}else{
computerTurn(computerPositionToPlay);}
}}
/*if(isWin(2,parseInt(x),dropPosition)){
console.log('how? ', isWin(2,parseInt(x),dropPosition));
document.getElementById('winner').innerHTML='Computer wins';}
*/
//console.log("isWin: ",isWin(rows[dropPosition][x],parseInt(x),dropPosition));
}
}
function computerRandomTurn(){
var x=parseInt(Math.random()*7);
while(rows[0][x]!=0){
x=parseInt(Math.random()*7);}
if(rows[0][x]==0){
var y=0;
document.getElementById(0+'-'+x).style.backgroundImage="linear-gradient(to bottom,white,yellow)";
document.getElementById(0+'-'+x).innerHTML='🐬';
var lowestEmptySlot=0;
for(var i=0;i<6;i++){
if(rows[i][x]!=0){
break;}else{
lowestEmptySlot=i;}
}
if(showComment){console.log('computer',x,lowestEmptySlot);}
rows[lowestEmptySlot][x]=2;
if(lowestEmptySlot!=0){
setTimeout(function(){drop(parseInt(y),x,2);},50);}else{
if(isWin(rows[lowestEmptySlot][x],parseInt(x),parseInt(y))){
//console.log('how? ', isWin(1,parseInt(x),parseInt(y)));
if(rows[parseInt(y)][x]==1){
document.getElementById('winner').innerHTML='Human wins';}
if(rows[parseInt(y)][x]==2){
document.getElementById('winner').innerHTML='Computer wins';}
}
//console.log("isWin: ",isWin(rows[parseInt(y)][x],parseInt(x),parseInt(y)));
}
}
//printRows();
}
function computerTurn(x){
if(rows[0][x]==0){
var y=0;
document.getElementById(0+'-'+x).style.backgroundImage="linear-gradient(to bottom,white,yellow)";
document.getElementById(0+'-'+x).innerHTML='🐬';
var lowestEmptySlot=0;
for(var i=0;i<6;i++){
if(rows[i][x]!=0){
break;}else{
lowestEmptySlot=i;}
}
if(showComment){console.log('computer',x,lowestEmptySlot);}
rows[lowestEmptySlot][x]=2;
if(lowestEmptySlot!=0){
setTimeout(function(){drop(parseInt(y),x,2);},50);}else{
if(isWin(rows[lowestEmptySlot][x],parseInt(x),parseInt(y))){
//console.log('how? ', isWin(1,parseInt(x),parseInt(y)));
if(rows[parseInt(y)][x]==1){
document.getElementById('winner').innerHTML='Human wins';}
if(rows[parseInt(y)][x]==2){
document.getElementById('winner').innerHTML='Computer wins';}
}
//console.log("isWin: ",isWin(rows[parseInt(y)][x],parseInt(x),parseInt(y)));
}
}
//printRows();
}
function canWin(){
for(var x=0;x<7;x++){
var lowestEmptySlot=0;
for(var i=0;i<6;i++){
if(rows[i][x]!=0){
break;}else{
lowestEmptySlot=i;}
}
if(lowestEmptySlot!=0){
rows[lowestEmptySlot][x]=2;
//console.log('canWin',x,lowestEmptySlot,isWin(2,x,lowestEmptySlot));
//if(showComment){console.log('In can win: ',x,lowestEmptySlot,isWin(2,x,lowestEmptySlot));}
if(isWin(2,x,lowestEmptySlot)){
computerPositionToPlay=x;
if(showComment){console.log("Can Win: ",computerPositionToPlay);}
}
rows[lowestEmptySlot][x]=0;}else if(lowestEmptySlot==0&&rows[lowestEmptySlot][x]==0){
rows[lowestEmptySlot][x]=2;
if(showComment){console.log('In can win: ',x,lowestEmptySlot,isWin(2,x,lowestEmptySlot));}
if(isWin(2,x,lowestEmptySlot)){
computerPositionToPlay=x;
if(showComment){console.log("Can Win: ",computerPositionToPlay);}
}
rows[lowestEmptySlot][x]=0;
}
}
}
function canBlock(){
for(var x=0;x<7;x++){
var lowestEmptySlot=0;
for(var i=0;i<6;i++){
if(rows[i][x]!=0){
break;}else{
lowestEmptySlot=i;}
}
if(lowestEmptySlot!=0){
rows[lowestEmptySlot][x]=1;
//console.log('canBlock', x,lowestEmptySlot,isWin(1,x,lowestEmptySlot));
//if(showComment){console.log('In can block: ',x,lowestEmptySlot,isWin(1,x,lowestEmptySlot));}
if(isWin(1,x,lowestEmptySlot)){
computerPositionToPlay=x;
if(showComment){console.log("Can Block: ",computerPositionToPlay);}
}
rows[lowestEmptySlot][x]=0;}else if(lowestEmptySlot==0&&rows[lowestEmptySlot][x]==0){
rows[lowestEmptySlot][x]=1;
if(showComment){console.log('In can block: ',x,lowestEmptySlot,isWin(1,x,lowestEmptySlot));}
if(isWin(1,x,lowestEmptySlot)){
computerPositionToPlay=x;
if(showComment){console.log("Can Block: ",computerPositionToPlay);}
}
rows[lowestEmptySlot][x]=0;
}
}
}
function canSetupBeBlocked(){
var safeToPlay=[];
for(var i=0;i<7;i++){
safeToPlay[i]=true;
}
//computer plays
var computerPieceSet=false;
var computerPlayLowestEmptySlot=0;
for(var computerPlayX=0;computerPlayX<7;computerPlayX++){
computerPlayLowestEmptySlot=0;var play='';
if(rows[0][computerPlayX]==0){
for(var i=0;i<6;i++){
if(rows[i][computerPlayX]!=0){
break;}else{
computerPlayLowestEmptySlot=i;}
}
if(computerPlayLowestEmptySlot!=0){
rows[computerPlayLowestEmptySlot][computerPlayX]=2;
computerPieceSet=true;
//console.log('canWin',computerPlayX,computerPlayLowestEmptySlot,isWin(2,computerPlayX,computerPlayLowestEmptySlot));
}else if(computerPlayLowestEmptySlot==0&&rows[computerPlayLowestEmptySlot][computerPlayX]==0){
rows[computerPlayLowestEmptySlot][computerPlayX]=2;
computerPieceSet=true;
//console.log(computerPlayX,computerPlayLowestEmptySlot,isWin(2,computerPlayX,computerPlayLowestEmptySlot));
}
//human plays
var humanPieceSet=false;
var humanPlayLowestEmptySlot=0;
for(var humanPlayX=0;humanPlayX<7;humanPlayX++){
humanPlayLowestEmptySlot=0;
var lowestEmptySlot=0;
if(rows[0][humanPlayX]==0){
for(var i=0;i<6;i++){
if(rows[i][humanPlayX]!=0){
break;}else{
humanPlayLowestEmptySlot=i;}
}
//if human can win after computer plays, set computer play to false
if(isWin(1,humanPlayX,humanPlayLowestEmptySlot)){
if(showComment){
console.log("Computer would play: ",computerPlayX," Human then plays: ",humanPlayX);}
safeToPlay[computerPlayX]=false;}
if(humanPlayLowestEmptySlot!=0){
rows[humanPlayLowestEmptySlot][humanPlayX]=1;
//console.log("human first Play",humanPlayX,humanPlayLowestEmptySlot);
humanPieceSet=true;
//console.log('canWin',humanPlayX,humanPlayLowestEmptySlot,isWin(1,humanPlayX,humanPlayLowestEmptySlot));
}else if(humanPlayLowestEmptySlot==0&&rows[humanPlayLowestEmptySlot][humanPlayX]==0){
rows[humanPlayLowestEmptySlot][humanPlayX]=1;
//console.log("human first Play",humanPlayX,humanPlayLowestEmptySlot);
humanPieceSet=true;
//console.log(humanPlayX,humanPlayLowestEmptySlot,isWin(2,humanPlayX,humanPlayLowestEmptySlot));
}
//human plays one step ahead (OSA)
var possibleWins=0;
var humanPlayOSALowestEmptySlot=0;play='';
for(var humanPlayOSAX=0;humanPlayOSAX<7;humanPlayOSAX++){
humanPlayOSALowestEmptySlot=0;
if(rows[0][humanPlayOSAX]==0){
for(var i=0;i<6;i++){
if(rows[i][humanPlayOSAX]!=0){
break;}else{
humanPlayOSALowestEmptySlot=i;}
}
if(humanPlayOSALowestEmptySlot!=0){
rows[humanPlayOSALowestEmptySlot][humanPlayOSAX]=1;
if(isWin(1,humanPlayOSAX,humanPlayOSALowestEmptySlot)){
possibleWins++;
//console.log("Current computer",computerPlayX,computerPlayLowestEmptySlot);
//console.log("Current human",humanPlayX,humanPlayLowestEmptySlot);
//console.log("OSA",humanPlayOSAX, humanPlayOSALowestEmptySlot);
play=play+' || Computer would play: '+computerPlayX+" Human then plays: "+ humanPlayX+" Human OSA: "+humanPlayOSAX;
//printRows();
}
//printRows();
}else if(humanPlayOSALowestEmptySlot==0&&rows[humanPlayOSALowestEmptySlot][humanPlayOSAX]==0){
rows[humanPlayOSALowestEmptySlot][humanPlayOSAX]=1;
if(isWin(1,humanPlayOSAX,humanPlayOSALowestEmptySlot)){
possibleWins++;
//console.log(humanPlayOSAX, humanPlayOSALowestEmptySlot);
//printRows();
}
//printRows();
}
rows[humanPlayOSALowestEmptySlot][humanPlayOSAX]=0;
if(possibleWins>1){
//console.log("POSSIBLE WINS: ",possibleWins);
//console.log("Computer should not play ",computerPlayX);
safeToPlay[computerPlayX]=false;
if(play!='')
if(showComment){
console.log(play);}
play='';
//humanPlayOSAX=humanPlayX=9;
}
}//if(rows[0][humanPlayOSAX]==0)
}//for(var humanPlayOSAX=0;humanPlayOSAX<7;humanPlayOSAX++)
if(humanPieceSet){
//reset computer play
rows[humanPlayLowestEmptySlot][humanPlayX]=0;
humanPieceSet=false;}
}//if(rows[0][humanPlayX]==0)
}//for(var humanPlayX=0;humanPlayX<7;humanPlayX++)
if(computerPieceSet){
//reset computer play
//console.log(computerPlayX,computerPlayLowestEmptySlot);
rows[computerPlayLowestEmptySlot][computerPlayX]=0;
computerPieceSet=false;}
}else{
safeToPlay[computerPlayX]=false;
}//if(rows[0][computerPlayX]==0)
}//for(var computerPlayX=0;computerPlayX<7;computerPlayX++)
//printRows();
var randomizedIndex=[0,1,2,3,4,5,6];
var tempRandomizedIndex=[];
for(var rI=0;rI<13;rI++){
var randomIndex=parseInt(Math.random() * 7);
var randomizedIndexCounter=0;
for(var i=0;i<7;i++){
if(i!=randomIndex){
tempRandomizedIndex[randomizedIndexCounter]=randomizedIndex[i];
randomizedIndexCounter++;}
}
tempRandomizedIndex[randomizedIndexCounter]=randomizedIndex[randomIndex];
for(var i=0;i<7;i++){
randomizedIndex[i]=tempRandomizedIndex[i];}
}
//console.log(randomizedIndex);
for(var i=0;i<7;i++){
if(safeToPlay[randomizedIndex[i]]){
if(showComment){
console.log("SAFE TO PLAY: ",randomizedIndex[i]);}
computerPositionToPlay=randomizedIndex[i];
var lowSlot=0;
for(var j=0;j<6;j++){
if(rows[j][randomizedIndex[i]]!=0){
break;}else{
lowSlot=j;}
}
if(lowSlot<5){
lowSlot=lowSlot+1;}
//console.log(lowSlot,randomizedIndex[i],rows[lowSlot][randomizedIndex[i]]);
if(rows[lowSlot][randomizedIndex[i]]==1&&(parseInt(Math.random() * 7)%2==0))
{break;}
}
}
}//canSetupBeBlocked()
function canSetup(){
var safeToPlay=[];
for(var i=0;i<7;i++){
safeToPlay[i]=false;
}
//computer plays
var computerPieceSet=false;
var computerPlayLowestEmptySlot=0;
for(var computerPlayX=0;computerPlayX<7;computerPlayX++){
computerPlayLowestEmptySlot=0;var play='';
if(rows[0][computerPlayX]==0){
for(var i=0;i<6;i++){
if(rows[i][computerPlayX]!=0){
break;}else{
computerPlayLowestEmptySlot=i;}
}
if(computerPlayLowestEmptySlot!=0){
rows[computerPlayLowestEmptySlot][computerPlayX]=2;
computerPieceSet=true;
//console.log('canWin',computerPlayX,computerPlayLowestEmptySlot,isWin(2,computerPlayX,computerPlayLowestEmptySlot));
}else if(computerPlayLowestEmptySlot==0&&rows[computerPlayLowestEmptySlot][computerPlayX]==0){
rows[computerPlayLowestEmptySlot][computerPlayX]=2;
computerPieceSet=true;
//console.log(computerPlayX,computerPlayLowestEmptySlot,isWin(2,computerPlayX,computerPlayLowestEmptySlot));
}
//human plays
var humanPieceSet=false;
var humanPlayLowestEmptySlot=0;
for(var humanPlayX=0;humanPlayX<7;humanPlayX++){
humanPlayLowestEmptySlot=0;
var lowestEmptySlot=0;
if(rows[0][humanPlayX]==0){
for(var i=0;i<6;i++){
if(rows[i][humanPlayX]!=0){
break;}else{
humanPlayLowestEmptySlot=i;}
}
if(humanPlayLowestEmptySlot!=0){
rows[humanPlayLowestEmptySlot][humanPlayX]=1;
//console.log("human first Play",humanPlayX,humanPlayLowestEmptySlot);
humanPieceSet=true;
//console.log('canWin',humanPlayX,humanPlayLowestEmptySlot,isWin(1,humanPlayX,humanPlayLowestEmptySlot));
}else if(humanPlayLowestEmptySlot==0&&rows[humanPlayLowestEmptySlot][humanPlayX]==0){
rows[humanPlayLowestEmptySlot][humanPlayX]=1;
//console.log("human first Play",humanPlayX,humanPlayLowestEmptySlot);
humanPieceSet=true;
//console.log(humanPlayX,humanPlayLowestEmptySlot,isWin(2,humanPlayX,humanPlayLowestEmptySlot));
}
//computer plays one step ahead (OSA)
var possibleWins=0;
var computerPlayOSALowestEmptySlot=0;play='';
for(var computerPlayOSAX=0;computerPlayOSAX<7;computerPlayOSAX++){
computerPlayOSALowestEmptySlot=0;
if(rows[0][computerPlayOSAX]==0){
for(var i=0;i<6;i++){
if(rows[i][computerPlayOSAX]!=0){
break;}else{
computerPlayOSALowestEmptySlot=i;}
}
if(computerPlayOSALowestEmptySlot!=0){
rows[computerPlayOSALowestEmptySlot][computerPlayOSAX]=2;
if(isWin(2,computerPlayOSAX,computerPlayOSALowestEmptySlot)){
possibleWins++;
play=play+' || Computer would play: '+computerPlayX+" Human then plays: "+ humanPlayX+" Computer OSA: "+computerPlayOSAX;
//printRows();
}
//printRows();
}else if(computerPlayOSALowestEmptySlot==0&&rows[computerPlayOSALowestEmptySlot][computerPlayOSAX]==0){
rows[computerPlayOSALowestEmptySlot][computerPlayOSAX]=1;
if(isWin(2,computerPlayOSAX,computerPlayOSALowestEmptySlot)){
possibleWins++;
}
//printRows();
}
rows[computerPlayOSALowestEmptySlot][computerPlayOSAX]=0;
if(possibleWins>1){
safeToPlay[computerPlayX]=true;
if(play!='')
if(showComment){
console.log(play);}
play='';
}
}//if(rows[0][computerPlayOSAX]==0)
}//for(var computerPlayOSAX=0;computerPlayOSAX<7;computerPlayOSAX++)
if(humanPieceSet){
//reset computer play
rows[humanPlayLowestEmptySlot][humanPlayX]=0;
humanPieceSet=false;}
}//if(rows[0][humanPlayX]==0)
}//for(var humanPlayX=0;humanPlayX<7;humanPlayX++)
if(computerPieceSet){
//reset computer play
//console.log(computerPlayX,computerPlayLowestEmptySlot);
rows[computerPlayLowestEmptySlot][computerPlayX]=0;
computerPieceSet=false;}
}else{
safeToPlay[computerPlayX]=false;
}//if(rows[0][computerPlayX]==0)
}//for(var computerPlayX=0;computerPlayX<7;computerPlayX++)
//printRows();
for(var i=0;i<7;i++){
if(safeToPlay[i]){
if(showComment){
console.log("GOOD SETUP: ",i);}
computerPositionToPlay=i;}
}
}//canSetup()
function isWin(player,x,dropPosition){
/**
if(player==1){console.log("HUMAN");}
if(player==2){console.log("COMPUTER");}
**/
// -gradient
var a=1;
var total=1;
if((dropPosition+a)<6&&(x+a)<7){
while(rows[(dropPosition+a)][x+a]==player){
total++;
a++;
if((dropPosition+a)>5||(x+a)>6){break;}
}
}
a=1;
if((dropPosition-a)>-1&&(x-a)>-1){
while(rows[(dropPosition-a)][x-a]==player){
total++;
a++;
if((dropPosition-a)<0||(x-a)<0){break;}
}
}
//console.log('total -gradient: ',total);
if(total>=4){return true;}
// +gradient
var a=1;
var total=1;
if((dropPosition+a)<6&&(x-a)>-1){
while(rows[(dropPosition+a)][x-a]==player){
total++;
a++;
if((dropPosition+a)>5||(x-a)<0){break;}
}
}
a=1;
if((dropPosition-a)>-1&&(x+a)<7){
while(rows[(dropPosition-a)][x+a]==player){
total++;
a++;
if((dropPosition-a)<0||(x+a)>6){break;}
}
}
//console.log('total +gradient: ',total);
if(total>=4){return true;}
//is vertical count
var a=1;
var total=0;
//console.log(rows[dropPosition]);
for(var i=0;i<6;i++){
//console.log(rows[i],x);
if(rows[i][x]==player){
total++;
if(total>=4){break;}
}else{total=0;}
}
//console.log('total vertical: ',total);
if(total>=4){return true;}
//
//is horizontal count
var a=1;
var total=0;
//console.log(rows[dropPosition]);
for(var i=0;i<7;i++){
if(rows[dropPosition][i]==player){
total++;
if(total>=4){break;}
}else{total=0;}
}
//console.log('total Horizontal: ',total);
if(total>=4){return true;}
//
//if(total>=4&&player==1){console.log("Computer WINS");}
return false;
}
function printRows(){
for(var i=0;i<6;i++){
console.log(rows[i]);}
}
</script>
</html>