Блог

Я создал игру Connect Four, используя HTML, CSS и JavaScript (используя jquery), которая отлично работала, когда я запускал ее локально со своего устройства. Но когда я перенес его на действующий сервер с использованием 000webhost, кажется, что работает только часть кода!! Я твердо убежден, что проблема в моем коде JavaScript!!Однако я также поделился своим html-кодом.

Код JavaScript :

 //Input from players
alert("WELCOME PLAYERS!nIf you don't know how to play this game kindly visit this website : https://en.wikipedia.org/wiki/Connect_Four");
var play1 = prompt("Player One : 'Blue'nEnter your name: ");
var play1Color = 'rgb(86, 151, 255)';

var play2 = prompt("Player Two : 'Red'nEnter your name: ");
var play2Color = 'rgb(237, 45, 73)';

if (play1 === play2) {
var play2 = prompt("Player name already exist ! ");
}

var game_on = true;
var table = $('table tr');

//RandomColorEffect for the header
function randomColor(){
  var color = "#"   Math.floor(Math.random()*16777251).toString(16);
  return color;
}

function colorChanger(){
colorInput = randomColor();
$("h1").css('color', colorInput);
}

setInterval(colorChanger(),500);

//Code for the MainGame

function win(rowNum,colNum){
console.log('You won starting at the row,col');
console.log(rowNum);
console.log(colNum);
}

function reportColor(rowIndex,colIndex){
  return table.eq(rowIndex).find('td').eq(colIndex).find('button').css('background-color');
}

function checkBottom(colIndex){

  for (var row = 5; row > -1; row--) {
   colorReport = reportColor(row,colIndex);
   if (colorReport === 'rgb(128, 128, 128)') {
     return row;
   }
 }
}


function matchChecker(one,two,three,four){
  return (one === two amp;amp; one === three amp;amp; one === four amp;amp; one !== 'rgb(128, 128, 128)' amp;amp; one !== undefined);
}

//CHECKING Functions

function horizCheck(){
  for (var row = 5; row > -1; row--) {
    for (var col = 0; col < 4; col  ) {
    if (matchChecker(reportColor(row,col),reportColor(row,col 1),reportColor(row,col 2),reportColor(row,col 3))){
      console.log("Horizontal Win");
      win(row,col);
      return true;
    }else {
      continue;
      }
    }
  }
}

function vertiCheck(){
for (var col = 0; col < 7; col  ) {
  for (var row = 5; row > 2; row--) {
   if (matchChecker(reportColor(row,col),reportColor(row-1,col),reportColor(row-2,col),reportColor(row-3,col))){
     console.log("Vertical Win");
     win(row,col);
     return true;
   }
   else{
     continue;
   }
  }
 }
}

function diagCheck(){
  for (var row = 0; row < 6; row  ) {
    for (var col = 0; col < 7; col  ) {
     if (matchChecker(reportColor(row,col),reportColor(row 1,col 1),reportColor(row 2,col 2),reportColor(row 3,col 3))) {
       console.log("Diagonal win!");
       win(row,col);
       return true;
      }
      else if (matchChecker(reportColor(row,col),reportColor(row-1,col 1),reportColor(row-2,col 2),reportColor(row-3,col 3))) {
        console.log("Diagonal win!");
        win(row,col);
        return true;
      }
      else{
        continue;
      }
    }
  }
}

function newColor(rowIndex,colIndex,color){
  return table.eq(rowIndex).find("td").eq(colIndex).find("button").css("background-color",color);
}

function winAlert(){
  alert(currentName   ' WON!nRefresh to Restart');
}


//GAME LOGIC

//START WITH PLAYERONE

var currentPlayer = 1;
var currentName = play1;
var currentColor = play1Color;

$("h3").text(currentName   ", It's your turn! Pick a column to drop in !");
$('button').on("click", function(){
  var col = $(this).closest("td").index();
  row = checkBottom(col);
  newColor(row,col,currentColor);
  if (horizCheck() || vertiCheck() || diagCheck()) {
    $("h3").text(currentName   ' WON!');
    $("h4").fadeOut();
    $("h1").fadeOut();
    console.log("Working");
    setInterval(winAlert(),1500);
  } else{
   currentPlayer = currentPlayer * -1;

  if (currentPlayer === 1) {
    currentName = play1;
    $("h3").text(currentName   ", It's your turn! Pick a column to drop in !");
    currentColor = play1Color;
  }else {
    currentName = play2;
    $("h3").text(currentName   ", It's your turn! Pick a column to drop in !");
    currentColor = play2Color;
  }
}
});

  

HTML-КОД :

 <head>
    <meta charset="utf-8">
    <title>CONNECT 4</title>
    <script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN Bdg0JdbxYKrThecOKuH5zCYotlSAcp1 c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq Sans&display=swap" rel="stylesheet">
    <style media="screen">
      h1{
      margin-top: 20px;
      text-align: center;
      font-family: cursive;
      }
      h3{
      text-align: center;
      font-family: 'Balsamiq Sans', cursive;
      }
      h4{
      text-align: center;
      font-family: 'Balsamiq Sans', cursive;
      }
      button{
      height: 75px;
      width: 75px;
      background-color: rgb(128, 128, 128) ;
      border-radius: 50px;
      border: solid black 2px;
      }
      table{
        border-spacing: 5px;
        border-collapse: separate;
      }
    </style>
  </head>
  <body>

<h1><strong> Welcome To Connect Four ! </strong></h1>
<h3>The object of this game is to connect four of your chips in a row!</h3>
<h4>Let's Go!</h4>

<table align="center">
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
  <tr>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
    <td><button type="button"></button></td>
  </tr>
</table>

  <script src="Connect_Four.js" charset="utf-8"></script>
  </body>