2015-11-04 2 views
3

Я строю небольшую игру соединить четыре, и когда я установил всплывающее окно, чтобы сказать «Красные/Желтые победы» для каждой возможной комбинации, это вызывает необычную ошибку/ошибку о котором я не уверен.JQuery «Если утверждения» срабатывает, когда оператор недействителен

Если у меня есть только одно, если заявление из около 65, которые есть она прекрасно работает, когда я получаю эту комбинацию:

var a1 = $(".a1").css("background-color"); 
var a2 = $(".a2").css("background-color"); 
etc 


if (a1 && a2 && a3 && a4 == "rgb(255, 0, 0)") { 
    alert("red wins"); 
    console.log("1"); 
} 
if (a2 && a3 && a4 && a5 == "rgb(255, 0, 0)") { 
    alert("red wins"); 
    console.log("1"); 
} 

Но когда у меня есть 65 из этих различных комбинаций они, кажется, вызывая случайно, и даже не требует a1, a2, a3, a4, чтобы быть правдой, чтобы вызвать если заявление (это иногда вызывает без четыре цвета фона истинных)

Пожалуйста, обратите внимание: Там намного больше коды различных переменные и МФС

Извините, что я 'm new to SO & JQ Если я пропустил что-нибудь, я с удовольствием отредактировал бы.

Код для @Scott: (Я знаю, что это будет тысячи способов, вероятно, это неправильно, и как я должен использовать сокеты, но я не очень хорошо разбираюсь в JQuery и не знаю, с чего начать, поэтому я много использовал из AJAX)

<?php 
 

 
try { 
 
\t $db = new PDO("mysql:host=$mysql_host;dbname=$mysql_db", $mysql_user, $mysql_pass); 
 
\t 
 
\t // Get Game ID/Color/Player 
 
\t $gameid = $_GET['gameid']; 
 
\t $checkPlayer = "SELECT * FROM c4_games WHERE gameid='$gameid'"; 
 
\t $result = array(); 
 
\t foreach ($db->query($checkPlayer) as $player) { 
 
\t \t $result[] = $player; 
 
\t \t $player1 = $result[0][1]; 
 
\t \t if ($player1 == 0) { 
 
\t \t \t $update = "UPDATE c4_games SET p1_connect='1' WHERE gameid='$gameid'"; 
 
\t \t \t $db->exec($update); 
 
\t \t \t $player = "red"; 
 
\t \t \t echo $player; 
 
\t \t } else { 
 
\t \t \t $update = "UPDATE c4_games SET p2_connect='1' WHERE gameid='$gameid'"; 
 
\t \t \t $db->exec($update); 
 
\t \t \t $player = "yellow"; 
 
\t \t \t echo $player; 
 
\t \t } 
 
\t } 
 
} catch(PDOException $e) { 
 
\t $e->getMessage(); 
 
} 
 

 

 

 
?> 
 
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Website Title</title> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <!-- Stylesheets --> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/index.css" /> 
 
\t \t <!-- Javascript --> 
 
\t \t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t </head> 
 
\t <body> \t 
 
\t \t <table class="c4-table"> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="F1">F1</td> 
 
\t \t \t \t <td class="F2">F2</td> 
 
\t \t \t \t <td class="F3">F3</td> 
 
\t \t \t \t <td class="F4">F4</td> 
 
\t \t \t \t <td class="F5">F5</td> 
 
\t \t \t \t <td class="F6">F6</td> 
 
\t \t \t \t <td class="F7">F7</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="E1">E1</td> 
 
\t \t \t \t <td class="E2">E2</td> 
 
\t \t \t \t <td class="E3">E3</td> 
 
\t \t \t \t <td class="E4">E4</td> 
 
\t \t \t \t <td class="E5">E5</td> 
 
\t \t \t \t <td class="E6">E6</td> 
 
\t \t \t \t <td class="E7">E7</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="D1">D1</td> 
 
\t \t \t \t <td class="D2">D2</td> 
 
\t \t \t \t <td class="D3">D3</td> 
 
\t \t \t \t <td class="D4">D4</td> 
 
\t \t \t \t <td class="D5">D5</td> 
 
\t \t \t \t <td class="D6">D6</td> 
 
\t \t \t \t <td class="D7">D7</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="C1">C1</td> 
 
