集中实验3 方块游戏 实验要求： 1）在800*800的框中每隔2秒随机位置生成小方块，宽高为5px，颜色为绿色，随着生存时间的增加，宽高逐渐变大，最多为10px，颜色逐渐转红； 2）小方块在框中随机移动，每次移动距离在5px以内，不能移出框外； 3）用鼠标点击任意一个方块，则方块消失； 4）如果框中的方块数目少于20个，则新生成一个。

好的，这个方块游戏的实现可以使用HTML、CSS和JavaScript来完成。下面是对要求的步骤的一些代码实现建议：

1. 在HTML中创建一个800*800的框，并且添加一个计数器元素来显示当前方块数目。

<div id="container">
   <div id="counter">0</div>
</div>

2. 在CSS中设置框和计数器的样式，包括背景颜色和字体大小等。

#container {
   width: 800px;
   height: 800px;
   background-color: #f0f0f0;
   position: relative;
   margin: 0 auto;
}

#counter {
   font-size: 24px;
   color: #333;
   text-align: center;
   position: absolute;
   top: 10px;
   left: 10px;
   width: 50px;
   height: 50px;
   line-height: 50px;
   border-radius: 50%;
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

3. 在JavaScript中实现方块的生成和移动。

// 定义一个计数器，用于记录当前方块数
let count = 0;

// 定义一个函数，用于生成新的方块
function createBlock() {
   // 生成一个div元素作为方块
   const block = document.createElement('div');
   block.className = 'block';
   block.style.width = '5px';
   block.style.height = '5px';
   block.style.backgroundColor = '#00ff00';

   // 在框中随机生成方块的位置
   const x = Math.floor(Math.random() * 790);
   const y = Math.floor(Math.random() * 790);
   block.style.left = x + 'px';
   block.style.top = y + 'px';

   // 将方块添加到框中
   const container = document.getElementById('container');
   container.appendChild(block);

   // 计数器加一
   count++;

   // 如果方块数目小于20，继续生成新的方块
   if (count < 20) {
      setTimeout(createBlock, 2000);
   }
}

// 每隔一段时间生成一个新的方块
setTimeout(createBlock, 2000);

// 定义一个函数，用于移动方块
function moveBlock(block) {
   // 在5px以内随机移动方块的位置
   const x = parseInt(block.style.left);
   const y = parseInt(block.style.top);
   const dx = Math.floor(Math.random() * 11) - 5;
   const dy = Math.floor(Math.random() * 11) - 5;
   const nx = x + dx;
   const ny = y + dy;

   // 确保方块不会移出框外
   if (nx < 0) {
      block.style.left = '0px';
   } else if (nx > 795) {
      block.style.left = '795px';
   } else {
      block.style.left = nx + 'px';
   }
   if (ny < 0) {
      block.style.top = '0px';
   } else if (ny > 795) {
      block.style.top = '795px';
   } else {
      block.style.top = ny + 'px';
   }

   // 如果方块还存在，继续移动
   if (block.parentNode) {
      setTimeout(function() {
         moveBlock(block);
      }, 50);
   }
}

// 获取所有的方块元素，并且为它们添加点击事件处理函数
const blocks = document.getElementsByClassName('block');
for (let i = 0; i < blocks.length; i++) {
   const block = blocks[i];
   block.addEventListener('click', function() {
      // 点击时将方块从容器中移除，并且计数器减一
      block.parentNode.removeChild(block);
      count--;
   });

   // 随着生存时间的增加，方块的宽高逐渐变大，颜色逐渐转红
   setTimeout(function() {
      if (block.parentNode) {
         const width = parseInt(block.style.width);
         const height = parseInt(block.style.height);
         const color = block.style.backgroundColor;
         if (width < 10 && height < 10) {
            block.style.width = (width + 1) + 'px';
            block.style.height = (height + 1) + 'px';
         }
         if (color != '#ff0000') {
            const r = parseInt(color.substr(1, 2), 16);
            const g = parseInt(color.substr(3, 2), 16);
            const b = parseInt(color.substr(5, 2), 16);
            const nr = Math.min(255, r + 10);
            const ng = Math.max(0, g - 10);
            const nb = Math.max(0, b - 10);
            const nc = '#' + nr.toString(16).padStart(2, '0') + ng.toString(16).padStart(2, '0') + nb.toString(16).padStart(2, '0');
            block.style.backgroundColor = nc;
         }
      }
   }, Math.floor(Math.random() * 10000));
}

// 开始移动所有的方块
for (let i = 0; i < blocks.length; i++) {
   moveBlock(blocks[i]);
}

这样就完成了方块游戏的实现。