隱藏背景圖片內嵌樣式

Question

我需要創建一個簡單的記憶遊戲爲一個療程，我參加，我想出了這個：

Simple memory game

$(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加密，但隨着瀏覽器立即解釋它，它根本沒有服務。我的另一個想法是用php加密background-image，在標記中顯示隨機輸出（例如保存在數據庫中），並通過ajax請求與每個點擊事件上的php文件進行通信。我不確定這是否有效，但無論如何，它似乎是一個迂迴的方式處理它..

任何建議如何解決這個安全和有效的方式？

Answer 1

安全（和矯枉過正）的解決方案將完全服務器端完成。通過生成一個隨機會話ID並洗牌方塊來開始一個新遊戲。然後，你的客戶方JS通過某種API的請求通過AJAX的方形圖片：

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

一旦速率限制請求，服務器端，以防止用戶下載所有圖像的同時，你的遊戲是安全的。