Реализация небольшой игры на проигрывателе с помощью JavaScript и C3

JavaScript

В этой статье в основном рассказывается, как использовать собственный javascript и Css3 для реализации игры на проигрывателе, которая часто появляется в основных мобильных приложениях.Поскольку реализация может быть реализована по-разному, если вы знакомы с холстом, вы также можете использовать холст для реализации.Это статья использует js и css для реализации основного соображения.Производительность лучше с меньшей сложностью, поэтому, если есть лучшее решение, вы также можете связаться со мной в любое время.

предисловие

Технический маршрут, принятый в этой и предыдущей статьеНаучу вас использовать 200 строк кода, чтобы написать любовную мини-игру Dou Pin Le H5 (с исходным кодом)Та же технология, то есть использование библиотеки dom, написанной мной для упрощения работы с dom, конкретные моменты знаний, которые необходимо освоить:

  • CSS3 фоновый градиент, преобразование, переход
  • Используйте меньше циклов
  • Базовый случайный алгоритм JavaScript
  • Использование фрагмента документа documentFragment

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

визуализация

Реализовать идеи

Идея реализации разделена на две части, первая часть заключается в использовании CSS для рисования фона проигрывателя, а вторая часть заключается в реализации вращения проигрывателя и реализации случайности вращения через js.

1. Нарисуйте фон проигрывателя

Мы используем метод фонового градиента, чтобы реализовать форму веера с чередующимися полосами.Принцип заключается в том, чтобы нарисовать полукруг и добавить градиент к полукругу, как показано ниже:

Чтобы реализовать css, превращающий квадрат в полукруг, мы делаем это через border-radius:

    width: 150px;
    height: 300px;
    border-radius: 0 150px 150px 0;

Затем мы передаем линейный градиент css, так что мы можем получить небольшую веерообразную область:

Код для градиента выглядит следующим образом:

background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);

После реализации сектора мы можем его вычислить естественным образом.Например, если дуга нашего сектора 30 градусов, то нам нужно 12 секторов, чтобы сформировать круг.Для удобства мы используем цикл less для достижения:

.loop(@n) when (@n >= 0) {
    .loop(@n - 1);
    .piece-@{n} {
        transform: rotate(-30deg * (@n + 1));
    } 
}

Еще одна деталь заключается в том, что нам нужно изменить центральную точку преобразования, чтобы каждый сектор отображался с центральной точкой, чтобы можно было сформировать полный круг:

transform-origin: left center;

Полный css выглядит примерно так:

.piece-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 100px auto  auto 173px;
    transform-origin: left center;
    transition: transform 16s cubic-bezier(0,.47,.31,1.03);
    .piece {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        height: 300px;
        border-radius: 0 150px 150px 0;
        transform-origin: left center;
        span {
            margin-left: 16px;
            margin-top: 20px;
            display: inline-block;
            color: #fff;
        }
        &:nth-child(2n) {
            background-image: linear-gradient(120deg, #f6d365, #f6d365 75px, transparent 75px);
        }
        &:nth-child(2n+1) {
            background-image: linear-gradient(120deg, #ff5858, #ff5858 75px, transparent 75px);
        }
    }

    .loop(@n) when (@n >= 0) {
        .loop(@n - 1);
        .piece-@{n} {
            transform: rotate(-30deg * (@n + 1));
        } 
    }

    .loop(11);
}

2.javascript реализует логику поворотного стола

Так как вращение проигрывателя является случайным, нам нужно случайным образом генерировать угол каждый раз, когда нажимается кнопка запуска.Однако после тщательного анализа некоторых платформ мы обнаружим, что проигрыватель будет поворачиваться не менее n раз каждый раз, прежде чем он начнет чтобы остановиться, поэтому мы зададим поворотному столу начальный угол, например 720 градусов, 1080 градусов, чтобы гарантировать, что поворотный стол повернется не менее n раз, прежде чем он остановится.

Еще один момент, на который следует обратить внимание: как мы узнаем положение поворотного стола после его остановки, поворачивая угол? Здесь есть проблема с производительностью.Мы стараемся не оперировать домом.Посредством контроля данных мы можем вычислить позицию остановки через угол, полученный после каждой рандомизации и радиан площади единичного сектора.Формула выглядит следующим образом:

totalRadis = initRadis + radis * n + radis/2

totalRadis — угол поворота, initRadis — угол инициализации, radis — угол веера, radis/2 — выигрышный диапазон, который в основном используется для позиционирования, а n — случайное число.Далее я объясню функцию n.

Итак, как добиться случайных углов? Обычно мы хотим сделать это, написав случайную функцию, но вот новая идея, которая состоит в том, чтобы получить случайный угол путем случайной генерации выигрышной позиции.Поскольку моя форма веера составляет 30 градусов, всего существует 12 веерообразных призовые зоны, поэтому индекс 0-11. Следовательно, упомянутое выше n является нашим случайным индексом, и нам нужно только написать случайное число, которое генерирует указанный диапазон.

Зная вышеизложенные знания, приступаем к подготовке данных для инициализации:

// 转盘抽奖数据
    var wards = ['1元', '2元', '3元', '5元', '再来', 
     '算法', '0.5元', '0.1元', '0.2元', '0.6元',
     '0.5元', '来'];

Для рендеринга призовых данных здесь мы используем DocumentFragment, хотя для простого рендеринга это необязательно, но может пригодиться позже:

// 渲染dom
var fragment = document.createDocumentFragment();
for(var i=0, len = wards.length; i < len; i++) {
    var piece = document.createElement('div');
    piece.className = 'piece piece-' + i;
    piece.innerHTML = '<span>' + wards[i] + '</span>';
    fragment.appendChild(piece);
}

$('#piece_wrap')[0].appendChild(fragment);

Методы генерации случайных чисел в указанном диапазоне:

// 生成从 start到end的随机数
function randomArr(start, end) {
    return Math.round(start + Math.random()* (end - start))
}

Когда мы нажмем кнопку «Пуск», я заставлю карусель двигаться, изменив ее преобразование:

// 转动逻辑
    var radis = 30,  // 每个扇形区域的度数
            n = randomArr(0, 360/radis),  // 计算随机中奖的位置
    initRadis = 720,   // 初始转动的角度
         time = 16 * 1000,    // 转动时间 
         once = true,    // 限制一个转动周期只能点击一次
   totalRadis = initRadis + radis * n + radis/2;  // 转动角度计算公式
$('.start').on('click', function(){
    if(once) {
        once = false;
        $('#piece_wrap').css({
            'transform':'rotate(' + totalRadis + 'deg)',
            'transition': 'transform 16s cubic-bezier(0,.47,.31,1.03)'
        });
        setTimeout(function(){
            once = true;
            alert('恭喜你抽中了' + wards[n] + '!');
            $('#piece_wrap').css({
                'transform':'rotate(' + 0 + 'deg)',
                'transition': 'none'
            });
        }, time)
    }
        
    })

Вот и весь основной код, как насчет него, не правда ли, он очень простой? Если вы хотите испытать на себе фактические эффекты и технические обмены или испытать больше оригинальных демоверсий игр h5, вы можете обратить внимание на следующий опыт общедоступной учетной записи.

больше рекомендаций

Категории