Проект. Камень Ножницы Бумага

@HeadeR555 · Регистрация: 26.06.2013

Студворк — интернет-сервис помощи студентам

Просьба помочь разобраться, не знаю как сделать дальше с JQuery чтобы заполнялся лог ( т.е все события, player: rock AI: paper и т.д ) Нужно чтобы при нажатии на кнопку менялся src картинки (вместо знака вопроса ).
index.html:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html>
    <head>
        <title>Rock Paper Scissors</title>
        <meta charset="utf-8">
        <link href="styles/style.css" rel="stylesheet" type="text/css">
        <script src="scripts/jquery-3.1.1.min.js"></script>
    </head>
    <header>
        <h1>Rock, Paper and Scissors</h1>
        <h2>Player vs Computer</h2>
    </header>
    <body>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div id="question">
            <br>
            <br>
            <br>
            <h1>Are you ready to play ?</h1>
            <br>
            <br>
            <button id="StartButton" onclick = "opengame()">Start Game</button>
            <button id="block">I'm not ready yet</button>
        </div>
        <div id="place">
            <h1>Make your choice !</h1>
            <div id="buttons">
                <button class="option" id="rock"><input type="image" src="https://www.cyberforum.ru/images/rockRight.png" /></button>
                <button class="option" id="paper"><input type="image" src="https://www.cyberforum.ru/images/paperRight.png" /></button>
                <button class="option" id="scissors"><input type="image" src="https://www.cyberforum.ru/images/scissorsRight.png" /></button>
                <button id="resetButton">Reset</button>
                <br>
                <br>
                <br>
                <br>
            </div>
            <div class="board">
                <img class="player" src="https://www.cyberforum.ru/images/question.gif" id="playerquestion">
                <img src="https://www.cyberforum.ru/images/player.png" id="pcicon">
            </div>
            <div class="board">
                <table class = "results">
                        <tr>
                            <td id="titleofwins"> WINS </td>
                            <td id="titleofties"> TIES </td>
                            <td id="titleoflossess"> LOSSESS </td>
                        </tr>
                        <tr>
                            <td id="wins"> 0 </td>
                            <td id="ties"> 0 </td>
                            <td id="loses"> 0 </td> 
                        </tr>
                </table>
            </div>
            <div class="board">
                <img class="pc" src="https://www.cyberforum.ru/images/question.gif" id="pcquestion">
                <img src="https://www.cyberforum.ru/images/pc.png"
                id="playericon">
            </div>
            <div id="winner">
                    <p>Let's see, can a mere human beat me ?</p>
            </div>
            <div id="log">
                <p>Let's see logs</p>
                <p>Let's see logs</p>
                <p>Let's see logs</p>
                <p>Let's see logs</p>
                <p>Let's see logs</p>
            </div>
        </div>
        <footer>
            <h2>Denis Danilin</h2>
            <h2>154816IABB31</h2>
        </footer>
        <script src="scripts/app.js"></script>
    </body>
</html>

script:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
function ComputerMove() {
    var randomNumber = Math.random();
    if (randomNumber < 0.33) {
        $("#pcquestion").attr('src', images2[0]);
        return "rock";
    } else if (randomNumber < 0.66) {
        $("#pcquestion").attr('src', images2[1]);
        return "paper";
    } else {
        $("#pcquestion").attr('src', images2[2]);
        return "scissors";
    }
}
 
function getComputerMove() {
    
    var randomNumber = Math.random();
    if (randomNumber < 0.33) {
        return "rock";
    } else if (randomNumber < 0.66) {
        return "paper";
    } else {
        return "scissors";
    }
}
 
function getWinner(playerMove,ComputerMove) {
    var winner;
    
    if (playerMove===ComputerMove){
        winner = 'tie';
    }
    else if (playerMove==="rock") {
        if(ComputerMove==="paper"){
            winner = "computer";
        } else {
            winner = "player";
        }
    }
    else if (playerMove==="paper") {
        if (ComputerMove==="scissors") {
            winner = "computer";
        } else {
            winner = "player";
        }
    }
    else if (playerMove==="scissors") {
        if (ComputerMove==="rock") {
            winner = "computer";
        } else {
            winner = "player";
        }
    } else {
        winner = "error";
    }
 
    return winner;
}
 
function playOnce(playerMove, ComputerMove) {
    var winner = getWinner(playerMove, ComputerMove);
    
    winner = getWinner(playerMove, ComputerMove);
    
    
    if(winner==="player" || winner==="computer") {
        $('#winner').html("<p>" + winner.toUpperCase() + "won this round !" + "</p>");
    } else {
        $('#winner').html("<p>It's a TIE!</p>");
    }
    
    return winner;
    
}
 
var images = ["https://www.cyberforum.ru/images/rockLeft.png", "https://www.cyberforum.ru/images/paperLeft.png", "https://www.cyberforum.ru/images/scissorsLeft.png"];
var images2 = ["https://www.cyberforum.ru/images/rockRight.png", "https://www.cyberforum.ru/images/paperRight.png", "https://www.cyberforum.ru/images/scissorsRight.png"];
 
$(document).ready(function() {
    $("#place").hide();
    $("#StartButton").click(function() {
        $("#question").hide();
        $("#place").show();
    })
    
    var playerScore = 0;
    var computerScore = 0;
    var tieScore = 0;
    
    $('.option').click(function() {
        var playerMove = $('.option input').attr('src');
        var computerMove = getComputerMove();
        var winner = playOnce(playerMove, computerMove);
        
        if (winner==="tie") {
            tieScore += 1;
            $('#playerquestion').attr('src', playerMove);
        } else {
            // To be continued
        }
    })
});

@vettel · 19.11.2016, 15:29

Сообщение от HeadeR555

Нужно чтобы при нажатии на кнопку менялся src картинки

Вы слишком много кода показываете, разбираться в нем не хочется. Попробуйте выделить из него то, что вам нужно и что не получается.
Касательно вопроса в целом - на jQuery это реализуется как-то так:

JavaScript
1
2
3
$('нужный button').click(function() {
    $('нужная картинка').attr('src', 'нужный src');
});

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .