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

编程问答 2022-12-06

问题描述

我使用HTML，CSS和JavaScript（使用jquery）制作了Connect Four游戏，当我从设备本地运行该游戏时效果很好。但是，当我使用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 && one === three && one === four && one !== 'rgb(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),col+2),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,reportColor(row-1,reportColor(row-2,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,reportColor(row+1,reportColor(row+2,reportColor(row+3,col+3))) {
       console.log("Diagonal win!");
       win(row,col);
       return true;
      }
      else if (matchChecker(reportColor(row,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%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) ;
      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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptweb-hosting

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...