java脚本按钮单击无法正常运行

时间：2017-05-07 10:00:09

标签： javascript jquery html user-controls 

         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');
         }
		 
		 

		 
         
         
     
body {
    background-color: lightblue;
}

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

.active{
    background:#357EBD;
    color:#FFF
}
<!DOCTYPE html>

   <body>
      <h1>grid game</h1>
	  
	  
   </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>
	  
         <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>

我正在尝试制作网格游戏，允许用户在网格中移动并收集项目。我只制作了网格，能够在点击正方形和几个按钮时填充网格，但我已经面临一个问题。

例如，当我点击重启游戏之类的按钮时，它会在左上方注册一个正方形以填充。

您可能需要下载此图片以显示网格，但错误仍然无法显示。 

<!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>

1 个答案:

答案 0 :(得分：0)

这是我从您的代码编辑的代码，您在声明变量.drawImage()之前调用了box方法。您还应该向box添加onload事件以致电init()。

＆＃13;
＆＃13; 
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();
}
＆＃13; 
body {
  margin: 0;
}

h1 {
  text-align: center;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题