Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.02.2017, 17:37   #1
DanDiablo
Пользователь
 
Аватар для DanDiablo
 
Регистрация: 25.08.2015
Сообщений: 55
По умолчанию Звук по событию. Не нажатие кнопки!

Доброго времени суток, дамы и господа!

Я вот опять со своей игрой. Точнее, она по книге сделана, но вот решил улучшить малость.

Короче, так:

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

Внимание, вопрос!

Можно ли проигрывать соответствующий звук?
То есть, если кораблик в клетке есть, то ставиться быэкграунд взрывчика и что бы звучало что то вроде "бабах!".
А если кораблика в ячейке нет, то ставиться бэкграунд промах и что бы звучало вроде "бульк".

Можно ли так сделать на JavaScript или еще как то?

Если можно, по покажите пример, пожалуйста, с кодом и комментариями (желательно), я рассмотрю.

JavaScript код:

Код:
var view = {
    /*показ сообщений*/
  displayMessage:function (msg) {
    var messageArea = document.getElementById('messageArea');
    messageArea.innerHTML = msg;
  },
    /*показ попаданий*/
   displayHit:function (location) {
    var cell = document.getElementById(location);
    cell.setAttribute('class', 'hit');
   },
    /*показ промахов*/
    displayMiss:function (location) {
     var cell = document.getElementById(location);
     cell.setAttribute('class', 'miss');
    }

};

/*Модель (состояние)*/

/*
 boardSize: размер сетки игро-
 вого поля
 numShips: количество кораблей
 в игре.
 ships: позиции кораблей
 и координаты попаданий
 shipsSunk: количество потоп-
 ленных кораблей.
 shipLength: длина каждого
 корабля (в клетках).
 fire: метод для выполнения выстрела и проверки
 результата (промах или попадание)
 */

var model = {
    boardSize:7,
    numShips:3,
    shipsSunk:0,
    shipLength:3,

    ships:[{locations:[0, 0, 0], hits:['', '', '']},
           {locations:[0, 0, 0], hits:['', '', '']},
           {locations:[0, 0, 0], hits:['', '', '']}],

    /*Проверка на попадание выстрела*/
    
    fire: function (guess) {
        for (var i = 0; i < this.numShips; i++){
            var ship = this.ships[i];
            var index = ship.locations.indexOf(guess);

            if (ship.hits[index] === "hit") {
                alert("Ой, Вы уже среляли в эту клетку!");
                view.displayMessage("Ой, Вы уже стреляли в эту клетку!");                return true;
            } else if(index >= 0){
              ship.hits[index] = 'hit';
              view.displayHit(guess);
              view.displayMessage('Попадание!');
              if (this.isSunk(ship)){
                  view.displayMessage('Корабль потоплен!')
                  this.shipsSunk++;
              }
              return true;
            }
        }
        view.displayMiss(guess);
        view.displayMessage('Промах!');
        return false;
    },

    /*Проверка потоплен ли корабль*/

    isSunk: function (ship) {
        for (var i = 0; i < this.shipLength; i++){
      if (ship.hits[i] !== 'hit'){
          return false;
        }
      }
      return true;
    },

    /*Добавление кораблей случайным образом*/

generateShipLocations:function () {
    var locations;
    for (var i = 0; i < this.numShips; i++){
        do{
            locations = this.generateShip();
        } while (this.collision(locations));
        this.ships[i].locations = locations;
    }
},
    /*Генерирование позиций*/

generateShip:function () {
    var direction = Math.floor(Math.random() * 2);
    var row, col;
    if (direction === 1){
        row = Math.floor(Math.random() * this.boardSize);
        col = Math.floor(Math.random() * (this.boardSize - this.shipLength));
        }else {
        row = Math.floor(Math.random() * (this.boardSize - this.shipLength));
        col = Math.floor(Math.random() * this.boardSize);
        }

    var newShipLocations = [];
    for (var i = 0; i < this.shipLength; i++){
        if (direction === 1){
            newShipLocations.push(row + '' + (col + i));
        }else {
            newShipLocations.push((row + i) + '' + col);
        }
    }
    return newShipLocations;
 },

    /*Проверка на перекрытие*/

collision:function (locations) {
    for (var i = 0; i < this.numShips; i++){
        var ship = model.ships[i];
        for (var j = 0; j < locations.length; j++){
            if (ship.locations.indexOf(locations[j]) >= 0){
                return true;
            }
        }
    }
    return false;
 }

};

/*Контроллер (логика)*/

/*
 guesses: количество выстрелов.
 processGuess: обработка координат
 выстрела и передача их модели. Про-
 веряет условие завершения игры.
  */

