Отправка строки / результата из JS на HTML-страницу

0

Я работаю над простой скалой, бумагой, ножницами для игры с HTML + JS.

Вот полные коды (CSS, JS, HTML): http://jsfiddle.net/fJw4R/ (слишком долго, чтобы прошло здесь, я думал). Здесь вы можете увидеть его с фотографиями: http://shinebrightmedia.se/rps/rockpaperscissors.html

Как вы можете видеть, работает.math-module, и когда вы выбираете рок, бумагу или ножницы, компьютер рандомизирует выбор.

Тем не менее, теперь я хочу иметь текстовую строку под компьютером/монитором, и мне интересно, что это самый простой способ сделать это. Я хочу, чтобы он сказал: ВЫ ВЫИГРАЙТЕ! или ВЫ ЛЮБИТЕ!

Я начал с функции, которая выглядит так:

function theWinnerIs(userChoice, computerChoice) {

    if (userChoice === computerChoice ) {
        return 'No winner, it is a draw';
    }

    if ((userChoice === 'rock') && (computerChoice === 'scissor')) {
        return 'human';
    }
    if ((userChoice === 'rock') && (computerChoice === 'paper')) {
        return 'computer';
    }

    if ((userChoice === 'paper') && (computerChoice === 'scissor')) {
        return 'computer';
    }
    if ((userChoice === 'paper') && (computerChoice === 'rock')) {
        return 'human';
    }

    if ((userChoice === 'scissor') && (computerChoice === 'rock')) {
        return 'computer';
    }
    if ((userChoice === 'scissor') && (computerChoice === 'paper')) {
        return 'human';
    }

}

Каков самый простой способ отправить возврат в индексный файл? то есть. ТЫ ПОБЕДИЛ! или ВЫ ЛЮБИТЕ!

Спасибо за любую помощь.

Теги:

2 ответа

2
Лучший ответ

Не нужно использовать этот блок if - здесь очень компактная альтернатива:

var choices = { rock: -1, paper: 0, scissors: 1 };
var score   = choices[userChoice] - choices[computerChoice];
score       = score - (score/2|0) * 3;

... который даст вам -1 если пользователь проиграет раунд, 1 если они выиграют, 0 в случае розыгрыша.

Теперь вы можете просто отправить вывод в любой подготовленный контейнер, заполнив его свойство innerHTML:

var results = {
  '-1': 'YOU LOSE',
   '1': 'YOU WIN',
   '0': 'IT\'S A DRAW'   
};
var resultContainer = document.getElementById('result');
resultContainer.innerHTML = results[score];

Вот небольшая демонстрация, иллюстрирующая обе эти концепции.

Поделиться
  • 0
    Здравствуй! Большое спасибо за вашу помощь, этот фрагмент кода выглядит действительно аккуратно! Я попытался применить это, но игра перестает работать после этого. Я попытался реализовать это в файле .html: <p id = "result"> </ p> внутри div. Это неправильно?
  • 0
    «но игра перестает работать» - что выводит консоль?
Показать ещё 2 комментария
0

Насколько я понимаю, вы хотели бы отобразить некоторый текст в зависимости от результата вашего метода "theWinnerIs". Я бы предложил вам создать div на вашей странице и установить его содержимое с помощью JavaScript. Однако есть множество способов достижения вашей цели.

Поэтому вы хотите добавить div на свою страницу, что-то вроде <div id="output"></div>. Затем вы можете обновить текст следующим образом

var outputElement = document.getElementById("output");
outputElement.innerHTML = theWinnerIs(userChoice, computerChoice);

Здесь обновленная версия вашего кода для перспективы, хотя решение raina77ow намного приятнее.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню