Выбрать спрайт на основе расчета

У меня есть файл PNG с 30 спрайтами. Я преобразовал его в CSS с помощью http://www.spritecow.com. Моя проблема в том, что мой JavaScript генерирует случайное число от 1 до 30. Как мне выбрать правильный спрайт из этого числа?

.spriteBigPart {
    display: inline-block;
    background: url('../img/parts.png') no-repeat;
}
.part_1  {
    background: url('../img/parts.png') no-repeat -26px -20px;
    width: 121px;
    height: 121px;
}
.part_2  {
    background: url('../img/parts.png') no-repeat -187px -21px;
    width: 121px;
    height: 121px;
}
.part_3  {
    background: url('../img/parts.png') no-repeat -345px -20px;
    width: 121px;
    height: 121px;
}
.part_4  {
    background: url('../img/parts.png') no-repeat -504px -21px;
    width: 121px;
    height: 121px;
}
.part_5  {
    background: url('../img/parts.png') no-repeat -663px -20px;
    width: 121px;
    height: 121px;
}
.part_6  { 
    background: url('../img/parts.png') no-repeat -822px -20px;
    width: 121px;
    height: 121px;
}
.part_7  {
    background: url('../img/parts.png') no-repeat -981px -21px;
    width: 121px;
    height: 121px;
}
.part_8  {
    background: url('../img/parts.png') no-repeat -1140px -20px;
    width: 121px;
    height: 121px;
}
.part_9  {
    background: url('../img/parts.png') no-repeat -1299px -21px;
    width: 121px;
    height: 121px;
}
.part_10 {
    background: url('../img/parts.png') no-repeat -1458px -21px;
    width: 121px;
    height: 121px;
}
.part_11 {
    background: url('../img/parts.png') no-repeat -1616px -20px;
    width: 121px;
    height: 121px;
}
.part_12 {
    background: url('../img/parts.png') no-repeat -1775px -21px;
    width: 121px;
    height: 121px;
}
.part_13 {
    background: url('../img/parts.png') no-repeat -1935px -21px;
    width: 121px;
    height: 121px;
}
.part_14 {
    background: url('../img/parts.png') no-repeat -2094px -20px;
    width: 121px;
    height: 121px;
}
.part_15 {
    background: url('../img/parts.png') no-repeat -2253px -21px;
    width: 121px;
    height: 121px;
}
.part_16 {
    background: url('../img/parts.png') no-repeat -2412px -21px;
    width: 121px;
    height: 121px;
}
.part_17 {
    background: url('../img/parts.png') no-repeat -2570px -19px;
    width: 121px;
    height: 121px;
}
.part_19 {
    background: url('../img/parts.png') no-repeat -2729px -20px;
    width: 121px;
    height: 121px;
}
.part_19 {
    background: url('../img/parts.png') no-repeat -2888px -21px;
    width: 121px;
    height: 121px;
}
.part_20 {
    background: url('../img/parts.png') no-repeat -3047px -20px;
    width: 121px;
    height: 121px;
}
.part_21 {
    background: url('../img/parts.png') no-repeat -3205px -20px;
    width: 121px;
    height: 121px;
}
.part_22 {
    background: url('../img/parts.png') no-repeat -3205px -20px;
    width: 121px;
    height: 121px;
}
.part_23 {
    background: url('../img/parts.png') no-repeat -3524px -20px;
    width: 121px;
    height: 121px;
}
.part_24 {
    background: url('../img/parts.png') no-repeat -3683px -20px;
    width: 121px;
    height: 121px;
}
.part_25 {
    background: url('../img/parts.png') no-repeat -3841px -20px;
    width: 121px;
    height: 121px;
}
.part_26 {
    background: url('../img/parts.png') no-repeat -4001px -19px;
    width: 121px;
    height: 121px;
}
.part_27 {
    background: url('../img/parts.png') no-repeat -4160px -20px;
    width: 121px;
    height: 121px;
}
.part_28 {
    background: url('../img/parts.png') no-repeat -4318px -20px;
    width: 121px;
    height: 121px;
}
.part_29 {
    background: url('../img/parts.png') no-repeat -4478px -20px;
    width: 121px;
    height: 121px;
}
.part_30 {
    background: url('../img/parts.png') no-repeat -4637px -20px;
    width: 121px;
    height: 121px;
}

<div class = "row">
  <span class = "spriteBigPart **random_number_between_1_and_30**"></span>
</div>

javascript html css

24.03.2018 20:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Я бы сделал что-то вроде этого :

var span = document.querySelector(".spriteBigPart");
span.setAttribute("class", "spriteBigPart part_" + random);

