集中实验3 方块游戏 实验要求: 1)在800*800的框中每隔2秒随机位置生成小方块,宽高为5px,颜色为绿色,随着生存时间的增加,宽高逐渐变大,最多为10px,颜色逐渐转红; 2)小方块在框中随机移动,每次移动距离在5px以内,不能移出框外; 3)用鼠标点击任意一个方块,则方块消失; 4)如果框中的方块数目少于20个,则新生成一个。
时间: 2023-09-07 22:13:29 浏览: 35
好的,这个任务可以使用HTML、CSS和JavaScript来完成。以下是代码实现:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>方块游戏</title>
<meta charset="utf-8">
<style>
#box{
width: 800px;
height: 800px;
border: 1px solid black;
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="block.js"></script>
</body>
</html>
```
CSS部分:
```css
.block{
position: absolute;
background-color: green;
border-radius: 50%;
}
```
JavaScript部分:
```javascript
var box = document.getElementById('box');
var blockNum = 0;
var maxBlockNum = 20;
var interval = 2000;
var blockArr = [];
function createBlock(){
if(blockNum < maxBlockNum){
var block = document.createElement('div');
block.className = 'block';
block.style.width = '5px';
block.style.height = '5px';
block.style.backgroundColor = 'green';
block.style.left = Math.floor(Math.random() * (box.offsetWidth - parseInt(block.style.width))) + 'px';
block.style.top = Math.floor(Math.random() * (box.offsetHeight - parseInt(block.style.height))) + 'px';
block.speedX = Math.floor(Math.random() * 5) - 2;
block.speedY = Math.floor(Math.random() * 5) - 2;
block.size = 5;
block.timer = setInterval(function(){
block.style.left = parseInt(block.style.left) + block.speedX + 'px';
block.style.top = parseInt(block.style.top) + block.speedY + 'px';
if(parseInt(block.style.left) < 0){
block.speedX = -block.speedX;
block.style.left = '0px';
}
if(parseInt(block.style.left) > box.offsetWidth - parseInt(block.style.width)){
block.speedX = -block.speedX;
block.style.left = box.offsetWidth - parseInt(block.style.width) + 'px';
}
if(parseInt(block.style.top) < 0){
block.speedY = -block.speedY;
block.style.top = '0px';
}
if(parseInt(block.style.top) > box.offsetHeight - parseInt(block.style.height)){
block.speedY = -block.speedY;
block.style.top = box.offsetHeight - parseInt(block.style.height) + 'px';
}
block.size += 0.5;
block.style.width = block.size + 'px';
block.style.height = block.size + 'px';
var r = Math.floor(255 * (block.size - 5) / 5);
var g = Math.floor(255 * (10 - block.size) / 5);
block.style.backgroundColor = 'rgb(' + r + ', ' + g + ', 0)';
if(block.size >= 10){
clearInterval(block.timer);
box.removeChild(block);
blockArr.splice(blockArr.indexOf(block), 1);
blockNum--;
}
}, 50);
box.appendChild(block);
blockArr.push(block);
blockNum++;
}
}
setInterval(createBlock, interval);
box.onclick = function(e){
var target = e.target;
if(target.className == 'block'){
clearInterval(target.timer);
box.removeChild(target);
blockArr.splice(blockArr.indexOf(target), 1);
blockNum--;
}
}
setInterval(function(){
if(blockNum < maxBlockNum){
createBlock();
}
}, 1000);
```
代码说明:
1. 首先定义了变量box,表示方块游戏的容器;
2. 定义了变量blockNum和maxBlockNum,表示当前方块数量和最大方块数量;
3. 定义了变量interval,表示方块生成的时间间隔;
4. 定义了数组blockArr,存储所有方块的元素;
5. 定义了函数createBlock,用于生成一个新的方块;
6. 在createBlock函数中,首先判断当前方块数量是否小于最大方块数量,如果是,则创建一个新的div元素,设置其样式和位置,并且随机设置其水平和垂直方向上的速度;
7. 然后启动一个定时器,每隔50毫秒更新方块的位置、大小和颜色;
8. 在更新方块大小和颜色时,根据方块的大小计算出红色和绿色的分量,并设置其背景色;
9. 当方块的大小达到10px时,清除该方块的定时器,从容器中移除该元素,并且从blockArr数组中删除该元素;
10. 在容器中添加该元素,并且将该元素添加到blockArr数组中;
11. 在容器上设置一个点击事件,当点击到方块时,清除该方块的定时器,从容器中移除该元素,并且从blockArr数组中删除该元素;
12. 最后设置一个定时器,每隔一秒检查方块数量是否小于最大方块数量,如果是,则生成一个新的方块。