Lights Out Game
How do I make an lights out game?
Recreating Lights Out Game in React https://en.wikipedia.org/wiki/Lights_Out_(game). What is a lights out game? How do you make a lights out game? This script and codes were developed by Feng on 07 January 2023, Saturday.
Lights Out Game - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lights Out Game</title>
</head>
<body> <div id="grid"> <!-- This element's contents will be replaced with your component. -->
</div> <script src="js/index.js"></script>
</body>
</html>
Lights Out Game - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var GridCell = function GridCell(props) { // console.log('From the gridcell', props.clickFunction); return React.createElement( 'button', { onClick: props.clickFunction(props.cell) }, props.cell.status, props.cell.row, props.cell.column );
};
var GridRow = function GridRow(props) { var rowData = props.row; var gridRowCells = rowData.map(function (cell) { return React.createElement(GridCell, { cell: cell, clickFunction: props.clickFunction }); }); return React.createElement( 'div', null, gridRowCells );
};
var Gamegrid = function (_React$Component) { _inherits(Gamegrid, _React$Component); function Gamegrid(props) { _classCallCheck(this, Gamegrid); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { grid: [] }; _this.clickCell = _this.clickCell.bind(_this); return _this; } Gamegrid.prototype.componentDidMount = function componentDidMount() { var grid = this.createGrid(5); this.setState({ grid: grid }); }; Gamegrid.prototype.createGrid = function createGrid(n) { var grid = []; for (var i = 0; i < n; i++) { var row = []; for (var j = 0; j < n; j++) { row.push({ row: i, column: j, status: 0 }); } grid.push(row); } return grid; }; Gamegrid.prototype.clickCell = function clickCell(cell) { console.log('ClickCell got clicked', cell); // Change the current cell status to 1/0 var row = cell.row; var column = cell.column; var status = cell.status; var copyGrid = this.state.grid; copyGrid[row][column].status = cell.status === 1 ? 0 : 1; this.setState({ grid: copyGrid }); // Change the surrounding cells status // Make sure errors are handled return false; }; Gamegrid.prototype.render = function render() { var _this2 = this; var gridMatrix = this.state.grid; var gridRows = gridMatrix.map(function (row) { return React.createElement(GridRow, { row: row, clickFunction: _this2.clickCell }); }); return React.createElement( 'div', null, gridRows ); }; return Gamegrid;
}(React.Component);
ReactDOM.render(React.createElement(Gamegrid, null), document.getElementById('grid'));
// Build the 5x5 Grid
Developer | Feng |
Username | felixfeng |
Uploaded | January 07, 2023 |
Rating | 3 |
Size | 3,419 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Test Photo Gallery | 4,801 Kb |
Test Slides | 3,617 Kb |
Lights Out Game | 3,419 Kb |
Test Redux Counter | 5,053 Kb |
Test - ScrollSpy | 3,092 Kb |
A Pen by Feng | 1,151 Kb |
Test Pen | 1,240 Kb |
Practice - Connect 4 | 3,976 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Banner Ad | Raquellorenzana | 4,172 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Add This API | ThatGuySam | 2,848 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!