我的JavaScript代码在使用000webhost托管的网站中无法正常工作_Javascript_Html_Jquery_Css_Web Hosting

我的JavaScript代码在使用000webhost托管的网站中无法正常工作

javascript html jquery css

我的JavaScript代码在使用000webhost托管的网站中无法正常工作,javascript,html,jquery,css,web-hosting,Javascript,Html,Jquery,Css,Web Hosting,我使用HTML、CSS和JavaScript（使用jquery）制作了Connect-Four游戏，当我从我的设备本地运行它时，效果很好。但当我使用000webhost将其带到live server时，似乎只有部分代码可以工作！！我坚信问题出在我的JavaScript代码上但是我也分享了我的html代码 JavaScript代码： //Input from players alert("WELCOME PLAYERS!\nIf you don't know how to play th

我使用HTML、CSS和JavaScript（使用jquery）制作了Connect-Four游戏，当我从我的设备本地运行它时，效果很好。但当我使用000webhost将其带到live server时，似乎只有部分代码可以工作！！我坚信问题出在我的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 && one === three && one === four && one !== 'rgb(128, 128, 128)' && 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;
  }
}
});

<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%26display=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>

//玩家的输入
提醒（“欢迎玩家！\n如果您不知道如何玩此游戏，请访问此网站：https://en.wikipedia.org/wiki/Connect_Four");
var play1=prompt（“玩家一：蓝色”\n输入您的名字：”；
var play1Color='rgb（86151255）'；
var play2=prompt（“玩家二：红色”\n输入您的名字：”；
var play2Color='rgb（237,45,73）'；
如果（播放1==播放2）{
var play2=提示（“玩家名称已存在！”）；
}
var game_on=真；
var table=$（'table tr'）；
//标题的随机颜色效果
函数randomColor（）{
var color=“#”+Math.floor（Math.random（）*16777251）.toString（16）；
返回颜色；
}
函数colorChanger（）{
colorInput=randomColor（）；
$（“h1”）.css（'color'，colorInput）；
}
设置间隔（颜色变换器（），500）；
//主要游戏的代码
函数win（rowNum、colNum）{
log（'从行开始，您赢了'）；
console.log（rowNum）；
console.log（colNum）；
}
函数reportColor（行索引、共索引）{
返回表.eq（rowIndex）.find（'td'）.eq（colIndex）.find（'button'）.css（'background-color'）；
}
函数检查底部（colIndex）{
对于（变量行=5；行>-1；行--）{
colorReport=reportColor（行，共索引）；
如果（colorReport==='rgb（128、128、128）'{
返回行；
}
}
}
函数匹配检查器（一、二、三、四）{
返回（一===2&&1===3&&1===4&&1！=='rgb（128128128）&&1！==未定义）；
}
//检查功能
函数horizCheck（）{
对于（变量行=5；行>-1；行--）{
对于（变量col=0；col<4；col++）{
if（匹配检查器（reportColor（行，列）、reportColor（行，列+1）、reportColor（行，列+2）、reportColor（行，列+3）））{
控制台日志（“横向胜利”）；
赢（行、列）；
返回true；
}否则{
继续；
}
}
}
}
函数检查（）{
对于（变量col=0；col<7；col++）{
对于（变量行=5；行>2；行--）{
if（匹配检查器（reportColor（行，列）、reportColor（行1，列）、reportColor（行2，列）、reportColor（行3，列）））{
控制台日志（“垂直赢”）；
赢（行、列）；
返回true；
}
否则{
继续；
}
}
}
}
函数diagCheck（）{
对于（变量行=0；行<6；行++）{
对于（变量col=0；col<7；col++）{
if（匹配检查器（reportColor（行，列）、reportColor（行+1，列+1）、reportColor（行+2，列+2）、reportColor（行+3，列+3）））{
console.log（“对角赢！”）；
赢（行、列）；
返回true；
}
否则如果（匹配检查器（reportColor（行，列）、reportColor（行1，列+1）、reportColor（行2，列+2）、reportColor（行3，列+3）））{
console.log（“对角赢！”）；
赢（行、列）；
返回true；
}
否则{
继续；
}
}
}
}
函数newColor（行索引、共索引、颜色）{
返回table.eq（rowIndex.find（“td”）.eq（colIndex.find（“按钮”）.css（“背景色”），color）；
}
函数winAlert（）{
警报（currentName+“已赢得！\n刷新以重新启动”）；
}
//博弈逻辑
//从游戏向导开始
var-currentPlayer=1；
var currentName=play1；
var currentColor=play1Color；
$（“h3”）.text（currentName+”，轮到你了！选择一个列来加入！）；
$（“按钮”）。在（“单击”，函数（）上）{
var col=$（this）.closest（“td”）.index（）；
行=检查底部（列）；
新颜色（行、列、当前颜色）；
如果（水平检查（）| |垂直检查（）| |诊断检查（））{
$（“h3”）.text（currentName+'WON！'）；
$（“h4”）.fadeOut（）；
$（“h1”）.fadeOut（）；
控制台日志（“工作”）；
setInterval（winAlert（），1500）；
}否则{
currentPlayer=currentPlayer*-1；
如果（currentPlayer==1）{
currentName=play1；
$（“h3”）.text（currentName+”，轮到你了！选择一个列来加入！）；
currentColor=play1Color；
}否则{
currentName=play2；
$（“h3”）.text（currentName+”，轮到你了！选择一个列来加入！）；
currentColor=play2Color；
}
}
});

HTML代码：

//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 && one === three && one === four && one !== 'rgb(128, 128, 128)' && 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;
  }
}
});

<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%26display=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>


连接4
h1{
边缘顶部：20px；
文本对齐：居中；
字体系列：草书；
}
h3{
文本对齐：居中；
字体系列：“Balsamiq Sans”，草书；
}
h4{
文本对齐：居中；
字体系列：“Balsamiq Sans”，草书；
}
钮扣{
高度：75px；
宽度：75px；
背景色：rgb（128、128、128）；
边界半径：50px；
边框：纯黑2px；
}
桌子{
边界间距：5px；
边界塌陷：分离；
}
欢迎连接四台
这个游戏的目的是把你的四个芯片连在一起！
走吧！

它可能与您的
交叉源相关
请检查