Java腳本，按一下按鈕不能正常工作

  var s ={ 
 
     rows: 10, 
 
     cols: 10, 
 
     width: 40, 
 
     height: 40, 
 
      
 
      
 
     }; 
 
\t 
 
\t \t document.onkeydown = function(e) { 
 
    switch (e.keyCode) { 
 
     case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: 
 
      alert('number'); 
 
      break; 
 
     case 75: 
 
      alert('k'); 
 
      break; 
 
     case 79: 
 
      alert('o'); 
 
      break; 
 
     case 85: 
 
      alert('u'); 
 
      break; 
 
\t \t case 65: 
 
      alert('a'); 
 
      break; 
 
\t \t case 68: 
 
      alert('d'); 
 
      break; 
 
\t \t case 87: 
 
      alert('w'); 
 
      break; 
 
\t \t case 88: 
 
      alert('x'); 
 
      break; 
 
    } 
 
}; 
 
\t \t 
 
      
 
     var c; 
 
      
 
      
 
     window.onload = function(){ 
 
     var canvas = document.getElementById("gCanvas"); 
 
     c = canvas.getContext("2d"); 
 
      
 
     init(); 
 
     } 
 
      
 
      
 
      
 
      
 
     var mX; 
 
     var mY; 
 
     var clickedX; 
 
     var clickedY; 
 
      
 
     window.onclick = function(e){ 
 
      
 
      
 
\t \t 
 
\t \t c.strokeStyle = "black"; 
 
    
 
\t \t 
 
      
 
     c.fillRect(Math.floor(e.offsetX/40)*40, 
 
          Math.floor(e.offsetY/40)*40, 
 
          40, 40); 
 
      
 
     mX = e.pageX; 
 
     mY = e.pageY; 
 
      
 
     if(Math.floor(mX/s.width) < s.cols && Math.floor(mY/s.height) < s.rows){ 
 
     clickedX = Math.floor(mX/s.width); 
 
     clickedY = Math.floor(mY/s.height); 
 
     
 
     console.log(clickedX + "," + clickedY); 
 
\t \t 
 
\t \t 
 
     } 
 
      
 
     } 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
     var box; 
 
      
 
     box = new Image(); 
 
     box.src = "box.png"; 
 
      
 
      
 
     function init(){ 
 
      
 
      
 
     drawCanvas(); 
 
      
 
     } 
 
      
 
     function drawCanvas(){ 
 
      
 
     c.clearRect(0,0,400,400); 
 
      
 
     for(var i=0; i<s.rows; i++){ 
 
     for(var n=0; n<s.cols; n++){ 
 
     var x = n*s.width; 
 
     var y = i*s.height; 
 
     c.drawImage(box, x, y); 
 
     } 
 
     } 
 
     } 
 
      
 
     function myFunction() { 
 
      document.getElementById("demo").innerHTML = "game started"; 
 
     } 
 
\t \t 
 
\t \t function test() { 
 
      alert('game ended'); 
 
     } 
 
\t \t 
 
\t \t 
 

 
\t \t

body { 
 
    background-color: lightblue; 
 
} 
 

 
h1 { 
 
    color: navy; 
 
    margin-left: 20px; 
 
} 
 

 
.active{ 
 
    background:#357EBD; 
 
    color:#FFF 
 
}

<!DOCTYPE html> 
 

 
    <body> 
 
     <h1>grid game</h1> 
 
\t 
 
\t 
 
    </body> 
 
    
 
     
 
     <style> 
 
     body{ 
 
     margin:0; 
 
     } 
 
     h1 { 
 
     text-align: center; 
 
     } 
 
     </style> 
 

 

 

 

 

 

 
    <body> 
 
     <div id = "controls"> 
 
     </div> 
 
     <div id ="gameCanvas"> 
 
     <canvas id ="gCanvas" width="400" height="400"></canvas> 
 
     </div> 
 
     <body> 
 
\t 
 
     <button class="button" onclick="myFunction()">Start game</button> 
 
     <p id="demo"></p> 
 
     <input type="button" value="Refresh game" onClick="window.location.reload()"> 
 
\t \t 
 
\t \t <button class="button" onclick="test()">end game</button> 
 
    </body> 
 
    </body>

我試圖做一個網格遊戲，這將允許用戶走動一格和收集物品。我只做了網格，當點擊一個正方形和幾個按鈕時能夠填充網格，但我已經遇到了問題。

當過我點擊像重新開始遊戲的按鈕例如，它在上面註冊了一個方形留下來填充。

您可能需要下載此圖片爲表格顯示，但錯誤依然證明了自己沒有它。

<!DOCTYPE html> 
<html> 
    <body> 
     <h1>grid game</h1> 


    </body> 
    <head> 
     <link rel="stylesheet" type="text/css" href="mystyle.css"> 
     <style> 
     body{ 
     margin:0; 
     } 
     h1 { 
     text-align: center; 
     } 
     </style> 
     <script> 
     var s ={ 
     rows: 10, 
     cols: 10, 
     width: 40, 
     height: 40, 


     }; 

     document.onkeydown = function(e) { 
    switch (e.keyCode) { 
     case 49: case 50: case 51: case 52: case 53: case 54: case 55: case 56: case 57: 
      alert('number'); 
      break; 
     case 75: 
      alert('k'); 
      break; 
     case 79: 
      alert('o'); 
      break; 
     case 85: 
      alert('u'); 
      break; 
     case 65: 
      alert('a'); 
      break; 
     case 68: 
      alert('d'); 
      break; 
     case 87: 
      alert('w'); 
      break; 
     case 88: 
      alert('x'); 
      break; 
    } 
}; 


     var c; 


     window.onload = function(){ 
     var canvas = document.getElementById("gCanvas"); 
     c = canvas.getContext("2d"); 

     init(); 
     } 




     var mX; 
     var mY; 
     var clickedX; 
     var clickedY; 

     window.onclick = function(e){ 



     c.strokeStyle = "black"; 



     c.fillRect(Math.floor(e.offsetX/40)*40, 
          Math.floor(e.offsetY/40)*40, 
          40, 40); 

     mX = e.pageX; 
     mY = e.pageY; 

     if(Math.floor(mX/s.width) < s.cols && Math.floor(mY/s.height) < s.rows){ 
     clickedX = Math.floor(mX/s.width); 
     clickedY = Math.floor(mY/s.height); 

     console.log(clickedX + "," + clickedY); 


     } 

     } 









     var box; 

     box = new Image(); 
     box.src = "box.png"; 


     function init(){ 


     drawCanvas(); 

     } 

     function drawCanvas(){ 

     c.clearRect(0,0,400,400); 

     for(var i=0; i<s.rows; i++){ 
     for(var n=0; n<s.cols; n++){ 
     var x = n*s.width; 
     var y = i*s.height; 
     c.drawImage(box, x, y); 
     } 
     } 
     } 

     function myFunction() { 
      document.getElementById("demo").innerHTML = "game started"; 
     } 

     function test() { 
      alert('game ended'); 
     } 






     </script> 
    </head> 
    <body> 
     <div id = "controls"> 
     </div> 
     <div id ="gameCanvas"> 
     <canvas id ="gCanvas" width="400" height="400"></canvas> 
     </div> 
     <body> 

     <button class="button" onclick="myFunction()">Start game</button> 
     <p id="demo"></p> 
     <input type="button" value="Refresh game" onClick="window.location.reload()"> 

     <button class="button" onclick="test()">end game</button> 
    </body> 
    </body> 
</html>

來源

2017-05-07 LookingWest

請點擊'<>'代碼片段編輯，將代碼粘貼到相關的框，單擊整齊，保存 – mplungjan

你需要通過提供一個片段或更具體的問題是什麼爲你所做的工作撥弄。 –

