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

#javascript #html #jquery #css #svg

Я делаю личный проект, в котором пользователь может настроить внешний вид автомобиля
в Интернете.
    Основа проста: 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;
}









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

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


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


Источник
    

Ответы

Ответ 1

Я тоже ушел от классов. Код получился совсем другим. Убрал  jquery, как по мне здесь
можно без него обойтись. CSS совсем простой.
Стиль background-image вводится и меняется по нажатию  кнопок посредством js.





var verticalTiePoint = [0, -85, -170],
    horizontalStep = -113,
    i = 0,
    j = 0,
    horizontalTiePoint = 0,
    box = document.getElementById('box'),
    color = document.getElementById('color'),
    view = document.getElementById('view'),
    light = document.getElementById('lights');
color.onclick = changeColor;
view.onclick = changeView;
lights.onclick = switchLight;

function changeColor() {
    if (i == 2) i = 0;
    else i = i + 1;
    box.style.backgroundPosition = horizontalTiePoint + "px " + verticalTiePoint[i]
+ "px";
}

function changeView() {
    if (j < 2) j += 2;
    else j -= 2;
    horizontalTiePoint = horizontalStep * j;
    box.style.backgroundPosition = horizontalTiePoint + "px " + verticalTiePoint[i]
+ "px";
}

function switchLight() {
    if (j % 2 == 0) j += 1;
    else j -= 1;
    horizontalTiePoint = horizontalStep * j;
    box.style.backgroundPosition = horizontalTiePoint + "px " + verticalTiePoint[i]
+ "px";
}
#box {
    width: 113px;
    height: 85px;
    background-image: url('https://i.stack.imgur.com/jCqQw.jpg');
}


    
        
            
            
                
            
        
    
    
        

        
        
        
        
        
    



Ответ 2

Решение #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;
}









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


Ответ 3

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

Привел это решение, хотя оно не такое лаконичное и красивое как решение #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;
}









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