var controller ={
  guesses:0,
  processGuess:function (guess) {
    var location = parseGuess(guess);
    if(location){
        this.guesses++;
        var hit = model.fire(location);
        if (hit && model.shipsSunk === model.numShips){
            view.displayMessage('Игра окончина. Вы потопили все корабли за ' + this.guesses + ' выстрелов.');
            gameOver();

        }
    }
      
  }
};
/*Проверка ввода координат игроком*/
function parseGuess(guess) {
    var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
    if (guess === null || guess.length !==2){
        alert('Пожалуйста, введите букву и цифру, соответствующие игровому полю.')
    }else {
        firstChar = guess.charAt(0);
        var row = alphabet.indexOf(firstChar);
        var column = guess.charAt(1);
        if(isNaN(row) || isNaN(column)){
            alert('Пожалуйста, введите корректные значения координат игрового поля');
        }else if (row < 0 || row >= model.boardSize || column < 0 || column >= model.boardSize){
            alert('Извните, Вы вышли за рамки игрового поля.');
        }else {
            return row + column;
        }
    }
    return null;
}


/*Получение координат от игрока*/

function init() {
    var fireButton = document.getElementById('fireButton');
    fireButton.onclick = handleFireButton;
    var guessInput = document.getElementById('guessInput');
    guessInput.onkeypress = handleKeyPress;
    model.generateShipLocations();
}

function handleKeyPress(e) {
    var fireButton = document.getElementById('fireButton');
    if(e.keyCode === 13){
        fireButton.onclick();
        return false;
    }
}

/*Получение данных из поля*/
function handleFireButton() {
   var guessInput = document.getElementById('guessInput');
   var guess = guessInput.value.toUpperCase();
   controller.processGuess(guess);
   guessInput.value = '';

}


/*Конец игры*/
function gameOver() {
    document.getElementById('guessInput').setAttribute('placeholder','Игра окончена!');
    document.getElementById('fireButton').setAttribute('disabled', 'disabled');
    document.getElementById('guessInput').setAttribute('disabled', 'disabled');
    jQuery('#victory').show("slow");
    return true
};
Блин, честно не нашел кнопочки "спойлер", она бы тут не помешала.

Комментарии ставил для себя, что бы не запутаться по неопытности.

Благодарю за внимание!
DanDiablo вне форума Ответить с цитированием
Старый 22.02.2017, 20:33   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

1. Создаешь элемент <audio>, не важно в html или js.
2. При обращении к нему прям в консоле можно посмотреть че он умеет, а именно проиграть, переместиться на нужную отметку, проиграть снова, пауза итд.
Дальше проблемы только с поддержкой браузеров: Ишак до 9 версии не умеет в тег аудио, но у него есть аттрибут bgsound для <body>; Сафари, помнится, не может в несколько треков (не знаю по версиям, может в новых починили), то есть придется делать спрайт (да оно и для загрузки хорошо).

П.С.
Цитата:
Сообщение от DanDiablo Посмотреть сообщение
А можно не хамить? Я же культурно за помощь обратился.
Дак хами в ответ, че как не свой?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 23.02.2017, 06:27   #3
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Дак хами в ответ, че как не свой?
Не хами и не ЗаХамнел будешь,

Или,
Кто с хамлом придет, тот от хамла и падет!

<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 23.02.2017, 08:24   #4
DanDiablo
Пользователь
 
Аватар для DanDiablo
 
Регистрация: 25.08.2015
Сообщений: 55
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
1. Создаешь элемент <audio>, не важно в html или js.
2. При обращении к нему прям в консоле можно посмотреть че он умеет, а именно проиграть, переместиться на нужную отметку, проиграть снова, пауза итд.
Дальше проблемы только с поддержкой браузеров: Ишак до 9 версии не умеет в тег аудио, но у него есть аттрибут bgsound для <body>; Сафари, помнится, не может в несколько треков (не знаю по версиям, может в новых починили), то есть придется делать спрайт (да оно и для загрузки хорошо).
Спасибо, буду экспериментировать!

Цитата:
Сообщение от Naive Посмотреть сообщение
Дак хами в ответ, че как не свой?
Этак мы далеко уйдем от темы разговора.
DanDiablo вне форума Ответить с цитированием
Старый 25.02.2017, 20:09   #5
DanDiablo
Пользователь
 
Аватар для DanDiablo
 
Регистрация: 25.08.2015
Сообщений: 55
По умолчанию

Сделал! Но не чистым js, а плагином. До js как дорасту, так попробую переделать.
Если кому интересно будет, то плагин Ion.Sound
DanDiablo вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нажатие кнопки megostudent Общие вопросы Delphi 9 26.09.2011 11:11
While (нажатие кнопки) azhell Общие вопросы Delphi 1 09.08.2011 23:23
нажатие кнопки beygul Помощь студентам 2 30.01.2010 21:34
На нажатие кнопки access6472043 Microsoft Office Access 2 29.11.2009 15:08
нажатие кнопки xakkkkker Работа с сетью в Delphi 1 20.11.2008 01:08