Lights Out Game

Developer
Feng
Size
3,419 Kb
Views
4,048
  1. Lights Out Game Previews
  2. Lights Out Game HTML Codes
  3. Lights Out Game JS Codes

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 Previews
IQ Test

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
Lights Out Game - Script Codes
Lights Out Game - Script Codes
Home Page Home
Developer Feng
Username felixfeng
Uploaded January 07, 2023
Rating 3
Size 3,419 Kb
Views 4,048
Do you need developer help for Lights Out Game?

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!

Feng (felixfeng) Script Codes
Name
Test Slides
Practice - Connect 4
Test Photo Gallery
Test Pen
Test - ScrollSpy
A Pen by Feng
Test Redux Counter
Create amazing Facebook ads with AI!

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!