Question

我尝试使用画布作为扫雷的可点击板。我的问题是我可以点击画布，但我不想这样做。这是我的代码：

＆＃13;

var board;
var ctx;
var bombs = [];
var clickedX;
var clickedY;

function initBoard(w, h){
	board = document.getElementById("board");
	ctx = board.getContext('2d');
	drawBoard(w,h);
	placedBombs();
}

function drawBoard(w,h){	
	board.squareSize = {
		w: board.width / w, 
		h: board.height / h
	};
	
	ctx.fillStyle = "#C0C0C0"
	ctx.fillRect(0, 0, board.width, board.height)

	board.drawGrid = function () {
		ctx.beginPath();
		for (var i = 0; i <= w; i++) {
			ctx.moveTo(i * this.squareSize.w, 0);
			ctx.lineTo(i * this.squareSize.w, this.height);
		}
		for (var i = 0; i <= h; i++) {
			ctx.moveTo(0, i * this.squareSize.h);
			ctx.lineTo(this.width, i * this.squareSize.h);
		}
		ctx.lineWidth = 0.3;
		ctx.stroke();
		ctx.closePath();
	}
	
	board.drawGrid();	
}

function placedBombs(){
	for(var n=0; n<10; n++){
		bombs[n] = ([Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)]);
	}	
}

board.onmouseup = function(e){
	board.squareSize = {
		w: board.width / 10, 
		h: board.height / 10
	};

	board.eventToGrid = function (e) {		
		return { 			
			i: parseInt(e.offsetX / this.squareSize.w), 
			j: parseInt(e.offsetY / this.squareSize.h)
		};		
	}	
	var pos = board.eventToGrid(e);
	clickedX = pos.i;
	clickedY = pos.j;
	loc = document.getElementById("loc");
	loc.innerHTML = "Position: " + pos.i + ", " + pos.j;
	if(check(clickedX, clickedY) == false){
		lose();
	}
	/*else{
		clickPass();	
	}*/
}
function check(clickedX, clickedY){
	console.log(clickedX);
	console.log(clickedY);	
	for(var i=0; i<bombs.length; i++){
		if((clickedX == bombs[i][0]) && (clickedY == bombs[i][1])){ 
			return false;
		}
	}
	return true;	
}

/*function clickPass(){
	
}*/
	
function lose(){
	alert("bomb");
}

＆＃13;

<body onload="initBoard(10,10)">
  <canvas id="board" width="350" height="350">
  </canvas>
  <div id="loc">
    Mouse location: x, y
  </div>
</body>

＆＃13;

我尝试使用board作为对象。但我失败了。
谢谢你的帮助。

Answer 1

将作业放在board.onmouseup initBoard()内，以便在您分配变量后运行。

function initBoard(w, h){
    board = document.getElementById("board");
    ctx = board.getContext('2d');
    drawBoard(w,h);
    placedBombs();
    board.onmouseup = function(e){
        board.squareSize = {
            w: board.width / 10, 
            h: board.height / 10
        };

        board.eventToGrid = function (e) {      
            return {            
                i: parseInt(e.offsetX / this.squareSize.w), 
                j: parseInt(e.offsetY / this.squareSize.h)
            };      
        }   
        var pos = board.eventToGrid(e);
        clickedX = pos.i;
        clickedY = pos.j;
        loc = document.getElementById("loc");
        loc.innerHTML = "Position: " + pos.i + ", " + pos.j;
        if(check(clickedX, clickedY) == false){
            lose();
        }
        /*else{
            clickPass();    
        }*/
    }
}

TypeError：undefined不是对象（评估＆＃39; board＆＃39;）

1 个答案: