자바 스크립트 버튼이 제대로

  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

의 '<>'조각 편집기를 클릭하여 해당 상자에 코드를 붙여 TIDY을 클릭하고 당신은 조각 또는를 제공하여 문제가 무엇인지 구체적으로해야 할 – 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()'을 추가하여 다음 이벤트를 멈추게 할 필요가있다. –

자바 스크립트 버튼이 제대로

답변

관련 문제