一个十字翻转小游戏

ops/2024/11/30 15:32:59/

有没有万能公式,我现在只会33 35这种简单的

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Toggle Grid Game</title><style>html" title=css>css">body {font-family: Arial, sans-serif;text-align: center;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: #f0f0f0;}.grid {display: grid;border: 2px solid red; /* Outer border in red */margin-top: 20px;}.cell {width: 30px;height: 30px;border: 1px solid red; /* Red border for each cell */margin: 0;padding: 0;background-color: white;cursor: pointer;}.cell.black {background-color: black;}.controls {margin-bottom: 20px;}.controls input,.controls button {margin-right: 10px;padding: 5px;}</style>
</head>
<body><h1>Toggle Grid Game</h1><div class="controls"><label for="rows">Rows:</label><input type="number" id="rows" value="3" min="1" max="50"><label for="cols">Columns:</label><input type="number" id="cols" value="3" min="1" max="50"><button onclick="initializeGrid()">Set Grid</button><button onclick="fillAllBlack()">Fill All Black</button></div><div id="gridContainer"></div><script>html" title=javascript>javascript">let rows = 3; // Default number of rowslet cols = 3; // Default number of columnslet grid = [];let clickCount = 0; // Counter for clicksconst container = document.getElementById("gridContainer");// Function to initialize gridfunction initializeGrid() {rows = parseInt(document.getElementById("rows").value, 10);cols = parseInt(document.getElementById("cols").value, 10);clickCount = 0; // Reset click count// Initialize grid with random 0s and 1sgrid = Array.from({ length: rows }, () => Array.from({ length: cols }, () => Math.random() < 0.5 ? 1 : 0));// Set grid layout styles dynamicallycontainer.style.gridTemplateRows = `repeat(${rows}, 30px)`; // Fixed height for rowscontainer.style.gridTemplateColumns = `repeat(${cols}, 30px)`; // Fixed width for columnscontainer.classList.add("grid");// Render gridcreateGrid();}// Function to render gridfunction createGrid() {container.innerHTML = ""; // Clear existing gridgrid.forEach((row, rowIndex) => {row.forEach((cell, colIndex) => {const button = document.createElement("button");button.className = `cell ${cell ? "black" : ""}`; // Black if 1, white if 0button.onclick = () => toggleCell(rowIndex, colIndex);container.appendChild(button);});});checkWin(); // Check for win condition after rendering}// Toggle cell and adjacent cellsfunction toggleCell(x, y) {clickCount++; // Increment click countgrid[x][y] ^= 1;if (x > 0) grid[x - 1][y] ^= 1; // Topif (x < rows - 1) grid[x + 1][y] ^= 1; // Bottomif (y > 0) grid[x][y - 1] ^= 1; // Leftif (y < cols - 1) grid[x][y + 1] ^= 1; // RightcreateGrid(); // Re-render the grid}// Fill all cells with blackfunction fillAllBlack() {grid = Array.from({ length: rows }, () => Array.from({ length: cols }, () => 1)); // All 1sclickCount = 0; // Reset click countcreateGrid(); // Re-render the grid}// Check if all cells are whitefunction checkWin() {const allWhite = grid.every(row => row.every(cell => cell === 0)); // Check if all cells are 0if (allWhite) {setTimeout(() => alert(`Congratulations! You turned all the cells white! 🎉\nYou completed the game in ${clickCount} steps.`), 100);}}// Initial renderinitializeGrid();</script>
</body>
</html>

http://www.ppmy.cn/ops/137958.html

相关文章

AI与ArcGIS Pro的地理空间分析和可视化

AI思维已经成为一种必备的能力&#xff0c;ArcGIS Pro3的卓越性能与ChatGPT的智能交互相结合&#xff0c;将会为您打造了一个全新的工作流程! 那么如何将火热的ChatGPT与ArcGIS Pro3相结合&#xff0c;使我们无需自己进行复杂的编程&#xff0c;通过强大的ChatGPT辅助我们完成地…

大厂也在用的分布式链路追踪:TraceIdFilter + MDC + Skywalking

痛点 查线上日志时&#xff0c;同一个 Pod 内多线程日志交错&#xff0c;很难追踪每个请求对应的日志信息。 日志收集工具将多个 Pod 的日志收集到同一个数据库中后&#xff0c;情况就更加混乱不堪了。 解决 TraceId MDC 前端每次请求时&#xff0c;添加 X-App-Trace-Id 请…

Git Github Gitlab与Gitee的关系

Git是代码版本管理工具 -------项目通过Git可以切换到任意代码版本 Github和Gitee是基于Git技术构建的远程仓库网站 -------可以将你的代码仓库提交上去保存 GitHub与Gitee的区别 -------前者是国外建立,资源更丰富,后者是国内建立,免费功能更多 Gitlab和Github功能类似 …

数据结构进阶(C++) -- 红黑树的模拟实现

红黑树 概念 红黑树和AVL树一样&#xff0c;也是一棵二叉搜索树&#xff0c;相较于AVL树&#xff0c;它的每个节点没有平衡因子&#xff0c;但是增加了一个表示颜色的变量&#xff0c;红黑树确保没有一条路径会比其他录径长出2倍&#xff0c;因而是接近平衡的&#xff0c;虽然…

MySQL解决数据导入导出含有外键的情况

使用的软件的Navicat Premium 16 1.数据导出为sql 需要使用【数据导出】的模式&#xff0c;不要直接使用转储SQL文件&#xff0c;防止不同版本对外键的关联关系没做处理。 2. 数据导入

C++软件设计模式之组合模式与其他模式的协作举例

组合模式&#xff08;Composite Pattern&#xff09;、装饰器模式&#xff08;Decorator Pattern&#xff09;、享元模式&#xff08;Flyweight Pattern&#xff09;、迭代器模式&#xff08;Iterator Pattern&#xff09;和访问者模式&#xff08;Visitor Pattern&#xff09;…

【前端开发】小程序无感登录验证

概述 封装的网络请求库&#xff0c;主要用于处理 API 请求并支持自动处理 token 过期 和 token 刷新&#xff0c;适用于需要身份验证的应用场景&#xff0c;特别是在移动端中。 主要功能 自动附加 Token 在每个请求中自动附加 Authorization 头部&#xff0c;使用存储的 acces…

Matlab数字信号处理——音频信号处理与分析GUI

1.实现内容 实现功能有回响、变声、倒放、变速、音量调整、加噪、设计 FIR和 IR 滤波器实现去噪功能(高通低通带通带阻)&#xff0c;并且在时域波形图和频域波形展示变化。滤波器包括各种参数的选择、滤波器结构和类型的选择等。同时GUI上还包含打开、播放、保存、退出功能。 …