HTML JavaScript 康威生命游戏

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>康威生命游戏</title><style>body {font-family: Arial, sans-serif;text-align: center;}#game-board {display: inline-block;border: 1px solid black;}.cell {width: 15px;height: 15px;float: left;border:1px solid black;background-color: white;}.cell.alive {background-color: black;}button {margin-top: 10px;}</style>
</head>
<body><h1 style="font-size: 14px;">康威生命游戏 先点击设定初始图形,再点击开始</h1><div id="game-board"></div><button onclick="startGame()" style="width: 50px;">开始</button><button onclick="clearBoard()" style="width: 50px;">清除</button><script>const ROWS = 30;const COLS = 60;let board = [];let nextBoard = [];let gameInterval = null; // 添加一个全局变量来存储定时器的引用  function initializeBoard() {board = [];nextBoard = [];for (let i = 0; i < ROWS; i++) {board[i] = [];nextBoard[i] = [];for (let j = 0; j < COLS; j++) {board[i][j] = false;nextBoard[i][j] = false;}}}function drawBoard() {const gameBoard = document.getElementById('game-board');gameBoard.innerHTML = '';for (let i = 0; i < ROWS; i++) {for (let j = 0; j < COLS; j++) {const cell = document.createElement('div');cell.className = 'cell';if (board[i][j]) {cell.classList.add('alive');}cell.addEventListener('click', () => {board[i][j] = !board[i][j];drawBoard();});gameBoard.appendChild(cell);}const br = document.createElement('br');gameBoard.appendChild(br);}}function countNeighbors(row, col) {let count = 0;for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {if (i === 0 && j === 0) {continue;}const neighborRow = row + i;const neighborCol = col + j;if (neighborRow >= 0 &&neighborRow < ROWS &&neighborCol >= 0 &&neighborCol < COLS &&board[neighborRow][neighborCol]) {count++;}}}return count;}function updateBoard() {for (let i = 0; i < ROWS; i++) {for (let j = 0; j < COLS; j++) {const neighbors = countNeighbors(i, j);if (board[i][j]) {if (neighbors < 2 || neighbors > 3) {nextBoard[i][j] = false;} else {nextBoard[i][j] = true;}} else {if (neighbors === 3) {nextBoard[i][j] = true;}}}}for (let i = 0; i < ROWS; i++) {for (let j = 0; j < COLS; j++) {board[i][j] = nextBoard[i][j];}}}function startGame() {// 在启动新定时器之前,检查并清除可能存在的旧定时器  if (gameInterval !== null) {  clearInterval(gameInterval);  gameInterval = null;  }  // 启动新的定时器并保存在全局变量中  gameInterval = setInterval(() => {  updateBoard();  drawBoard();  }, 300);  }function clearBoard() {// 清除定时器  if (gameInterval !== null) {  clearInterval(gameInterval);  gameInterval = null;  }  initializeBoard();drawBoard();}initializeBoard();drawBoard();</script>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/607773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS-基础语法(一)

JavaScript简单介绍 变量 常量 数据类型 类型转换 案例 1.JavaScript简单介绍 JavaScript 是什么&#xff1f; 是一种运行在客户端&#xff08;浏览器&#xff09;的编程语言&#xff0c;可以实现人机交互效果。 JS的作用 JavaScript的组成 JSECMAScript( 基础语法 )…

每日算法打卡:分巧克力 day 9

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 题目分析示例代码 原题链接 1227. 分巧克力 题目难度&#xff1a;简单 题目来源&#xff1a;第八届蓝桥杯省赛C A/B组,第八届蓝桥杯省赛Java A/B/C组 题目描述 儿童节那天有 …

流程挖掘在优化核心业务、增强可见性和提升自动化方面的三重效应

在过去二十年里&#xff0c;流程挖掘技术已由最初的学术理念演变成一种成熟的软件基础工具&#xff0c;它致力于流程的可视化、深度分析及其优化。传统的手动流程改进方法往往会受到主观偏见和误差的干扰&#xff0c;而流程挖掘技术则通过结合流程建模与数据挖掘手段&#xff0…

mysql 优化工具 EXPLAIN详解

EXPLAIN 是 MySQL 中用于查看查询执行计划的关键字&#xff0c;通过 EXPLAIN 可以了解 MySQL 优化器是如何选择执行查询的。EXPLAIN 的输出信息包括了许多字段&#xff0c;其中一些关键的字段和类别如下&#xff1a; id&#xff1a; 查询的标识符&#xff0c;用于标识查询执行计…

【2024系统架构设计】 系统架构设计师第二版-嵌入式系统架构设计理论与实践

目录 一 嵌入式系统软件架构的原理 二 嵌入式系统软件架构的设计方法 三 案例分析 一 嵌入式系统软件架构的原理 🚀嵌入式系统的典型架构可以分为

java.lang.ClassNotFoundException: jakarta.servlet.Servlet

联系servlet的使用时&#xff0c;编写了servlet的处理器&#xff0c;但是浏览器报500错误&#xff0c;有时候是404错误 WebServlet("/mayikt") public class Servlet1 implements Servlet {Overridepublic void init(ServletConfig servletConfig) throws ServletExc…

MySQL5.7 InnoDB 磁盘结构之索引Index

官网地址&#xff1a;MySQL :: MySQL 5.7 Reference Manual :: 14.6.2.1 Clustered and Secondary Indexes 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. MySQL 5.7 参考手册 / ... / 聚集索引和二级索引 14…

C++实现简单贪吃蛇游戏

文章目录 1 开发历程2 开发思路3 使用介绍4 源文件代码5 游戏截图6 小结 1 开发历程 游戏使用C语言开发&#xff0c;是博主某个下午心血来潮的结果&#xff0c;后面又花了点时间加了计分&#xff0c;记录历史得分的功能。 2 开发思路 其实贪吃蛇主要难在蛇身的移动上&#x…

AWS IoT Core 实战指南

Amazon Web Services (AWS) 提供了全球范围内的托管服务,其中包括 AWS IoT Core,专为连接和管理物联网设备而设计。这个实战指南将带你一步步了解如何使用 AWS IoT Core 来注册设备、提高安全性、进行通信以及利用设备影子功能。 设备注册 1. 创建 Thing(设备) 在 AWS I…

cocos creator 如何绑定参数到编辑器

很多cocos creator同学不知道如何绑定组件属性到编辑器上&#xff0c;今天我们来教大家如何绑定 1: 基本数据属性绑定到编辑器 这个非常简单&#xff0c;模板是属性名字: 默认的值; Is_debug: false, speed: 100, 2: 系统组件类型与节点绑定到编辑器 属性名字: { type: 组件…

App更换图标

App更换图标 京东淘宝的每到618或者双十一的时候&#xff0c;app图标都会贴合相关主题更换一下&#xff0c;但是那个时间段app也没有升级&#xff0c;所以说肯定是有一个配置能够更改app的图标。 查了一些文档&#xff0c;发现了如下的方法。 准备图片 准备120x120和180x18…

带着股票转户——转托管流程分享

前一阵子&#xff0c;有部分朋友说想换掉原来的券商&#xff0c;但又不想卖出股票&#xff0c;这时候就可以通过券商的“转托管”功能&#xff0c;把股票从原来的券商账户&#xff0c;转移到新的券商账户中。 转托管的好处显而易见&#xff0c;不需要卖出股票/重新买入股票&am…

什么是宏任务与微任务以及它们的执行顺序

文章目录 宏任务微任务 微任务和宏任务是指在 JavaScript 中执行异步任务的两种不同的队列。 宏任务 宏任务&#xff1a; 宏任务是指由浏览器发起的、在事件循环中执行的异步任务。常见的宏任务包括&#xff1a; setTimeoutsetIntervalI/O 操作UI 渲染 宏任务的执行顺序是在每…

Ubuntu20.04扩展磁盘后系统无法启动

z​​​​​​Ubuntu20.04虚拟机扩展磁盘后系统无法启动 - 黑夫和惊 - 博客园 (cnblogs.com) 找了半天的解决方法&#xff0c;这个人的最好用。 只不过进入BOOT那个地方&#xff0c;不需要狂按F2&#xff0c;直接在虚拟机的开机键边上的小三角&#xff0c;选择&#xff0c;“…

代码随想录刷题第四十三天| 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

代码随想录刷题第四十三天 今天为三道0-1背包问题的变种&#xff0c; 分别有三个小问题 给定一个容量为j的背包&#xff0c;尽可能装下物品&#xff0c;找到能装下物品的最大价值 dp[i][j] max(dp[i-1][j], dp[i-1][j-nums[i]]nums[i]) 给定一个容量为j的背包&#xff0c;找…

VScode/Xshell连接学校服务器

vscode连学校服务器 1.连接atrust VPN2.Xshell连接服务器2.1创建一个自己的用户 3.xftp传文件4.vscode连接服务器4.1下载remote-ssh4.2连接服务器4.3激活conda环境4.4运行代码 5. pytorch版本不兼容解决方案 1.连接atrust VPN 如果是使用的是校园网&#xff0c;可以不连接 2…

【全栈开发|Fresh框架】Fresh环境安装与快速体验Fresh全栈开发

文章目录 前言一、环境配置1. 安装Deno2. 安装idea插件 二、Hello World1.创建项目2.项目结构3. 创建一个路由4. 创建一个动态路由5. 自定义handlers1. 自定义响应头2. 随即生成uuid 6. 表单提交7. 部署到生产环境1. 将代码上传到github2. 在Deno控制面板创建一个项目 总结 前言…

面试算法100:三角形中最小路径之和

题目 在一个由数字组成的三角形中&#xff0c;第1行有1个数字&#xff0c;第2行有2个数字&#xff0c;以此类推&#xff0c;第n行有n个数字。例如&#xff0c;下图是一个包含4行数字的三角形。如果每步只能前往下一行中相邻的数字&#xff0c;请计算从三角形顶部到底部的路径经…

强烈推荐!这8款在线画图工具好用极了

即时设计 即时设计作为一种简单的绘图工具&#xff0c;为创作者提供了一个方便而强大的创作平台&#xff0c;具有丰富的绘图工具、实时合作、矢量绘图和组件设计系统等功能。即时设计可以满足不同的创作需求&#xff0c;使创意自由流动。 强大的矢量编辑工具 即时设计提供了…

苹果电脑Markdown文本编辑Typora mac功能介绍

Typora mac是一款跨平台的Markdown编辑器&#xff0c;支持Windows、MacOS和Linux操作系统。它具有实时预览功能&#xff0c;能够自动将Markdown文本转换为漂亮的排版效果&#xff0c;让用户专注于写作内容而不必关心格式调整。Typora Mac版除了支持常见的Markdown语法外&#x…