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>
请点击'<>'代码片段编辑,将代码粘贴到相关的框,单击整齐,保存 – mplungjan
你需要通过提供一个片段或更具体的问题是什么为你所做的工作拨弄。 –