game_shoubo/public/js/app.js

//version 20190201 11:53PM
let fps = 30;
let ctx = undefined;
let width = undefined;
let height = undefined;
let c = undefined;
let scale = 1;
let device = []

var ENUM_MODE = {
    LANDING: 0,
    SELECT: 1,
    PLAY: 2,
    PRACTICE: 3,
    SUMMARY: 4
};

let mode = null;
let canCalibrate = true
let landingMode, selectMode, playMode, endMode;
let bg_img;
let bg_circle_img_01;
let defaultRotateImgScale = 1.77778;
let rotate_device_img;
let mobileDevice = false;

let iOS = false;
let isAndroid = false;
let isFirefox = false;
let isSafari = false;
let isChrome = false;
// let alreadyTryGetUserMedia = false;
// let canGetUserMedia = false;
let text_valid_device_size = 50;

let canPlayBGM = true

let g_bgm = new Audio()
g_bgm.src = './audio/bgm.mp3'
g_bgm.load()
g_bgm.loop = true

let action_music = new Audio()
action_music.src = ''
action_music.load()
action_music.loop = true


let zodiac_animal_list = ["Rat", "Ox", "Tiger", "Rabbit", "Dragon", "Snake", "Horse", "Goat", "Monkey", "Rooster", "Dog", "Pig"].map((item, i) => {
    return {
        name: item,
        id: i
    }
});




function loadList(id, score, cb = () => { }) {

    let tempf = zodiac_animal_list.slice(0, id)
    let tempb = zodiac_animal_list.slice(id)
    zodiac_animal_list = tempb.concat(tempf)

    let html = ''

    for (let i = 0; i < zodiac_animal_list.length; i++) {
        let ele = zodiac_animal_list[i]
        let temp = 'normal'
        if (i < score) {
            temp = 'selected'
        }
        html += `<li style="cursor:${temp == 'selected' ? 'pointer' : 'auto'}"  data-key="${ele.id}" data-active="${temp}" ><img src="./images/${temp}/${ele.name}.png" alt=""></li>`
    }

    $('.selectList ul').html(html)
    $('.selectList ul').delegate('li', 'click', function () {
        if ($(this).is('.liactive')) {
            return
        }
        if (this.dataset.active == 'selected') {
            $(this).siblings().removeClass('liactive')
            $(this).addClass('liactive')
            cb(this.dataset)
        }
    })
    $('.selectList').show()

}


$('#bgm').click(() => {
    if ($('#bgm').is('.bgmplay')) {
        $('#bgm').removeClass('bgmplay')
        g_bgm.pause()
    } else {
        $('#bgm').addClass('bgmplay')
        g_bgm.play()
    }
})

function setup() {
    checkDevice();

    if (mobileDevice) {
        showMobileTips()
        return
    }

    mode = ENUM_MODE.LANDING;

    endMode = EndMode();
    playMode = PlayMode(endMode);

    landingMode = LandingMode(playMode);
    selectMode = SelectMode(playMode);

    landingMode.setup();
    selectMode.setup();
    endMode.setup();

    bg_img = new Image();
    bg_img.onload = function () { }
    bg_img.src = "content/ui/bg.jpg";

    bg_circle_img_01 = new Image();
    bg_circle_img_01.onload = function () { }
    bg_circle_img_01.src = "content/ui/circle_mask.png";

    rotate_device_img = new Image();
    rotate_device_img.onload = function () { }
    rotate_device_img.src = "content/ui/rotate_icon.png";

    browser_support_img = new Image();
    browser_support_img.onload = function () { }
    browser_support_img.src = "content/ui/shadow_art.png";


    // canGetUserMedia = false;
    // alreadyTryGetUserMedia = true;
    // alert(navigator.mediaDevices==null);
    // navigator.mediaDevices.getUserMedia({ video: { width: { min: 640 }, height: { min: 480 } }, audio: false })
    // .then(function(stream) {
    //     canGetUserMedia = true;
    // })
    // .catch(function(err) {
    //     canGetUserMedia = false;
    // });
}

function checkDevice() {
    var md = new MobileDetect(window.navigator.userAgent);

    if (md.mobile() || md.phone() || md.tablet()) {
        mobileDevice = true;
    } else {
        mobileDevice = false;
    }

}

function update() {
    scale = width / height > 1.77778 ? height / 1080 : width / 1920;
    if (mode == ENUM_MODE.LANDING) {
        landingMode.update();
    } else if (mode == ENUM_MODE.SELECT) {
        selectMode.update();
    } else if (mode == ENUM_MODE.PLAY) {
        playMode.update();
    } else if (mode == ENUM_MODE.SUMMARY) {
        endMode.update();
    }

}

function hideUI() {
    $('#btn_practice').hide();
    $('#btn_next').hide();
    $('#select_zodiac').hide();
    $('#select_year').hide();
    $('#play_again_btn').hide();
    $('#btn_play_end').hide();
    $('#calibrate_message').hide();
    $('#btn_begin').hide();

}

