4

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

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

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

  2. Если пользователь нажимает change color, а последний цвет (в данном случае черный) находится на экране, то как-то спрайт должен начинаться снова с красного цвета (это может быть возможно с повторением фона).

  3. Если пользователь нажимает Lights On/Off независимо от цвета или вида, свет должен включаться / выключаться в правильном положении.

Источник

1

3 ответа 3

12

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

5

Я тоже ушел от классов. Код получился совсем другим. Убрал 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');
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                ColorCars
            </title>
            <link href="style.css" rel="stylesheet">
                </link>
            </link>
        </meta>
    </head>
    <body>
        <div id="box">
        </div>
        <button id="color">
            Change Color
        </button>
        <button id="view">
            Change View
        </button>
        <button id="lights">
            Lights On/Off
        </button>
        <script src="js.js">
        </script>
    </body>
</html>

2
  • Ну что я могу сказать,- конечно молодец! Лови плюсик и чекбокс. И просьба не обращаться в ответах с личными обращениями, для этого есть комментарии 13 фев 2018 в 10:29
  • Отлично! Поучу, поучу.
    – axdrv
    14 фев 2018 в 15:17
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;
}
<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>

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

1
  • Привет, слушай, а нечно объемное, на svg можно сделать или это все же прероготива Web-GL?
    – Air
    9 фев 2018 в 17:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.