2013-10-16 50 views
0

說我有一個益智遊戲,益智點擊功能jQuery,如何讓我的益智遊戲在觸摸屏設備上工作?

// One function 

document.onmousedown = shufflePuzzle; 

// Another function   

document.onmousedown = onPuzzleClick; 

比如我有:

function onPuzzleClick(e){ 

     if(e.layerX || e.layerX == 0){ 
      _mouse.x = e.layerX - _canvas.offsetLeft; 
      _mouse.y = e.layerY - _canvas.offsetTop; 
     } 
     else if(e.offsetX || e.offsetX == 0){ 
      _mouse.x = e.offsetX - _canvas.offsetLeft; 
      _mouse.y = e.offsetY - _canvas.offsetTop; 
     } 

另一部分

document.onmousemove = null; 
     document.onmouseup = null; 
     if(_currentDropPiece != null){ 
      var tmp = {xPos:_currentPiece.xPos,yPos:_currentPiece.yPos}; 
      _currentPiece.xPos = _currentDropPiece.xPos; 
      _currentPiece.yPos = _currentDropPiece.yPos; 
      _currentDropPiece.xPos = tmp.xPos; 
      _currentDropPiece.yPos = tmp.yPos; 
     } 
     resetPuzzleAndCheckWin(); 
    } 

什麼是讓最好的辦法觸摸設備的難題? 我應該嘗試綁定觸摸和鼠標嗎? 我是否必須重寫條件語句?

任何想法?

+0

沒有必要使用你可以把它在一個簡單的jQuery或js的任何事情,我差你這種類型的遊戲在我的答案只是檢查它和那樣做。 – Anup

回答

0

它與CSS和HTML全益智遊戲代碼:

<!DOCTYPE html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>AnupPuzzle</title> 
<script src="jquery-1.8.2.min.js"></script> 
<style> 
.main-container{background:#600; width:270px; height:270px; text-align:center;} 
button{width:80px; height:80px; background:#CCC; float:left; margin:5px; color:#600; font-size:18px; } 
button:hover{background:#9CF;} 
span{width:100%; color:#900; font-family:"Comic Sans MS", cursive;} 
</style> 
</head> 
<body> 
<h3>Are you want to try your brain logics...</h3> 
<div class="main-container">  
    <button alt="" name="1" value="1" id="1">5</button> 
    <button alt="" name="2" value="2" id="2">6</button> 
    <button alt="" name="3" value="3" id="3">8</button> 
    <button alt="" name="4" value="4" id="4">3</button> 
    <button alt="" name="5" value="5" id="5"></button> 
    <button alt="" name="6" value="6" id="6">7</button> 
    <button alt="" name="7" value="7" id="7">1</button> 
    <button alt="" name="8" value="8" id="8">2</button> 
    <button alt="" name="9" value="9" id="9">4</button> 
</div> 
<span>Anup</span> 
</body> 
</html> 
<script> 
$(document).ready(function(){ 
var upval, downval, leftval, rightval, txt, bVal; 
$("button").click(function(){ 
    txt = $(this).text(); 
    bVal = $(this).val(); 
    if(txt != ""){ 
     if((bVal != 1) && (bVal != 2) &&(bVal != 3)){ 
      upval = eval(eval(bVal)-eval(3));   
      var upTxt = $("#"+upval).text();    
      if(upTxt == ""){    
       $("#"+upval).text(txt); 
       $(this).text(""); 
      } 
     } 
     if((bVal != 7) && (bVal != 8) &&(bVal != 9)){ 
      downval = eval(eval(bVal)+ eval(3));    
      var downTxt = $("#"+downval).text(); 
      if(downTxt == ""){   
       $("#"+downval).text(txt); 
       $(this).text(""); 
      } 
     } 
     if((bVal != 1) && (bVal != 4) &&(bVal != 7)){ 
      leftval = eval(eval(bVal)-eval(1));   
      var leftTxt = $("#"+leftval).text(); 
      if(leftTxt == ""){   
       $("#"+leftval).text(txt); 
       $(this).text(""); 
      } 
     } 
     if((bVal != 3) && (bVal != 6) &&(bVal != 9)){ 
      rightval = eval(eval(bVal)+ eval(1));   
      var rightTxt = $("#"+rightval).text();   
      if(rightTxt == ""){     
       $("#"+rightval).text(txt); 
       $(this).text(""); 
      } 
     } 
     var one = $("#1").text(); 
     var two = $("#2").text(); 
     var three = $("#3").text(); 
     var four = $("#4").text(); 
     var five = $("#5").text(); 
     var six = $("#6").text(); 
     var seven = $("#7").text(); 
     var eight = $("#8").text(); 
     var nine = $("#9").text(); 

     if((one == "1")&&(two == "2")&&(three == "3")&&(four == "4")&&(five == "5")&&(six == "6")&&(seven == "7")&&(eight == "8")&&(nine == "")){   
      alert("Congratulations You Won The Game..."); 
      $("button").attr("disabled", "disabled"); 
     }    
    } 
}); 

}); 


</script> 
+0

不需要使用任何東西,你可以在一個簡單的jQuery或JS中使用它,我發送給你這種類型的遊戲在我的答案只是檢查它,並像那樣做。這是簡單的0-9益智遊戲讓你的圖像在數字的地方改變它與你的圖像作爲按鈕的背景圖像。古德盧克 – Anup