Игра на javascript
Всем привет. Я начинающий в яваскрипт, прочитал учебник здешний, посмотрел видеокурс, начитался статей и решил попробовать сделать простую игру. Суть такова: поле 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;
}
Подскажите пожалуйста, может как-то лучше можно сделать и возможно я вообще что-то абсурдное сделал, в яваскрипте не силен, по верхам сейчас набрался и что в голову пришло так и сделал. |
Налетай! проверь свою реакцию набери 10 из 10 точных кликов!!! У Вас только полсекунды на клик. :dance:
<!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>
|
Только 8 из 10 получается набрать))) Интересная игрушка)
|
| Часовой пояс GMT +3, время: 22:21. |