我正在尝试制作一款网格游戏，允许用户在网格中移动并收集元素。我只制作了网格，可以在单击一个正方形和几个按钮时填充网格。
我正在尝试实现如果用户点击某个图 block 然后按下某个字符键，那么该字符将出现在图 block 中。
我已经做了一个 switch case 来提醒用户，如果他们输入了某个图 block ，但我不知道如何实现它，所以它会在图 block 中输入字符键。
您可能需要下载此图像以便网格显示，但如果没有它，错误仍然会自行显示。
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>
最佳答案
也许我发现了它!发生的事情是在加载窗口时创建 var Canvas ，因为 var 在函数内部有它的起源。因此，要解决此问题，您需要做的就是从 window.onload = function(){}
关于javascript - 按下某个字符时将字符放置在网格中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43832889/