Форум

Blondinka · #1 (**permalink**) 05.03.2015, 00:00

Здравствуйте. У меня, всего, 3 строки кода, но последняя не работает. Код для игры "сапёр" (в зачаточном состоянии). На данном этапе, генерируется случайное число в пределах количества ячеек -> присваивается переменной-> преобразуется в id-> которому присваивается класс bomb (желтый фон). Проблема в том, что фон не меняется (класс не присваивается).

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>

<script>
$(document).ready(function(){
var dangerItem = "\"#" +Math.round(Math.random()*24)+"\"";
alert(dangerItem);//проверка содержания переменной
$(dangerItem).addClass("bomb");
});
</script>

<style>
.bomb{
background-color: yellow;
}
table{
width:300px; 
height: 300px;
}
table, td{
border: 1px solid;
}
</style>

<table>
  <tr>
    <td id="1"></td>
    <td id="2"></td>		
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>		
    <td></td>
  </tr>
  <tr>
    <td id="6"></td>
    <td id="7"></td>		
    <td id="8"></td>
    <td id="9"></td>
    <td id="10"></td>		
    <td id="11"></td>
  </tr>
  <tr>
    <td id="12"></td>
    <td id="13"></td>		
    <td id="14"></td>
    <td id="15"></td>
    <td id="16"></td>		
    <td id="17"></td>
  </tr>
  <tr>
    <td id="19"></td>
    <td id="20"></td>		
    <td id="21"></td>
    <td id="22"></td>
    <td id="23"></td>		
    <td id="24"></td>
  </tr>
</table>

</body>
</html>

Еще, я пыталась привести переменную к строке, но это ничего не изменило.

$(document).ready(function(){
var randomItem = Math.round(Math.random()*24);
var dangerItem = "\"#" + randomItem.toString()+"\"";
alert(dangerItem);//проверка содержания переменной
$(dangerItem).addClass("bomb");
});

Если сделать так

$("#9").addClass("bomb");

то класс присваивается.

Помогите, пожалуйста, найти ошибку.

рони · #2 (**permalink**) 05.03.2015, 00:19

Blondinka,

var dangerItem = "#" +Math.round(Math.random()*24);

Blondinka · #3 (**permalink**) 05.03.2015, 00:27

Спасибо.

рони · #4 (**permalink**) 05.03.2015, 00:33

Blondinka, так правильнее

var dangerItem = "#" +Math.floor(1 + Math.random()*24);

Blondinka · #5 (**permalink**) 06.03.2015, 02:14

Сообщение от рони

Blondinka, так правильнее

var dangerItem = "#" +Math.floor(1 + Math.random()*24);

Почему "1"?

laimas · #6 (**permalink**) 06.03.2015, 03:12

Иначе будет диапазон от 0 ...

Blondinka · #7 (**permalink**) 07.03.2015, 14:33

Я тут развивала игру дальше. Попыталась рефракторить код (только JS), но теперь он не работает.

$(document).ready(function(){
var correctCounter = 0;
getDanger();

var getDanger = function(){
    alert("hi");//Не работает.
    for(var i = 0; i < 4; i++){
	    var danger+i = Math.round(1+Math.random()*24); 
		alert(danger2);//Не работает.
	}
	if(danger1===danger2||danger1===danger3||danger1===danger4||danger2===danger3||danger2===danger4||danger3===danger4){
        getDanger();
    }
}

var dangerItem1 = "#" + danger1;
var dangerItem2 = "#" + danger2;
var dangerItem3 = "#" + danger3;
var dangerItem4 = "#" + danger4;

$(dangerItem1+" ," +dangerItem2+" ," +dangerItem3+" ," +dangerItem4).addClass("bomb");//Присвоить класс bomb.
$("#" + (danger1+1)+" ," +"#" + (danger1-1)+" ," +"#" + (danger1+6)+" ," +"#" + (danger1-6)).addClass("nextToBomb");//Добавить предупреджающий класс (зелёный цвет) ближайшим соседям.
$("#" + (danger2+1)+" ," +"#" + (danger2-1)+" ," +"#" + (danger2+6)+" ," +"#" + (danger2-6)).addClass("nextToBomb");
$("#" + (danger3+1)+" ," +"#" + (danger3-1)+" ," +"#" + (danger3+6)+" ," +"#" + (danger3-6)).addClass("nextToBomb");
$("#" + (danger4+1)+" ," +"#" + (danger4-1)+" ," +"#" + (danger4+6)+" ," +"#" + (danger4-6)).addClass("nextToBomb");

$(".bomb").click(function(){
	$(".bomb").css("background-color","yellow");//Если пользователь кликнул на ячейку с классом bomb, то все такие ячейки поодсветятся желтым
	document.getElementById("result").innerHTML="Try again!";// и выведется текстовое сообщение.
	$("td").not(".bomb").css("background-color","blue");//При клике по ячейке с классом bomb, все ячейки без этого класса становятся синими.
});

$("td").not(".bomb").click(function(){//Если пользователь кликнул на ячейку не с классом bomb, то такая ячейка подсветится синим
	correctCounter++;
	$(this).css("background-color","blue");
	if(correctCounter === 20){alert("You win!");}//Если пользователь 20 раз выбрал правильную ячейку, то он победил.
	document.getElementById("result").innerHTML="Go on!";//а сообщение будет, "продолжай"
});

});

Даже, если написать

body onload="getDanger()"

- не работает.

Это происходит со всеми циклами:

for(var j = 0; j < 4; j++){
    var dangerItem+j = "#" + danger+j;
}

А этот код https://github.com/VaAlina/saper/blob/master/index.html работает.
Кто-нибудь подскажет, почему функция getDanger() и последний цикл не работают?

Blondinka · #8 (**permalink**) 10.03.2015, 02:09

Знаю. Не работает из-за динамического присваивания переменной.

var dangerItem+j = "#" + danger+j;

Нужно использовать массив.

Blondinka · #9 (**permalink**) 10.03.2015, 23:25

Отрефракторила код. Надеюсь, меня не забанят за то, что общаюсь сама с собой, но мне этот код показался красивым, поэтому решила ~~испортить себе настроение~~ его опубликовать.

$(document).ready(function(){
var correctCounter = 0;
var danger = [];
var dangerItem = [];

for(var j =0; j < 4; j++){
    danger.push(Math.round(1+Math.random()*36));
    dangerItem.push("#" + danger[j]);

    $(dangerItem[j]).addClass("bomb");
	$("#" + (danger[j]+1)+" ," +"#" + (danger[j]-1)+" ," +"#" + (danger[j]+6)+" ," +"#" + (danger[j]-6)).addClass("nextToBomb");
	$("#" + (danger[j]+5)+" ," +"#" + (danger[j]-5)+" ," +"#" + (danger[j]+7)+" ," +"#" + (danger[j]-7)).addClass("nextToBomb");
}

$(".bomb").click(function(){
$(".bomb").css("background-color","yellow");
document.getElementById("result").innerHTML="Try again!";
$("td").not(".bomb").css("background-color","blue");
});
$("td").not(".bomb").click(function(){
correctCounter++;
$(this).css("background-color","blue");
if(correctCounter === 20){alert("You win!");}
document.getElementById("result").innerHTML="Go on!";
});
});

Форум

Справочник

Discord чат

Курсы javascript