通义千问生成的生命游戏代码 - W3xue在线HTML/CSS/JS运行工具

<!DOCTYPE html>
<html>
<head>
	<title>生命游戏</title>
	<style>
		body {
	background-color: #333;
	font-family: Arial, sans-serif;
}

#container {
	position: relative;
	width: 600px;
	height: 400px;
	border: 1px solid black;
}

.cell {
	position: absolute;
	width: 50px;
	height: 50px;
	border: 1px solid gray;
	font-size: 24px;
}

.alive {
	position: absolute;
	width: 0;
	height: 0;
	background-color: white;
	border: 1px solid gray;
	cursor: pointer;
}

.alive.alive-front {
	animation: pulse 2s infinite;
}

.alive.alive-rear {
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0% {
		width: 100%;
		height: 100%;
		background-color: white;
		border: 1px solid gray;
	}
	50% {
		width: 0;
		height: 0;
		background-color: white;
		border: 1px solid gray;
		animation-delay: 2s;
	}
	100% {
		width: 100%;
		height: 100%;
		background-color: black;
		border: 1px solid gray;
	}
}
	</style>
</head>
<body>
	<div id="container"></div>
	<script>
		const container = document.getElementById('container');
let aliveCount = 0;

function setup() {
	createCanvas(400, 400);
}

function draw() {
	background(220);

for (let i = 0; i < container.children.length; i++) {
		if (container.children[i].classList.contains('alive')) {
			aliveCount++;
			container.children[i].style.animationIterationCount = aliveCount;
			if (aliveCount == 2) {
				// 设置哨兵在最后
				container.children[i].classList.add('alive-rear');
			}
		}
	}

requestAnimationFrame(draw);
}

setup();
draw();
	</script>
</body>
</html>

​x
            container.children[i].style.animationIterationCount = aliveCount;
 
<!DOCTYPE html>
<html>
<head>
    <title>生命游戏</title>
    <style>
        body {
    background-color: #333;
    font-family: Arial, sans-serif;
}
​
#container {
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid black;
}
​
.cell {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid gray;
    font-size: 24px;
}
​
.alive {
    position: absolute;
    width: 0;
    height: 0;
    background-color: white;
    border: 1px solid gray;
    cursor: pointer;
}
​
.alive.alive-front {
    animation: pulse 2s infinite;
}
​
.alive.alive-rear {
    animation: pulse 1s infinite;
}
​
@keyframes pulse {
    0% {
        width: 100%;
        height: 100%;
        background-color: white;
        border: 1px solid gray;