Вывод изображения на основе номера переменной

Question

Вывод изображения на основе номера переменной

0

Я создаю "игру", где пользователь нажимает на изображение, а число генерируется случайным образом. С помощью этого номера изображение назначается и отображается. По сути игра Rock, Paper, Scissors. Я просто пытаюсь отобразить случайное изображение. Однако я смущен, как перейти к настройке переменной, а затем ее отображению.

Первоначально я попытался создать переменную, которая внутри коммутатора будет выглядеть следующим образом

case 1:
   cpuChoice = <img id="rock" src="rock.jpg" name="rock" width="265" height="250" /> 
   break;

А затем выполните $("#result").html(cpuChoice); (result - div id) Однако мне не повезло с этим. Дальнейшие исследования, похоже, предполагали, что я должен хранить изображения в кеше, и это то, к чему сейчас настроен мой код. Хотя я не верю, что понимаю, как правильно его использовать.

Изображения, которые я использую, хранятся в файле со страницами.
Ниже приведен пример моей текущей страницы javascript.

$(document).ready(function(){
var cpuImage = new Image();
rock.src = 'rock.jpg';
paper.src = 'paper.jpg';
scissors.src = 'scissors.jpg';
lizard.src = 'lizard.jpg';
spock.src = 'spock.jpg';


    $("#paper").click(function(){

        var ranNumberOne = 1 + Math.floor(Math.random() * 5);

    // the switch is for assigning the image based on what number is generated
    switch(ranNumberOne){
        case 1:
            document['rock'].src = rock.jpg;
            break;
        case 2:
            document['paper'].src = paper.jpg;
            break;
        case 3:
            document['scissors'].src = scissors.jpg;
            break;
        case 4:
            document['spock'].src = spock.jpg;
            break;
        case 5:
                document['rock'].src rock.jpg;
            break;

    }
          document.['blank'].src =cpuImage.src;
    });

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

<img id="blank" src="blank.jpg" name="blank" width="265" height="250" />

Я сделал предупреждение, чтобы убедиться, что мои onclicks и генератор случайных чисел работают, какие они есть. Похоже, что моя проблема - просто получить изображение, которое "компьютер выбирает" для показа.

Warg 14 апр. 2014, в 06:11

Источник

Теги:

javascript

jquery

html

photo

3 ответа

1

В честь Шелдона Купера этот FIDDLE может помочь.

JS

$('.clickme').on('click', function(){
  var randimage = Math.floor(Math.random() * 5) + 1;
  $('.putmehere').html('');
  $('.random1').html(randimage);
  $('.holder img#i' + randimage).clone().appendTo('.putmehere');
});

TimSPQR 14 апр. 2014, в 02:43

0

HTML

<div id="container">
    <img id="blank" src="blank.jpg" name="blank" width="265" height="250" />
</div>

JS

$(function () {
  $("#container")
  .attr("data-name", $("img", this).attr("id"))
  .on("click", function (e) {
   var options = ["rock", "paper", "scissors", "lizard", "spock", "blank"];
   var r = (function (n) {
            return options[(n + Math.floor(Math.random() * options.length - n))]
           })(1);
   $("img", this).attr({
            "id": r,
            "name": r,
            "src": r + ".jpg"
   }).parent().attr("data-name", r);
  });
});

jsfiddle http://jsfiddle.net/guest271314/e3EXs/

guest271314 14 апр. 2014, в 07:34

Ещё вопросы

John Rooney · Accepted Answer · 2014-04-14T02-05-00.000Z

ОК. Здесь есть несколько вопросов, все из которых разрешимы. Так...

$(document).ready(function(){
    // You don't need an image object, since you're only
    // determining a string for 'src' and applying it to an existing
    // image object
    var cpuImage = "";
    /* Below you're assigning 'src' properties to objects that don't exist. */
    rock.src = 'rock.jpg';
    paper.src = 'paper.jpg';
    scissors.src = 'scissors.jpg';
    lizard.src = 'lizard.jpg';
    spock.src = 'spock.jpg';
    /* I see what you're trying to do,
    but try going about it a bit differently, example: */
    var imageBank = {
        'rock' : 'rock.jpg',
        'paper' : 'paper.jpg',
        'scissors' : 'scissors.jpg',
        'lizard' : 'lizard.jpg',
        'spock' : 'spock.jpg'
    };

    $("#paper").click(function(){

    var ranNumberOne = 1 + Math.floor(Math.random() * 5);

    // the switch is for assigning the image based on what number is generated
    switch(ranNumberOne){
        // Assign your 'cpuImage' variable to the associated imageBank key
        case 1:
            cpuImage = imageBank['rock'];
            break;
        case 2:
            cpuImage = imageBank['paper'];
            break;
        case 3:
            cpuImage = imageBank['scissors'];
            break;
        case 4:
            cpuImage = imageBank['lizard'];
            break;
        case 5:
            cpuImage = imageBank['spock'];
            break;

    }
    // Old:
    document.['blank'].src =cpuImage.src;
    // JQuery syntax (assuming you have an image with id 'blank')
    // New:
    $("#blank").attr('src',cpuImage);
});

Имейте в виду, что с использованием таких вещей, как dictionary AKA an object as an associative array (который imageBank переменную imageBank) помогает включить в одно удобное для пользователя место больше информации, относящейся к камню, ножницам и т.д. Вы также можете добавить дополнительную информацию, что позволит сэкономить ваше время и код в будущем.

Надеюсь, это поможет и удачи!

Я вижу сейчас. По сути, я создаю массив и использую переключатель, чтобы указать конкретное значение. Большое спасибо! Мне было трудно понять, как это сделать. Я очень ценю это!