Я использовал Sprite Cow, чтобы помочь мне написать код ниже. Это действительно потрясающий инструмент, но я думаю, что сгенерированный код не обязательно подходит для каждой ситуации, вам может потребоваться изменить его в зависимости от вашего выбора реализации :-)

var fps = 4;
var head = 0;
var fpsEl = document.getElementById("fps");
var debugEl = document.getElementById("debug");
var marioEl = document.getElementById("mario");

var anims = {
  hammerWL: [0, 2, 1, 3], // walk left
  hammerWR: [7, 5, 6, 4]  // walk right
};

var anim = [].concat(
  anims.hammerWL, // L
  anims.hammerWL, // L
  anims.hammerWR, // R
  anims.hammerWL, // L
  anims.hammerWR  // R
);

fpsEl.value = fps;
fpsEl.onclick = updateFps;
fpsEl.onkeyup = updateFps;
fpsEl.onchange = updateFps;
debug.onclick = toggleDebug;
debug.onchange = toggleDebug;

function updateFps () {
  fps = parseInt(this.value, 10) || 0;
}

function updateFrame (frame) {
  marioEl.setAttribute("class", frame);
}

function toggleDebug () {
  var c = this.checked ? "debug" : "";
  document.body.setAttribute("class", c);
}

// !function loop () { ... }();
// is a shortcut for
// loop(); function loop () { ... }
// declared and called at the same time

!function loop () {
  if (fps === 0) {
    setTimeout(loop, fps);
  } else {
    // head = 0, 1, 2, ..., 0, ...
    head = (head + 1) % anim.length;
    updateFrame("frame_" + anim[head]);
    setTimeout(loop, 1000 / fps);
  }
}();

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  background: black;
}
#controls {
  background: #ddd;
  line-height: 40px;
  padding: 0 .5em;
  height: 40px;
}
#fps {
  width: 50px;
}
#stage {
  position: relative;
  background: yellow;
  border: 10px solid black;
  height: calc(100% - 60px);
  width: calc(100% - 20px);
}

/* sprite */

#mario {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 0;
  width: 0;
}
#mario img {
  display: block;
  position: absolute; 
  background: url(https://i.stack.imgur.com/yScim.png);
}
.debug #mario img {
  background-color: #0090ff;
}

/* frames / hammer walk left */

#mario.frame_0 img {
  background-position: -4px -10px;
  width: 26px; height: 58px;
  left: -13px; bottom: 0;
}
#mario.frame_1 img {
  background-position: -70px -24px;
  width: 52px;  height: 32px;
  left: -37px; bottom: 0;
}
#mario.frame_2 img {
  background-position: -162px -10px;
  width: 30px; height: 58px;
  left: -15px; bottom: 0;
}
#mario.frame_3 img {
  background-position: -232px -24px;
  width: 50px; height: 32px;
  left: -37px; bottom: 0;
}

/* frames / hammer walk right */

#mario.frame_4 img {
  background-position: -310px -24px;
  width: 50px; height: 32px;
  right: -37px; bottom: 0;
}
#mario.frame_5 img {
  background-position: -400px -10px;
  width: 30px; height: 58px;
  right: -15px; bottom: 0;
}
#mario.frame_6 img {
  background-position: -470px -24px;
  width: 52px; height: 32px;
  right: -37px; bottom: 0;
}
#mario.frame_7 img {
  background-position: -562px -10px;
  width: 26px; height: 58px;
  right: -13px; bottom: 0;
}

<div id = "controls">
  <label>FPS <input id = "fps" type = "number" min = "0" max = "12"></label>
  <label>Debug <input id = "debug" type = "checkbox"></label>
</div>
<div id = "stage">
  <div id = "mario">
    <img src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  </div>
</div>

mario

Ух ты! Спасибо, Лист, немного больше, чем я ожидал. Я сократил его, чтобы получить как можно более простой вариант, но я не понимаю, что означает функция! И зачем ей () в конце функции. функция updateFrame (кадр) {document.getElementById ("марио"). setAttribute ("класс", фрейм)}! function () {updateFrame ("frame_" + "2"); } ();

— 25.03.2018 19:29

@SimonMarkham Объявление функции: function f(){...}. Вызов функции: f();. Самозапускающаяся функция: !function f(){...}();. То же, что: (function f(){...})();. Уловка ниндзя B-)

— 25.03.2018 19:31

@SimonMarkham Вы не можете написать function f(){...}();, "Uncaught SyntaxError: Unexpected token)", но по какой-то причине с ведущим ! он работает: - / Это, вероятно, связано с правилами приоритета операторов, но я не готов записать больше нейронов по этой теме :-D

— 25.03.2018 19:36

24.03.2018 22:28