В общем у меня задание - написать игру на JS. Смысл игры:
На странице есть рабочая область 800х550 пикс. Внутри области рандомом
расставляются БЛОКИ - картинки различной ширины и высоты, препятствующие
движению объекта. . В нижней части области, при нажатии на кнопку СТАРТ
появляется ОБЪЕКТ - отдельная картинка. Объект можно перемещать с
помощью клавиш (стрелки). Цель «игры» - переместить объект от нижней
границы до верхней, при этом не задев движущиеся блоки. Если блок задет,
то объект начинает мигать и появляется надмись «game over», а также
появляется кнопка restart. При клике на кнопку «старт» появляется
«окошко» с предложением ввести кол-во блоков, скорость перемещения
объекта.
Вот код игры:
var ball = document.getElementById('ball'); //Получаем объект "Колобок"
var playground = document.getElementById('playground'); //Получаем игровое поле
var enemyground = document.getElementById('enemyground'); //Получем поле передвижения врагов
var info_zone = document.getElementById('info_zone'); //Получем поле вывода сообщений
var attemptContainer = document.getElementById('attemptContainer'); //Получаем контейнер счетчика
var startBtn = document.getElementById('start'); //Получаем кнопку "Старт"
var resetBtn = document.getElementById('reset'); //Получаем кнопку обнуления попытки
var positionXstart = 384; //Стартовая позиция колобка по горизонтали
var positionYstart = 486; //Стартовая позиция колобка по вертикали
var speed = 0; //Скорость колобка
var blocks = 0; //Количество блоков
var globalDeath = 0;
var attempt = 1; //Количество попыток
var en = []; //ID блоков
var speedB = []; //Скорость блоков
var getSpeed; //Переменная скорости колобка
var getBlocks; //Переменная количества блоков
var tempW = []; //Временная переменная ширины блока
var tempH = []; //Временная переменная высоты блока
var tempP = []; //Временная переменная вертикальной позиции блока
var tempS = []; //Временная переменная скорости блока
/* Выводим счетчик */
attemptContainer.innerHTML = 'Attempt: <span id="countAttempts" >' + attempt + '</span>';
var countAttempts = document.getElementById('countAttempts'); //Элемент "Счетчик"
/* Задаем стартовые параметры положения */
ball.style.left = positionXstart;
ball.style.top = positionYstart;
/* Функция запроса скорости и количества блоков */
function startDialog(){
getSpeed = window.prompt("Your speed (Leave input line blank for default value - 2)", "");
if((getSpeed === "") || (getSpeed==null))
getSpeed = 2;
getBlocks = window.prompt("Ammount of enemy blocks (Leave input line blank for default value - 3)", "");
if((getBlocks === "") || (getBlocks==null))
getBlocks = 3;
}
function lowOpacity(){
ball.style.opacity = 0;
}
function hightOpacity(){
ball.style.opacity = 1;
}
lowOpacity();
startDialog();
hightOpacity();
ball.style.visibility = "visible";
speed = parseInt(getSpeed);
blocks = parseInt(getBlocks);
var posiX = positionXstart;
var posiY = positionYstart;
/* Функция счетчика */
function nextAttempt(){
attempt++;
attemptContainer.innerHTML = 'Attempt: <span id="countAttempts" >' + attempt + '</span>';
}
/* Получение случайных величин */
function getRandomH(){ //Высота блока
return parseInt(Math.random() * 60 + 20);
}
function getRandomW(){ //Ширина блока
return parseInt(Math.random() * 170 + 20);
}
function getRandomVerPositition(){ //Вертикальная позиция блока
return parseInt(Math.random() * 20 + 10);
}
function getRandomSpeedB() { //Скорость блока
return parseInt(Math.random() * 5 + 10);
}
/* Отрисовка блоков на поле */
function drawBlocks(){
var i;
var nameOfIteration;
var dPosition = 40;
for(i=0;i<getBlocks;i++){
enemyground.innerHTML += '<div id="en' + i + '"> </div>';
nameOfIteration = 'en' + i;
en[i] = document.getElementById(nameOfIteration);
en[i].style.position = 'relative';
en[i].style.background = '#000';
tempW[i] = getRandomW();
en[i].style.width = tempW[i];
tempH[i] = getRandomH();
en[i].style.height = tempH[i];
dPosition += getRandomVerPositition();
tempP[i] = dPosition;
en[i].style.top = tempP[i];
tempS[i] = getRandomSpeedB();
speedB[i] = tempS[i];
}
}
/* Очистка поля передвижения врагов */
function removeBlocks() {
enemyground.innerHTML = '';
}
function moveBlocks() {
var i = 0;
var nameOfIteration;
for(i=0;i<getBlocks;i++){
enemyground.innerHTML += '<div id="en' + i + '"> </div>';
nameOfIteration = 'en' + i;
en[i] = document.getElementById(nameOfIteration);
en[i].style.position = 'relative';
en[i].style.background = '#000';
en[i].style.width = tempW[i];
en[i].style.height = tempH[i];
en[i].style.top = tempP[i];
//if((posiY<=(tempP[i]+tempH[i]))&&(posiY>=tempP[i])){
// if((posiX>=speedB[i])&&(posiX<=(speedB[i]+tempW[i]))){
// alert(i);
// alert(tempH[i]);
// death();
// }
//}
if(speedB[i] >= 800){
tempS[i] = -tempS[i];
} else if(speedB[i] <= (0 - tempW[i])){
tempS[i] = -tempS[i];
}
en[i].style.left = speedB[i];
speedB[i] = speedB[i] + tempS[i];
}
}
function updateBlocks(){
var j = 0;
if(globalDeath==0){
for(j=0;j<getBlocks;j++){
if((posiY<=(tempP[j]+tempH[j]))&&(posiY>=tempP[j])){
if((posiX>=speedB[j])&&(posiX<=(speedB[j]+tempW[j]))){
alert(j);
alert(tempH[j]);
death();
}
}
}
removeBlocks();
moveBlocks();
window.setTimeout('updateBlocks()', 50);
}
}
/* Очистка инфо-зоны */
function clearInfo(){
info_zone.innerHTML = '';
}
/* Смерть колобка */
function death(){
globalDeath = 1;
removeBlocks();
var mnogo = 999999;
var i = 0;
info_zone.innerHTML = '<h1>Death!</h1>';
for(i=0;i<=mnogo;i++){
if(i%1000>=500){
lowOpacity();
} else {
hightOpacity();
}
}
clearInfo();
}
/* Функция кнопки Старт */
function startF(){
removeBlocks();
nextAttempt();
ball.style.visibility = "none";
ball.style.left = positionXstart;
ball.style.top = positionYstart;
posiX = positionXstart;
posiY = positionYstart;
globalDeath = 0;
if (window.confirm("Do you want to use last settings?")) {
ball.style.visibility = "visible";
removeBlocks();
drawBlocks();
}
else {
startDialog();
speed = parseInt(getSpeed);
blocks = parseInt(getBlocks);
ball.style.visibility = "visible";
removeBlocks();
drawBlocks();
}
clearInfo();
}
/* Функция обнуления попытки */
function resetF(){
ball.style.left = positionXstart;
ball.style.top = positionYstart;
posiX = positionXstart;
posiY = positionYstart;
ball.src = "img/ball.png";
}
/* Победа */
function winGame(){
info_zone.innerHTML = '<h1>Win!</h1>';
ball.style.opacity = 0;
}
/* Функция движения колобка */
function moveBall(evt){
evt = (evt) ? evt : window.event;
if(evt){
if(posiX <= 0) posiX = 0;
if(posiX >= 736) posiX = 736;
if(posiY >= 486) posiY = 486;
if(posiY <= 0) posiY = 0;
if(posiY == 0) winGame();
if(ball&&globalDeath==0){
var code = (evt.charCode)? evt.charCode : evt.keyCode;
//alert(code);
switch(code){
case 37: // left
ball.style.left = (posiX - speed);
posiX = (posiX - speed);
ball.src = "img/ball_l.png";
break;
case 38: // up
ball.style.top = (posiY - speed);
posiY = (posiY - speed);
break;
case 39: // right
ball.style.left = (posiX + speed);
posiX = (posiX + speed);
ball.src = "img/ball.png";
break;
case 40: // down
ball.style.top = (posiY + speed);
posiY = (posiY + speed);
break;
case 114: // R
resetF();
break;
case 115: // S
startF();
break;
}
}
}
}
document.onkeypress = moveBall;
resetBtn.onclick = resetF;
startBtn.onclick = startF;
drawBlocks();
updateBlocks();
Проблема в том, что смерть работает только на 1-ый блок. На остальные он не реагирует. Помогите пожалуйста!
http://ifolder.ru/24034082 Вот папка со всеми картинками и HTML и CSS файликом
