Question

我需要为我参加的课程创建一个简单的记忆游戏，我想出了这个：

$(document).ready(function(){

    // Set initial time to 0
    var currentTime = 0;
    // Set initial score to 0
    var score = 0;
    // Set initial attempt to 0
    var attempts = 0;
    // Placeholder
    var timeHolder;

    // Start the game when clicking the button #start
    $('#start').on('click', init);  

    // Check if user hasn't clicked #start button yet
    $('.board_cell').on('click.initialCheck', checkInitial);        

    function init() {

        // Shuffle elements at beginning
        shuffle();

        // Handle click event and check if elements match
        $('.board_cell').on('click', checkAccuracy).off('click.initialCheck');

        $('#start').off('click', init); 

        $('#reset').on('click', reset);

        // stop timer
        clearInterval(timeHolder)           

        // Timer function will be called every 100ms
        timeHolder = window.setInterval(timer, 100);
    }

    /*
         * Main function to handle click events and do actions
         * @checkAccuracy
         */

        function checkAccuracy() {
            var self = $(this),
                allElements = $('.board_cell'),
                // Url of background-image
                bgUrl = self.children('.back').css('background-image'),
                // Get relevant part (the image name) from the url
                elementType = bgUrl.slice(bgUrl.lastIndexOf('/') + 1, bgUrl.lastIndexOf('.'));

            // Flip the clicked element
            self.addClass('flipped ' + elementType);

            // Check if clicked element is already visible
            if (self.hasClass('success')) {
                showMessage('Das ist schon aufgedeckt ;)');

                // Abort function by returning false
                return false;
            }

            if($('.flipped').length >= 2) {
                // Prevent clicking on other elements when 2 elements are already visible
                allElements.off('click');
                // Increase attempts
                attempts++; 
                setAttempts();              
            }

            if($('.'+elementType).length == 2) {
                // If the same are visible
                score++;
                setScore();
                showMessage(['That was a right one!!!', 'Now you got it!', 'Terrific!']);   
                toggleClasses('success', function(){
                    // Callback when toggleClasses has finsihed

                    if($('.success').length == allElements.length){
                        // If alle elements are visible

                        showMessage('Everything exposed, congrats!');
                        $('#overlay').fadeIn();
                        // Kill interval to prevent further increasing
                        clearInterval(timeHolder);
                    }           
                });

            } else {
                // If they are not the same
                if($('.flipped').length == 2) {
                    toggleClasses();
                    showMessage(['Uhh that was wrong...', 'Are you drunk?', 'Try it again...', 'You better stop playing!',
                                 'Seems like you need to train much more...', 'Annoying?', 'C\'mon!']);
                }
            }           
        }

        /*
         * Function to reset the game
         */

        function reset() {
            // turn elements and prevent clicking
            $('.board_cell').removeClass('success flipped').off('click');

            // hide overlay if visible
            if($('#overlay').is(':visible')) {
                $('#overlay').fadeOut();
            }

            // stop timer
            clearInterval(timeHolder)

            // set time to 0
            currentTime = 0;

            // set attempts to 0
            attempts = 0;
            setAttempts();

            // set score to 0
            score = 0;
            setScore(); 

            // hide message
            showMessage('');

            // set visible time to 0
            $('#time span').text(currentTime);

            // Check if user has clicked #start button
            $('.board_cell').on('click.initialCheck', checkInitial);

            $('#start').on('click', init);          
        }

        /*
         * Function to show a message
         */         

        function showMessage(msg) {
            if(typeof msg == 'object') {
                var randomNumber = Math.floor((Math.random()*msg.length)+1);
                msg = msg[randomNumber-1];
            }

            $('#message span').html(msg);
        }

        /*
         * Function to toggleClasses on clickable elements
         */         

        function toggleClasses(extraClass, callback) {
            setTimeout(function(){
                $('.flipped').removeClass().addClass('board_cell '+extraClass);
                $('.board_cell').on('click', checkAccuracy);

                if(typeof callback != 'undefined') {
                    callback();
                }                       
            }, 1000);
        }

        /*
         * Function to increase score
         */             

        function setScore() {
            $('#score span').text(score);
        }

        /*
         * Function to increase attempts
         */             

        function setAttempts() {
            $('#attempts span').text(attempts);
        }       

        /*
         * Function for timer
         */                 

        function timer() {
            currentTime = currentTime + 1;

            $('#time span').text(currentTime/10);
        }

        /*
         * Function for showing message when user hasn't clicked #start button yet
         */                 

        function checkInitial() {
            showMessage('You need to press the "Start Game" button to beginn');
        }           

        /*
         * Function for shuffling elements
         */                 

        function shuffle() {
            var elementsArray = [];

            $('.back').each(function(index){
                elementsArray.push($(this).css('background-image'))
            });

            elementsArray.sort(function() {return 0.5 - Math.random()})

            $('.back').each(function(index){
                $(this).css('background-image', elementsArray[index]);
            });         
        }       
    });

隐藏的图像通过内嵌样式添加background-image并在每次启动/重置时进行混洗，但这并不妨碍用户在游戏过程中作弊（查看源代码会立即告诉解决方案）。

我想知道是否有办法隐藏源代码中的background-image值？我尝试了一些base64加密，但是当浏览器立即对此进行解释时，它根本不会服务。我的另一个想法是使用background-image加密php，在标记中显示随机输出（例如保存在数据库中），并通过ajax请求与{{}进行通信1}}每个点击事件的文件。我不确定这是否有效，但无论如何它似乎是一种处理它的迂回方式..

有关如何安全有效地解决这个问题的任何建议吗？

Answer 1

安全（和矫枉过正）的解决方案是完全在服务器端执行此操作。通过生成随机会话ID并对广场进行洗牌来开始新游戏。然后，您的客户端JS通过某种API通过AJAX请求方形图像：

GET /<session_id>/square/<x>/<y>

一旦您对服务器的请求进行速率限制以防止用户立即下载所有图像，您的游戏就是安全的。

从源代码隐藏背景图像内联样式

1 个答案: