Şeyma Yaman Şeyma Yaman - 1 month ago 8
Javascript Question

TypeError: undefined is not an object (evaluating 'board')

I try to use canvas as a clickable board for minesweeper. My problem is that i can clicked out of the canvas but i don't want to it. Here's my code:



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

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





I try to use board as an object. But i failed.

Thanks for your helps.

Answer

Put the assignment to board.onmouseup inside initBoard(), so that it runs after you've assigned the variable.

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();    
        }*/
    }
}
Comments