Я создаю "игру", где пользователь нажимает на изображение, а число генерируется случайным образом. С помощью этого номера изображение назначается и отображается. По сути игра 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
и генератор случайных чисел работают, какие они есть. Похоже, что моя проблема - просто получить изображение, которое "компьютер выбирает" для показа.
ОК. Здесь есть несколько вопросов, все из которых разрешимы. Так...
$(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
) помогает включить в одно удобное для пользователя место больше информации, относящейся к камню, ножницам и т.д. Вы также можете добавить дополнительную информацию, что позволит сэкономить ваше время и код в будущем.
Надеюсь, это поможет и удачи!
В честь Шелдона Купера этот 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');
});
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);
});
});