\t \t \t \t <td class="C2">C2</td> 
 
\t \t \t \t <td class="C3">C3</td> 
 
\t \t \t \t <td class="C4">C4</td> 
 
\t \t \t \t <td class="C5">C5</td> 
 
\t \t \t \t <td class="C6">C6</td> 
 
\t \t \t \t <td class="C7">C7</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="B1">B1</td> 
 
\t \t \t \t <td class="B2">B2</td> 
 
\t \t \t \t <td class="B3">B3</td> 
 
\t \t \t \t <td class="B4">B4</td> 
 
\t \t \t \t <td class="B5">B5</td> 
 
\t \t \t \t <td class="B6">B6</td> 
 
\t \t \t \t <td class="B7">B7</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="A1">A1</td> 
 
\t \t \t \t <td class="A2">A2</td> 
 
\t \t \t \t <td class="A3">A3</td> 
 
\t \t \t \t <td class="A4">A4</td> 
 
\t \t \t \t <td class="A5">A5</td> 
 
\t \t \t \t <td class="A6">A6</td> 
 
\t \t \t \t <td class="A7">A7</td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t 
 
\t \t <form class="submit-move" style="display:none;" method="POST" action="submit.php"> 
 
\t \t \t <input type="text" class="move" name="move" /> 
 
\t \t \t <input type="hidden" name="gameid" class="gameid" value="<?php echo $gameid ?>"/> 
 
\t \t </form> 
 
\t \t 
 
