Как сократить мой JS-код, объединив 3 повторяющихся функции в одну общую и применив это к другим вещам, используя параметры? - PullRequest
Новая
       35

Как сократить мой JS-код, объединив 3 повторяющихся функции в одну общую и применив это к другим вещам, используя параметры?

0 голосов
/ 10 июня 2019

Я хочу уменьшить свой код, потому что там слишком много повторяющихся функций. Ждите ваших предложений.

Я уже пытался создать одну функцию, а затем отредактировать ее, применив к другим вещам, просто изменив параметры. Эта функция должна работать одним кликом, но это не так. 

var rock = document.getElementById('rock');
var paper = document.getElementById('paper');
var scissors = document.getElementById('scissors');
rock.addEventListener('click', function() {
    // setting two images
    img1.setAttribute('src', 'img/rock.png');
    var number = Math.ceil(Math.random() * 3);
    if (number == 1) {
        img2.setAttribute('src', 'img/rock.png');
    } else if (number == 2) {
        img2.setAttribute('src', 'img/paper.png');
    } else if (number == 3) {
        img2.setAttribute('src', 'img/scissors.png');
    }
    // analyzing
    if (img1.src == img2.src && img1.src != 'file:///C:/Users/mi/Desktop/Rock,%20paper,%20scissors/img/unphoto.png') {
        winnerTextview.innerHTML = 'Ничья';
        points++;
        pointsTextview.innerHTML = 'очки: ' + points;
        draws++;
    }
    if (img2.src == 'file:///C:/Users/mi/Desktop/Rock,%20paper,%20scissors/img/paper.png') {
        winnerTextview.innerHTML = 'Вы проиграли';
        loses++;
    }
    if (img2.src == 'file:///C:/Users/mi/Desktop/Rock,%20paper,%20scissors/img/scissors.png') {
        winnerTextview.innerHTML = 'Вы выиграли';
        points += 3;
        pointsTextview.innerHTML = 'очки: ' + points;
        wins++;
    }
    matches++;
    // result
    if (matches == 8) {
        document.getElementById('result').style.display = 'flex';
        $('html, body').stop().animate( {scrollTop: $('#result').offset().top}, 777 );
        if (points >= 15) {
            document.getElementById('result_winner').innerHTML = 'Поздравляю, вы выиграли робота!';
            document.getElementById('result_image').setAttribute('src', 'img/goblet.png');
        } else if (points < 15) {
            document.getElementById('result_winner').innerHTML = 'Лошпендус, вы проиграли роботу!';
            document.getElementById('result_image').setAttribute('src', 'img/poop.png');
        }
        document.getElementById('wins').innerHTML = 'Побед: ' + wins + ' (' + (wins / 8 * 100).toFixed(1) + '% от всех матчей)';
        document.getElementById('loses').innerHTML = 'Проигрышей: ' + loses + ' (' + (loses / 8 * 100).toFixed(1) + '%)';
        document.getElementById('draws').innerHTML = 'Ничьих: ' + draws + ' (' + (draws / 8 * 100).toFixed(1) + '%)';
        document.getElementById('all_points').innerHTML = 'Всего очков: ' + points + ' (' + (points / 24 * 100).toFixed(1) + '% от макс. кол-ва очков)';
    }
})

// this just repeating 3 times: with rock, paper and scissors
// the end of the code

Я ожидаю иметь одну функцию и применить ее к своим трем вещам: камень, бумага, ножницы, просто указав некоторые параметры функции. Я также ожидаю, что эти функции будут выполняться щелчком, а не перезагрузкой окна. Если вы не можете этого сделать, предложите свои варианты. Заранее спасибо! **

1 Ответ

0 голосов
/ 10 июня 2019

Я бы взял весь код, который вы имеете внутри rock.addEventListener, и переместил бы его в отдельную функцию, которая будет принимать число или строку в качестве параметра. Таким образом, вы можете просто дать ему любой тип, который нажал, и не создавать дублирующийся код.

...