function iOSversion() {
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
    }
}


function draw() {

    var isChromium = window.chrome;
    var winNav = window.navigator;
    var vendorName = winNav.vendor;
    var isOpera = typeof window.opr !== "undefined";
    var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
    var hasMediaDevices = navigator.mediaDevices != null;
    isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    isChrome = isChromium !== null &&
        typeof isChromium !== "undefined" &&
        vendorName === "Google Inc." &&
        isOpera === false &&
        isIEedge === false;
    isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
    isAndroid = /(android)/i.test(navigator.userAgent);
    var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    var iOSver = iOSversion();

    if (mode == ENUM_MODE.LANDING) {
        if (!hasMediaDevices                   // Can not use camera.
            || iOS && !isSafari                 // iPad|iPhone|iPod did not use Safari.
            || iOS && iOSver[0] < 11            // iPad|iPhone|iPod had iOS version lower than 11.
            || !iOS && !isMac && !isChrome      // All devices except Mac|iPad|iPhone|iPod did not use Chrome.
            || isMac && !isChrome && !isSafari  // Mac did not use Chrome or Safari.
        ) {
            $('#btn_play').hide();
            showMobileTips()
            return;
        }

    }

    if (mode != null && mobileDevice) {
        let _canvas = document.getElementById('canvas');
        let _ctx = _canvas.getContext('2d');
        _ctx.save();
        _ctx.drawImage(bg_img, 0, 0, window.innerWidth, window.innerHeight);
        _ctx.translate(c.x, c.y);
        // _ctx.drawImage(rotate_device_img, -rotate_device_img.width * 0.5 * scaleRotateDeviceImg, - rotate_device_img.height * 0.5 * scaleRotateDeviceImg, rotate_device_img.width * scaleRotateDeviceImg, rotate_device_img.height * scaleRotateDeviceImg);
        _ctx.restore();
        hideUIState();
    } else {
        if (mode == ENUM_MODE.LANDING) {
            landingMode.showUI();
            landingMode.draw();
            if ($('#bgm').css('display') == 'none') {
                $('#bgm').show()

            }
        } else if (mode == ENUM_MODE.SELECT) {
            landingMode.hideUI();

            if (selectMode.checkState() == 0) {
                selectMode.selectShowUI();
            } else {
                selectMode.selectHideUI();
                selectMode.beginShowUI();
            }
            selectMode.draw();
        } else if (mode == ENUM_MODE.PLAY) {

            playMode.draw();
        } else if (mode == ENUM_MODE.SUMMARY) {
            if (!endMode.checkCompleted()) {
                $('#btn_play_end').hide();
                $('#play_again_btn').show();
            } else {
                $('#btn_play_end').show();
                $('#play_again_btn').hide();
            }
            endMode.draw();
        }
    }

}


function showMobileTips() {
    $('#mobiletips').css('display', 'flex')
    $('.mtipsheader img').attr('src', $.i18n('header_img'))
    $('.mbtips p').html($.i18n('mb_tips'))

    $('.mbbtn .mbcopy').html($.i18n('copylink')).unbind().bind('click', (e) => {
        e.preventDefault();
        var textArea = document.createElement("textarea");
        textArea.style.position = "fixed";
        textArea.style.top = 0;
        textArea.style.left = 0;
        textArea.style.width = "2em";
        textArea.style.height = "2em";
        textArea.style.padding = 0;
        textArea.style.border = "none";
        textArea.style.outline = "none";
        textArea.style.boxShadow = "none";
        textArea.style.background = "transparent";
        textArea.value = document.location.href;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand("copy") ? alert("复制成功") : alert("复制失败");
        } catch (err) {
            alert("复制失败");
        }

        document.body.removeChild(textArea);
    })


   
    
    $(`.mblang li[data-lang="${lang}"]`).siblings().removeClass('active')
    $(`.mblang li[data-lang="${lang}"]`).addClass('active')

    $(`.mblang`).delegate('li', 'click', function () {
        if ($(this).is('.active')) {
            return
        }

        console.log(this.dataset.lang);

        window.location = window.location.href.toString().split("?")[0] + "?lang=" + this.dataset.lang;
        setTimeout(function(){
            location.reload();
        }, 500);   
    })
}

function hideUIState() {
    if (mode == ENUM_MODE.LANDING) {
        landingMode.hideUI();
    } else if (mode == ENUM_MODE.SELECT) {

        if (selectMode.checkState() == 0) {
            selectMode.selectHideUI();
        } else {
            selectMode.beginHideUI();
        }
    } else if (mode == ENUM_MODE.SUMMARY) {
        $('#btn_play_end').hide();
        $('#play_again_btn').hide();

    }
    $('.intro__footer-link--right ').hide();
    $('#dropdown_select_lang').hide();
}