\t \t <?php if ($player != "red") { 
 
\t \t echo '<script> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $("td").click(function() { 
 
\t \t \t \t \t y = 0; 
 
\t \t \t \t \t r = 0; 
 
\t \t \t \t \t $("td").each(function() { 
 
\t \t \t \t \t \t if ($(this).css("background-color") == "rgb(255, 255, 0)") { 
 
\t \t \t \t \t \t \t y++; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if ($(this).css("background-color") == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t r++; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t if (r > y) { 
 
\t \t \t \t \t \t r++; 
 
\t \t \t \t \t \t var column = $(this).attr("class").substring(1,2); 
 
\t \t \t \t \t \t var a = ".A" + column; 
 
\t \t \t \t \t \t var b = ".B" + column; 
 
\t \t \t \t \t \t var c = ".C" + column; 
 
\t \t \t \t \t \t var d = ".D" + column; 
 
\t \t \t \t \t \t var e = ".E" + column; 
 
\t \t \t \t \t \t var f = ".F" + column; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t if ($(a).attr("id") != "selected") { 
 
\t \t \t \t \t \t \t $(a).css("backgroundColor","yellow"); 
 
\t \t \t \t \t \t \t $(a).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(a); 
 
\t \t \t \t \t \t } else if ($(b).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(b).css("backgroundColor","yellow"); 
 
\t \t \t \t \t \t \t $(b).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(b); 
 
\t \t \t \t \t \t } else if ($(c).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(c).css("backgroundColor","yellow"); 
 
\t \t \t \t \t \t \t $(c).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(c); 
 
\t \t \t \t \t \t } else if ($(d).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(d).css("backgroundColor","yellow"); 
 
\t \t \t \t \t \t \t $(d).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(d); 
 
\t \t \t \t \t \t } else if ($(e).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(e).css("backgroundColor","yellow"); 
 
\t \t \t \t \t \t \t $(e).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(e); 
 
\t \t \t \t \t \t } else if ($(f).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(f).css("backgroundColor","yellow"); 
 
\t \t \t \t \t \t \t $(f).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(f); 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t $.ajax({ 
 
\t \t \t \t \t \t \t url: "api/submit-yellow.php", 
 
\t \t \t \t \t \t \t type: "POST", 
 
\t \t \t \t \t \t \t data: $(".submit-move").serialize(), 
 
\t \t \t \t \t \t \t success: function(result){ 
 
\t \t \t \t \t \t \t \t console.log($(".submit-move").serialize()); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }); \t 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t alert("It isnt your turn!"); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t // CHECK FOR CONNECT 4 
 
\t \t \t \t \t \t // REMOVED SOME CODE BECAUSE OF BODY LIMIT ON SO 
 
\t \t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t }); 
 
\t \t \t \t $("td").hover(function() { 
 
\t \t \t \t \t var column = $(this).attr("class").substring(1,2); 
 
\t \t \t \t \t var a = ".A" + column; 
 
\t \t \t \t \t var b = ".B" + column; 
 
\t \t \t \t \t var c = ".C" + column; 
 
\t \t \t \t \t var d = ".D" + column; 
 
\t \t \t \t \t var e = ".E" + column; 
 
\t \t \t \t \t var f = ".F" + column; 
 
\t \t \t \t \t $(a).css("border","1px solid yellow"); 
 
\t \t \t \t \t $(b).css("border","1px solid yellow"); 
 
\t \t \t \t \t $(c).css("border","1px solid yellow"); 
 
\t \t \t \t \t $(d).css("border","1px solid yellow"); 
 
\t \t \t \t \t $(e).css("border","1px solid yellow"); 
 
\t \t \t \t \t $(f).css("border","1px solid yellow"); 
 
\t \t \t \t }); 
 
\t \t \t \t $("td").mouseout(function() { 
 
\t \t \t \t \t var column = $(this).attr("class").substring(1,2); 
 
\t \t \t \t \t var a = ".A" + column; 
 
\t \t \t \t \t var b = ".B" + column; 
 
\t \t \t \t \t var c = ".C" + column; 
 
\t \t \t \t \t var d = ".D" + column; 
 
\t \t \t \t \t var e = ".E" + column; 
 
\t \t \t \t \t var f = ".F" + column; 
 
\t \t \t \t \t $(a).css("border","1px solid black"); 
 
\t \t \t \t \t $(b).css("border","1px solid black"); 
 
\t \t \t \t \t $(c).css("border","1px solid black"); 
 
\t \t \t \t \t $(d).css("border","1px solid black"); 
 
\t \t \t \t \t $(e).css("border","1px solid black"); 
 
\t \t \t \t \t $(f).css("border","1px solid black"); 
 
\t \t \t \t }); \t 
 
\t \t \t \t 
 
\t \t \t \t var lastMoveYellow = function load() { 
 
\t \t \t \t \t $.ajax({url:"api/move-yellow.php?gameid="+$(".gameid").val(),success:function(result){ 
 
\t \t \t \t \t \t var obj = jQuery.parseJSON(result); 
 
\t \t \t \t \t \t var ids = obj.map(function(el) { 
 
\t \t \t \t \t \t \t $($(el.move).css("backgroundColor","yellow")); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t }}); 
 
\t \t \t \t }; 
 
\t \t \t \t loadInterval = setInterval(lastMoveYellow, 1000); 
 
\t \t \t \t 
 
\t \t \t \t var lastMoveRed = function load() { 
 
\t \t \t \t \t $.ajax({url:"api/move-red.php?gameid="+$(".gameid").val(),success:function(result){ 
 
\t \t \t \t \t \t var obj = jQuery.parseJSON(result); 
 
\t \t \t \t \t \t var ids = obj.map(function(el) { 
 
\t \t \t \t \t \t \t $($(el.move).css("backgroundColor","red")); 
 
\t \t \t \t \t \t \t $($(el.move).attr("id","selected")); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t }}); 
 
\t \t \t \t }; 
 
\t \t \t \t loadInterval = setInterval(lastMoveRed, 1000); 
 
\t \t \t }); 
 
\t \t </script>'; 
 
\t \t } else { 
 
\t \t \t echo '<script> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t \t $("td").click(function() { 
 
\t \t \t \t \t y = 0; 
 
\t \t \t \t \t r = 0; 
 
\t \t \t \t \t $("td").each(function() { 
 
\t \t \t \t \t \t if ($(this).css("background-color") == "rgb(255, 255, 0)") { 
 
\t \t \t \t \t \t \t y++; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if ($(this).css("background-color") == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t r++; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t if (r == y) { 
 
\t \t \t \t \t \t r++; 
 
\t \t \t \t \t \t var column = $(this).attr("class").substring(1,2); 
 
\t \t \t \t \t \t var a = ".A" + column; 
 
\t \t \t \t \t \t var b = ".B" + column; 
 
\t \t \t \t \t \t var c = ".C" + column; 
 
\t \t \t \t \t \t var d = ".D" + column; 
 
\t \t \t \t \t \t var e = ".E" + column; 
 
\t \t \t \t \t \t var f = ".F" + column; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t if ($(a).attr("id") != "selected") { 
 
\t \t \t \t \t \t \t $(a).css("backgroundColor","red"); 
 
\t \t \t \t \t \t \t $(a).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(a); 
 
\t \t \t \t \t \t } else if ($(b).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(b).css("backgroundColor","red"); 
 
\t \t \t \t \t \t \t $(b).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(b); 
 
\t \t \t \t \t \t } else if ($(c).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(c).css("backgroundColor","red"); 
 
\t \t \t \t \t \t \t $(c).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(c); 
 
\t \t \t \t \t \t } else if ($(d).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(d).css("backgroundColor","red"); 
 
\t \t \t \t \t \t \t $(d).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(d); 
 
\t \t \t \t \t \t } else if ($(e).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(e).css("backgroundColor","red"); 
 
\t \t \t \t \t \t \t $(e).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(e); 
 
\t \t \t \t \t \t } else if ($(f).attr("id") != "selected"){ 
 
\t \t \t \t \t \t \t $(f).css("backgroundColor","red"); 
 
\t \t \t \t \t \t \t $(f).attr("id","selected"); 
 
\t \t \t \t \t \t \t $(".move").val(f); 
 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t \t $.ajax({ 
 
\t \t \t \t \t \t \t \t url: "api/submit-red.php", 
 
\t \t \t \t \t \t \t \t type: "POST", 
 
\t \t \t \t \t \t \t \t data: $(".submit-move").serialize(), 
 
\t \t \t \t \t \t \t \t success: function(result){ 
 
\t \t \t \t \t \t \t \t \t \t console.log("working"); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t alert("It isnt your turn!"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t // CHECK FOR CONNECT 4 
 
\t \t \t \t \t \t var a1 = $(".a1").css("background-color"); 
 
\t \t \t \t \t \t var a2 = $(".a2").css("background-color"); 
 
\t \t \t \t \t \t var a3 = $(".a3").css("background-color"); 
 
\t \t \t \t \t \t var a4 = $(".a4").css("background-color"); 
 
\t \t \t \t \t \t var a5 = $(".a5").css("background-color"); 
 
\t \t \t \t \t \t var a6 = $(".a6").css("background-color"); 
 
\t \t \t \t \t \t var a7 = $(".a7").css("background-color"); 
 
\t \t \t \t \t \t var b1 = $(".b1").css("background-color"); 
 
\t \t \t \t \t \t var b2 = $(".b2").css("background-color"); 
 
\t \t \t \t \t \t var b3 = $(".b3").css("background-color"); 
 
\t \t \t \t \t \t var b4 = $(".b4").css("background-color"); 
 
\t \t \t \t \t \t var b5 = $(".b5").css("background-color"); 
 
\t \t \t \t \t \t var b6 = $(".b6").css("background-color"); 
 
\t \t \t \t \t \t var b7 = $(".b7").css("background-color"); 
 
\t \t \t \t \t \t var c1 = $(".c1").css("background-color"); 
 
\t \t \t \t \t \t var c2 = $(".c2").css("background-color"); 
 
\t \t \t \t \t \t var c3 = $(".c3").css("background-color"); 
 
\t \t \t \t \t \t var c4 = $(".c4").css("background-color"); 
 
\t \t \t \t \t \t var c5 = $(".c5").css("background-color"); 
 
\t \t \t \t \t \t var c6 = $(".c6").css("background-color"); 
 
\t \t \t \t \t \t var c7 = $(".c7").css("background-color"); 
 
\t \t \t \t \t \t var d1 = $(".d1").css("background-color"); 
 
\t \t \t \t \t \t var d2 = $(".d2").css("background-color"); 
 
\t \t \t \t \t \t var d3 = $(".d3").css("background-color"); 
 
\t \t \t \t \t \t var d4 = $(".d4").css("background-color"); 
 
\t \t \t \t \t \t var d5 = $(".d5").css("background-color"); 
 
\t \t \t \t \t \t var d6 = $(".d6").css("background-color"); 
 
\t \t \t \t \t \t var d7 = $(".d7").css("background-color"); 
 
\t \t \t \t \t \t var e1 = $(".e1").css("background-color"); 
 
\t \t \t \t \t \t var e2 = $(".e2").css("background-color"); 
 
\t \t \t \t \t \t var e3 = $(".e3").css("background-color"); 
 
\t \t \t \t \t \t var e4 = $(".e4").css("background-color"); 
 
\t \t \t \t \t \t var e5 = $(".e5").css("background-color"); 
 
\t \t \t \t \t \t var e6 = $(".e6").css("background-color"); 
 
\t \t \t \t \t \t var e7 = $(".e7").css("background-color"); 
 
\t \t \t \t \t \t var f1 = $(".b1").css("background-color"); 
 
\t \t \t \t \t \t var f2 = $(".b2").css("background-color"); 
 
\t \t \t \t \t \t var f3 = $(".b3").css("background-color"); 
 
\t \t \t \t \t \t var f4 = $(".b4").css("background-color"); 
 
\t \t \t \t \t \t var f5 = $(".b5").css("background-color"); 
 
\t \t \t \t \t \t var f6 = $(".b6").css("background-color"); 
 
\t \t \t \t \t \t var f7 = $(".b7").css("background-color"); 
 

 

 
\t \t \t \t \t \t if (a1 && a2 && a3 && a4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("1"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a2 && a3 && a4 && a5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("2"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a3 && a4 && a5 && a6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("3"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a4 && a5 && a6 && a7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("4"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b1 && b2 && b3 && b4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("5"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b2 && b3 && b4 && b5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("6"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b3 && b4 && b5 && b6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("7"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b4 && b5 && b6 && b7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t \t console.log("8"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c1 && c2 && c3 && c4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c2 && c3 && c4 && c5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c3 && c4 && c5 && c6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c4 && c5 && c6 && c7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (d1 && d2 && d3 && d4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (d2 && d3 && d4 && d5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (d3 && d4 && d5 && d6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (d4 && d5 && d6 && d7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e1 && e2 && e3 && e4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e2 && e3 && e4 && e5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e3 && e4 && e5 && e6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e4 && e5 && e6 && e7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f1 && f2 && f3 && f4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f2 && f3 && f4 && f5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f3 && f4 && f5 && f6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f4 && f5 && f6 && f7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if (a1 && b1 && c1 && d1 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e1 && b1 && c1 && d1 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f1 && e1 && c1 && d1 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a2 && b2 && c2 && d2 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e2 && b2 && c2 && d2 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f2 && e2 && c2 && d2 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a3 && b3 && c3 && d3 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e3 && b3 && c3 && d3 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f3 && e3 && c3 && d3 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a4 && b4 && c4 && d4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e4 && b4 && c4 && d4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f4 && e4 && c4 && d4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a5 && b5 && c5 && d5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e5 && b5 && c5 && d5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f5 && e5 && c5 && d5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a6 && b6 && c6 && d6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e6 && b6 && c6 && d6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f6 && e6 && c6 && d6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a7 && b7 && c7 && d7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (e7 && b7 && c7 && d7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (f7 && e7 && c7 && d7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if (c1 && d2 && e3 && f4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b1 && c2 && d3 && e4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c2 && d3 && e4 && f5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a1 && b2 && c3 && d4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b2 && c3 && d4 && f5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c3 && d4 && e5 && f6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a2 && b3 && d4 && e5 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b3 && c4 && d5 && e6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c4 && d5 && e6 && f7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a3 && b4 && c5 && d6 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b4 && c5 && d6 && e7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a4 && b5 && c6 && d7 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if (a4 && b3 && c2 && a1 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a5 && b4 && c3 && d2 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b4 && c3 && d2 && e1 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a6 && b5 && c4 && d3 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b5 && c4 && d3 && e2 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c4 && d3 && e2 && f1 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (a7 && b6 && c5 && d4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b6 && c5 && d4 && e3 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c5 && d4 && e3 && f2 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (b7 && c6 && d5 && e4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c6 && d5 && e4 && f3 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t if (c7 && d6 && e5 && f4 == "rgb(255, 0, 0)") { 
 
\t \t \t \t \t \t \t alert("red wins"); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t \t $("td").hover(function() { 
 
\t \t \t \t \t \t var column = $(this).attr("class").substring(1,2); 
 
\t \t \t \t \t \t var a = ".A" + column; 
 
\t \t \t \t \t \t var b = ".B" + column; 
 
\t \t \t \t \t \t var c = ".C" + column; 
 
\t \t \t \t \t \t var d = ".D" + column; 
 
\t \t \t \t \t \t var e = ".E" + column; 
 
\t \t \t \t \t \t var f = ".F" + column; 
 
\t \t \t \t \t \t $(a).css("border","1px solid red"); 
 
\t \t \t \t \t \t $(b).css("border","1px solid red"); 
 
\t \t \t \t \t \t $(c).css("border","1px solid red"); 
 
\t \t \t \t \t \t $(d).css("border","1px solid red"); 
 
\t \t \t \t \t \t $(e).css("border","1px solid red"); 
 
\t \t \t \t \t \t $(f).css("border","1px solid red"); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t $("td").mouseout(function() { 
 
\t \t \t \t \t \t var column = $(this).attr("class").substring(1,2); 
 
\t \t \t \t \t \t var a = ".A" + column; 
 
\t \t \t \t \t \t var b = ".B" + column; 
 
\t \t \t \t \t \t var c = ".C" + column; 
 
\t \t \t \t \t \t var d = ".D" + column; 
 
\t \t \t \t \t \t var e = ".E" + column; 
 
\t \t \t \t \t \t var f = ".F" + column; 
 
\t \t \t \t \t \t $(a).css("border","1px solid black"); 
 
\t \t \t \t \t \t $(b).css("border","1px solid black"); 
 
\t \t \t \t \t \t $(c).css("border","1px solid black"); 
 
\t \t \t \t \t \t $(d).css("border","1px solid black"); 
 
\t \t \t \t \t \t $(e).css("border","1px solid black"); 
 
\t \t \t \t \t \t $(f).css("border","1px solid black"); 
 
\t \t \t \t \t }); \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t var lastMoveYellow = function load() { 
 
\t \t \t \t \t \t $.ajax({url:"api/move-yellow.php?gameid="+$(".gameid").val(),success:function(result){ 
 
\t \t \t \t \t \t \t var obj = jQuery.parseJSON(result); 
 
\t \t \t \t \t \t \t var ids = obj.map(function(el) { 
 
\t \t \t \t \t \t \t \t $($(el.move).css("backgroundColor","yellow")); 
 
\t \t \t \t \t \t \t \t $($(el.move).attr("id","selected")); 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t }}); 
 
\t \t \t \t \t }; 
 
\t \t \t \t \t loadInterval = setInterval(lastMoveYellow, 1000); 
 
\t \t \t \t \t 
 
\t \t \t \t \t var lastMoveRed = function load() { 
 
\t \t \t \t \t \t $.ajax({url:"api/move-red.php?gameid="+$(".gameid").val(),success:function(result){ 
 
\t \t \t \t \t \t \t var obj = jQuery.parseJSON(result); 
 
\t \t \t \t \t \t \t var ids = obj.map(function(el) { 
 
\t \t \t \t \t \t \t \t $($(el.move).css("backgroundColor","red")); 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t }}); 
 
\t \t \t \t \t }; 
 
\t \t \t \t \t loadInterval = setInterval(lastMoveRed, 1000); 
 
\t \t \t \t }); 
 
\t \t </script>'; 
 
\t \t } 
 
\t \t ?> 
 
\t </body> 
 
</html>

+0

Если какое-либо из ваших A # переменных равно 0, то это будет равно false. – Scott

+0

Можете ли вы опубликовать весь код? Бьюсь об заклад, у вас есть синтаксическая ошибка где-то, что может привести к тому, что вы объясняете. – Scott

+0

@Scott Я опубликовал весь код. Опять же, вероятно, ужасно смотреть и читать, но я новичок. – ConorReidd

ответ

6
if (a1 && a2 && a3 && a4 == "rgb(255, 0, 0)") 

проверяется a1 как само условие, которое я сомневаюсь что. Если намерение проверить каждое значение против этой строки, это то, что вы хотели бы что-то вроде этого:

if ((a1== "rgb(255, 0, 0)") && (a2== "rgb(255, 0, 0)") && (a3== "rgb(255, 0, 0)") && (a4 == "rgb(255, 0, 0)"))) 

Использование циклов и массивов может быть лучше, чем выписывать кучу подобных линий. Для примера что-то подобное может делать то, что вы хотите без того, чтобы написать все строки, как вы есть:

for (var i=0; i<winningCombinations.length; i++) { 
    var a1=$("."+winningCombinations[i][0]).css("background-color"); 
    var a2=$("."+winningCombinations[i][1]).css("background-color"); 
    var a3=$("."+winningCombinations[i][2]).css("background-color"); 
    var a4=$("."+winningCombinations[i][3]).css("background-color"); 

    if ((a1== "rgb(255, 0, 0)") && (a2== "rgb(255, 0, 0)") && (a3== "rgb(255, 0, 0)") && (a4 == "rgb(255, 0, 0)"))) 
    { 
     // add message here for 4 in a row. 
     break; // this will exit the for loop. 
    } 

} 

я настоятельно рекомендую создать массив, содержащий различные комбинации, которые вы хотите проверить. Рассмотрим что-то вроде этого:

var winningCombinations = new Array(); 
winningCombinations.push({'a1','a2','a3','a4'}); 
winningCombinations.push({'a2','a3,'a4','a5'}); 
.... 

Заметьте, что я изменить цикл, чтобы теперь используют 2-мерный массив в качестве winningCombinations будет иметь 4 столбцов в каждой записи, которые могут быть использованы здесь.

+0

Я бы рекомендовал, чтобы все операторы IF были преобразованы в 2 вложенных цикла. – Scott

+0

Хорошо, я полностью понимаю, спасибо. Не могли бы вы рассказать мне, как они ломаются, когда у меня много условий, и работать только с одним условием. – ConorReidd

+0

@Scott. Я действительно начинаю работать в jQuery, и я не уверен, как я это сделаю, я чувствую, этот вопрос тоже был бы неуместным – ConorReidd

3

Что вы тестируете, если существуют a1, a2, a3, и если цвет фона a4 красный.

Я считаю, что вы хотите проверить, если все они красные. Это было бы:

if (a1 == "rgb(255, 0, 0)" && a2 == "rgb(255, 0, 0)" && a3 == "rgb(255, 0, 0)" && a4 == "rgb(255, 0, 0)") { ... } 

, что вы можете сделать, это построить вспомогательную функцию, где вы передаете в массив объектов и испытания, если их цвет фона такой же. Если это так, он вернет цвет, иначе он вернет NULL.

например.

function testColour(objects){ 
    var colour = null; 
    for (var i = 0;i<objects.length;i++){ 
     if (i == 0){ 
      //set colour from first one 
      colour = objects[i].css("background-color"); 
     else if (objects[i].css("background-color")!=colour){ 
      //check if colour is the same as first. If not, return null 
      return null; 
     } 
    } 
    //all objects are of the same colour, return colour. 
    return colour 
} 

colour = testColour([$(".a1"),$(".a2"),$(".a3"),$(".a4")]) 

if (colour!=null){ 
    //colour wins 
    if (colour=="rgb(255,0,0)"){ 
     alert("Red wins!"); 
    }else{ 
     alert("Yellow wins!"); 
    } 
    break; 
} 

Для упрощения проверки всех из них вы могли бы хотеть рассмотреть вашу сетку в качестве матрицы, а затем использовать матричные операции для проверки четыре подряда

//define array for conversions between letters and numbers 
var nToL = ["a","b","c","d","e","f"]; 
//define direction in which a connect 4 is allowed 
var allowedVectors = [{"x":1,"y":0},{"x":0,"y":1},{"x":1,"y":1}]; 
//for each row 
for (i=0;i<7;i++){ 
    //for each column 
    for (j=0;j<6;j++){ 
     //for each allowed vector 
     for (v=0;v<allowedVectors.length;v++){ 
      var currentVector = allowedVectors[v]; 
      //make sure vector does not go outside grid 
      if (i+currentVector.x*3<7||j+currentVector.y*3<6){ 
       var objectArray = []; 
       //create array of objects to test 
       for (n=0;n<4;n++){ 
        var square = $("."+nToL[j+currentVector.y*n]+(i+1+currentVector.x*n)); 
        objectArray.push(square); 
       } 
       if (testColour(objectArray)!=null){ 
        //colour wins 
        if (colour=="rgb(255,0,0)"){ 
         alert("Red wins!"); 
        }else{ 
         alert("Yellow wins!"); 
        } 
        break; 
       } 
      } 
     } 

    } 

} 
Смежные вопросы