JSFiddle - React, Tailwind, and code Playground
CSS
td {
border: 1px solid green;
width: 28px;
height: 28px;
}
#field {
border-spacing: 0;
border-collapse: collapse;
}
JavaScript
var dom = {};
dom.rand = function(min, max) {
if(max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
} else {
return Math.floor(Math.random() * (min + 1));
}
};
dom.trim = function(str) {
return str.replace(/^\s+|\s+$/g, '');
};
dom.hasClass = function(node, klass) {
var newClasses = (node.className).replace(/\s+/g, ' ');
return (' ' + newClasses + ' ').indexOf(' ' + klass + ' ') > -1;
};
dom.addClass = function(node, klass) {
if (!node.className) {
node.className = klass;
} else if (!this.hasClass(node, klass)) {
node.className += ' ' + klass;
}
};
dom.removeClass = function(node, klass) {
if (node.className && dom.hasClass(node, klass)) {
var newClasses = node.className.replace(new RegExp('(\\s+|^)' + klass + '(\\s+|$)', 'g'), ' ');
node.className = this.trim(newClasses);
}
};
dom.toggleClass = function(node, klass) {
if (dom.hasClass(node, klass)) {
dom.removeClass(node, klass);
} else {
dom.addClass(node, klass);
}
};
dom.addEvent = function(elem, type, handler) {
if (document.addEventListener) {
elem.addEventListener(type, handler, false);
} else {
elem.attachEvent("on" + type, handler);
}
};
dom.preventBrowserEvent = function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
};
function Cell(x, y) {
this.isOpened = false;
this.isRigged = false;
this.isMarked = false;
this.x = x;
this.y = y;
}
Cell.prototype.openCell = function() {
this.isOpened = true;
};
Cell.prototype.hasMine = function() {
if (this.isRigged) {
return true;
} else {
return false;
}
};
Cell.prototype.getX = function() {
return this.x;
};
Cell.prototype.getY = function() {
return this.y;
};
function Field(width, height, mines) {
this.table = document.createElement('table');
this.width = width;
this.height = height;
this.mines = mines;
this.cells = [];
this.createField();
this.markCell();
this.generateMines();
...