按下某个字符时将章程放置在网格中答案

【问题标题】：Place charters in a grid when pressing a certain character按下某个字符时将章程放置在网格中
【发布时间】：2017-10-05 14:02:22
【问题描述】：

我正在尝试制作一个允许用户在网格周围移动并收集物品的网格游戏。我只做了网格，点击一个正方形和几个按钮就可以填充网格。

我正在尝试实现，如果用户单击某个磁贴然后按下某个字符键，那么该字符将出现在磁贴中。

我已经制作了一个 switch case 来提醒用户如果他们输入了某个磁贴，但我不知道如何实现它，所以它会在磁贴中输入字符键。

您可能需要下载此图像才能显示网格，但如果没有它，错误仍然会显示出来。

    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";
			 event.stopPropagation();
         }

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


 function refreshGame() {
             alert('game refresh');
			 event.stopPropagation();
         }

		

function refresh() {

alert('game refresh');

    setTimeout(function () {
        location.reload()
    }, 100);
	event.stopPropagation();
}

body {
    background-color: lightblue;
}

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

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

   <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="submit" value="Refresh game" data-wrapper-class="custom-btn" data-corners="false" id="submit" onclick="refresh()">

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

【问题讨论】：

我认为你应该从基础开始。这个 HTML 代码是错误的，你在这个页面中有多少个“body”标签？？从这里开始阅读，简单明了：w3schools.com/html/html_intro.asp 和这里 w3schools.com/html/html_basic.asp 等等......

标签： javascript jquery html css user-interface

【解决方案1】：

也许我发现了！发生的事情是在加载窗口时创建了一个 var 画布，因为 var 在函数内部有其来源。因此，要解决这个问题，您需要做的就是从 window.onload = function(){} 中指定 var canvas 和 var c

【讨论】：