Форум

Игорь Бирюков · #1 (**permalink**) 08.02.2013, 17:34

Всем привет. Я начинающий в яваскрипт, прочитал учебник здешний, посмотрел видеокурс, начитался статей и решил попробовать сделать простую игру. Суть такова: поле 10х10, каждую секунду появляется квадрат и если нажимаешь на него, то тебе добавляется один балл, потом переменная передается через Get-запрос php, и вносится в бд.
Я ввиду своих ограниченных знаний решил сделать вот так: сделал 10 div-ов каждому задал идентификатор от 0 до 9, ну и вот код такой наваял:

$('.but').click(function(){//при нажатии кнопки старт начинаем игру
setTimeout(timer,6000);//
	function timer(){
 	var obj=document.getElementById('timer_inp');//выбираем элемент где находится счетчик
 	obj.innerHTML--;
	var count=0;
	var random=randomNumber (0,9);// выбираем рандомное число от 0 до 9
	var idName='#'+random;
	$(idName).animate({'border':'1px solid #000000'},1000,function(){$(idName).css('border':'0px solid #000000')})
		$(idName).click(function(){count++});
			if(obj.innerHTML==0){alert('Время вышло!');setTimeout(function(/*window.location*/){},1000);}
			else{
			setTimeout(timer,1000);
			}
		}
	}
);
function randomNumber (m,n)
{
  m = parseInt(m);
  n = parseInt(n);
  return Math.floor( Math.random() * (n - m + 1) ) + m;
}

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

рони · #2 (**permalink**) 08.02.2013, 19:54

Налетай! проверь свою реакцию набери 10 из 10 точных кликов!!! У Вас только полсекунды на клик.

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<style type="text/css">
td{
  width: 50px;
  height: 50px;
  background-color: #FF00FF;
}
.activ{
  background-color: #00FFFF;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" type="text/javascript">
$(function () {
    var mytable = $('<table/>', {
        'class': 'mytable'
    })
    var a = new Array(10);
    $.each(a, function () {
        var Cell = $('<tr/>');
        $.each(a, function () {
            Cell.append($('<td/>'));
        });
        $(mytable).append(Cell);
    });
    $('.content').append(mytable);
    $('.mytable td').click(function () {
        if (!n) return;
        $(this).removeClass('activ')
    });
    var n = 0,
        timer;
    $('.but').click(function () {
        if (n) return;
        $('.mytable td').removeClass('activ')
        n = 10; //сколько кликов
        show()
    });

    function show() {
        window.clearTimeout(timer)
        var k = $('.mytable td:not(.activ)').length;
        if (n == 0) {
            k = 10 - $('.mytable td.activ').length;
            alert(k + '/10');
            return
        }
        k =  Math.round((k-1)*Math.random())
        $('.mytable td:not(.activ)').eq(k).addClass('activ');
        n--;
        timer = setTimeout(show, 500);
    }
});
</script>
</head>
<body>
<div class="content" >
</div>
<input type="button" name="" value="start" class="but" />
</body>
</html>

kala42 · #3 (**permalink**) 14.02.2013, 15:56

Только 8 из 10 получается набрать))) Интересная игрушка)

Форум

Справочник

Discord чат

Курсы javascript