Sprite Image, как конфигуратор автомобиля

157

10 февраля 2018, 22:56

Я делаю личный проект, в котором пользователь может настроить внешний вид автомобиля в Интернете.
Основа проста: 3 кнопки (Change Color - Change View - Lights On/Off) и следующее изображение спрайта:

Как вы можете видеть, пользователь может выбирать между 3 цветами, изменять вид и включать свет.
Пока все хорошо, проблема заключается в том, чтобы сделать это реально выполнимо.

Ниже код, который у меня есть до сих пор:

$(document).ready(function(){ 
    $("#color").click(function(){ 
        $('#box').toggleClass('white-front-off'); 
    }); 
    $("#view").click(function(){ 
        $('#box').toggleClass('red-back-off'); 
    }); 
    $("#lights").click(function(){ 
        $('#box').toggleClass('red-front-on'); 
    }); 
});

#box{ 
  width: 113px; 
  height: 85px; 
  background-image: url(https://i.stack.imgur.com/WNsgN.jpg); 
} 
 
.red-front-off { 
  background-position: 0px 0px; 
} 
 
.red-back-off { 
  background-position: -226px 0px; 
} 
 
.red-front-on { 
  background-position: -113px 0px; 
} 
 
.red-back-on { 
  background-position: -339px 0px; 
} 
 
.white-front-off { 
  background-position: 0px -85px; 
} 
 
.white-back-off { 
  background-position: -226px -85px; 
} 
 
.white-front-on { 
  background-position: -113px -85px; 
} 
 
.white-back-on { 
  background-position: -339px -85px; 
} 
 
.black-front-off { 
  background-position: 0px -85px; 
} 
 
.black-back-off { 
  background-position: -226px -85px; 
} 
 
.black-front-on { 
  background-position: -113px -85px; 
} 
 
.black-back-on { 
  background-position: -339px -85px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="box" class="red-front-off"></div> 
<button id="color">Change Color</button> 
<button id="view">Change View</button> 
<button id="lights">Lights On/Off</button>

Я новичок в спрайтах и JQuery, поэтому сделал все возможное, что смог, при этом возникли проблемы:

Перечень проблем:

Я не знаю, как добавить значения в JQuery (представьте, что красный цвет равен 0, белый - 1, а черный - 2, я знаю, как переключаться между 0 и 1, но я не знаю, как достичь 2) В фрагменте кода вы видите, что я не вижу черный цвет.
Если пользователь нажимает change color, а последний цвет (в данном случае черный) находится на экране, то как-то спрайт должен начинаться снова с красного цвета (это может быть возможно с повторением фона).
Если пользователь нажимает Lights On/Off независимо от цвета или вида, свет должен включаться / выключаться в правильном положении.

Источник

Answer 1

Решение #1

Я наткнулся на этот вопрос и просто не cмог удержаться, чтобы сказать вам: не нужно возиться с огромным количеством CSS и JS ...

все, что вам нужно, это математика

Если вы знаете, что один спрайт имеет размеры - 113 × 85 px в сетке 4 × 3:

var w = 113, h = 85, x = 0, y = 0; // Sprite size and position 
 
$("#color, #view, #lights").click(function() { 
 
  if (this.id === "color")  y -= h; 
  if (this.id === "view")   x -= w * 2; 
  if (this.id === "lights") x -= (this.dataset.IO ^= 1) ? w : -w; 
 
  x %= w * 4; // Reset to 0 if out of bounds so we can loop 
  y %= h * 3; 
 
  $("#box").css({backgroundPosition: x +'px '+ y +'px'}); 
 
});

#box { 
  width: 113px; 
  height: 85px; 
  background: url('https://i.stack.imgur.com/WNsgN.jpg') no-repeat; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="box"></div> 
<button id="color">Change Color</button> 
<button id="view">Change View</button> 
<button id="lights">Lights On/Off</button>

Источник ответа: Control Complex Sprite Image as a car Configurator @Roko C. Buljan

Answer 2

Прим. переводчика

Привел это решение, хотя оно не такое лаконичное и красивое как решение #1 в другом ответе, но оно в частности повторяет ход логики автора вопроса и наличие нескольких решений, разных подходов помогают лучше разобраться в вопросе.

Решение #2

Давайте сделаем позиционирование и используем его, чтобы выглядело, как должно быть. (Кстати, ваш CSS для черного цвета был выключен в направлении Y)

var colorMap = ['red', 'white', 'black']; 
function renderState(state){ 
  var classString = colorMap[state.color]; 
  classString += (state.front) ? '-front' : '-back'; 
  classString += (state.lights) ? '-on' : '-off'; 
   
  $("#box").removeClass(); 
  $("#box").addClass(classString); 
} 
$(document).ready(function(){ 
    var state = { 
      color: 0, 
      front: true, 
      lights: false, 
    } 
    renderState(state); 
    $("#color").click(function(){ 
      state.color++; 
      state.color %=3; 
      renderState(state); 
    }); 
    $("#view").click(function(){ 
        state.front = !state.front; 
        renderState(state); 
         
    }); 
    $("#lights").click(function(){ 
        state.lights = !state.lights; 
        renderState(state); 
    }); 
});

#box{ 
  width: 113px; 
  height: 85px; 
  background-image: url(https://i.stack.imgur.com/WNsgN.jpg); 
} 
 
.red-front-off { 
  background-position: 0px 0px; 
} 
 
.red-back-off { 
  background-position: -226px 0px; 
} 
 
.red-front-on { 
  background-position: -113px 0px; 
} 
 
.red-back-on { 
  background-position: -339px 0px; 
} 
 
.white-front-off { 
  background-position: 0px -85px; 
} 
 
.white-back-off { 
  background-position: -226px -85px; 
} 
 
.white-front-on { 
  background-position: -113px -85px; 
} 
 
.white-back-on { 
  background-position: -339px -85px; 
} 
 
.black-front-off { 
  background-position: 0px -170px; 
} 
 
.black-back-off { 
  background-position: -226px -170px; 
} 
 
.black-front-on { 
  background-position: -113px -170px; 
} 
 
.black-back-on { 
  background-position: -339px -170px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="box" class="red-front-off"></div> 
<button id="color">Change Color</button> 
<button id="view">Change View</button> 
<button id="lights">Lights On/Off</button>

Источник ответа

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

Как для тега h1 с классом title добавить класс animate, анимация которого будет появляться, если будет отображаться класс activ в теге section

Установлен плагин OnePageScroll (Сылка внизу), который тегу section добавляет класс activКак к тегу h1 с классом title добавить класс animate, анимация которого...

143

HTML