這是我從您的代碼編輯的代碼，你聲明變量box之前稱爲.drawImage()方法。您還應該向box添加onload事件以致電init()。

var s = { 
 
    rows: 10, 
 
    cols: 10, 
 
    width: 40, 
 
    height: 40 
 
}; 
 

 
document.onkeydown = function(e) { 
 
    switch (e.keyCode) { 
 
    case 49: 
 
    case 50: 
 
    case 51: 
 
    case 52: 
 
    case 53: 
 
    case 54: 
 
    case 55: 
 
    case 56: 
 
    case 57: 
 
     alert('number'); 
 
     break; 
 
    case 75: 
 
     alert('k'); 
 
     break; 
 
    case 79: 
 
     alert('o'); 
 
     break; 
 
    case 85: 
 
     alert('u'); 
 
     break; 
 
    case 65: 
 
     alert('a'); 
 
     break; 
 
    case 68: 
 
     alert('d'); 
 
     break; 
 
    case 87: 
 
     alert('w'); 
 
     break; 
 
    case 88: 
 
     alert('x'); 
 
     break; 
 
    } 
 
}; 
 

 
var box; 
 
box = new Image(); 
 
box.src = "https://i.imgur.com/5o1U7rv.png"; 
 
box.onload = function() { 
 
    init(); 
 
}; 
 

 
var c; 
 
var canvas = document.getElementById("gCanvas"); 
 
c = canvas.getContext("2d"); 
 

 
var mX; 
 
var mY; 
 
var clickedX; 
 
var clickedY; 
 

 
window.onclick = function(e) { 
 
    console.log(4); 
 
    c.strokeStyle = "black"; 
 
    c.fillRect(Math.floor(e.offsetX/40) * 40, 
 
    Math.floor(e.offsetY/40) * 40, 
 
    40, 40); 
 
    mX = e.pageX; 
 
    mY = e.pageY; 
 
    if (Math.floor(mX/s.width) < s.cols && Math.floor(mY/s.height) < s.rows) { 
 
    clickedX = Math.floor(mX/s.width); 
 
    clickedY = Math.floor(mY/s.height); 
 
    console.log(clickedX + "," + clickedY); 
 
    } 
 
}; 
 

 
function init() { 
 
    drawCanvas(); 
 
} 
 

 
function drawCanvas() { 
 
    c.clearRect(0, 0, 400, 400); 
 
    for (var i = 0; i < s.rows; i++) { 
 
    for (var n = 0; n < s.cols; n++) { 
 
     var x = n * s.width; 
 
     var y = i * s.height; 
 
     c.drawImage(box, x, y); 
 
    } 
 
    } 
 
} 
 

 
function myFunction(event) { 
 
    document.getElementById("demo").innerHTML = "game started"; 
 
    event.stopPropagation(); 
 
} 
 

 
function test(event) { 
 
    alert('game ended'); 
 
    event.stopPropagation(); 
 
}

body { 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<div id="controls"></div> 
 
<div id="gameCanvas"> 
 
    <canvas id="gCanvas" width="400" height="400"></canvas> 
 
</div> 
 
<button class="button" onclick="myFunction(event)">Start game</button> 
 
<p id="demo"></p> 
 
<input type="button" value="Refresh game" onClick="window.location.reload()"> 
 

 
<button class="button" onclick="test(event)">end game</button>

來源

2017-05-07 10:33:42

這仍然會產生我之前遇到的錯誤，如果您單擊開始遊戲或結束遊戲按鈕，它將填充左上角或與其相鄰的錯誤。我試圖做到這一點，只有當你點擊該圖塊時，顏色纔會填充。 – LookingWest

我修正了上面的代碼，當你點擊開始按鈕時，還激活了'window'的onclick事件，所以你需要添加'event.stopPropagation（）'來停止觸發下一個事件。 –

Java腳本，按一下按鈕不能正常工作

回答

相關問題