HTML01-知云接力
后端人员做前端样式的调试，真的兴趣不了一点！在此记录一些前端样式的个人小demo
知云接力（云上风暴）-起初我想做一个小游戏类型的项目，云朵上展示我每天学习的内容，这个知识点每天都会掉落一格，在界面中间部分(或者自己设置复习deadline)，当云朵掉落到不同的警戒线会变为不同的颜色，每次复习之后，点击知识点，可以输入你的学习记录，然后该云朵就会上移一格。
以下是这个demo的完成20%代码
<!DOCTYPE html>
<html lang="zh-CN">
<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;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.grid {
display: grid;
grid-template-columns: repeat(60, 20px);
/* 100列 */
grid-template-rows: repeat(30, 20px);
/* 30行 */
gap: 2px;
}
.cell {
width: 20px;
height: 20px;
background-color: #87CEEB;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
cursor: pointer;
}
.cell.falling {
background-color: #FF6347;
}
</style>
</head>
<body>
<div class="grid" id="gameGrid">
<!-- 动态生成的方格 -->
</div>
<script>
// 模拟知识点数据
const knowledgePoints = [{
category: '数学',
content: '微积分'
},
{
category: '编程',
content: 'JavaScript'
},
{
category: '历史',
content: '二战'
},
{
category: '科学',
content: '物理'
}
];
// 生成方格
const grid = document.getElementById('gameGrid');
const rowCount = 30;
const colCount = 60;
function createGrid() {
for (let row = 0; row < rowCount; row++) {
for (let col = 0; col < colCount; col++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.dataset.row = row;
cell.dataset.col = col;
grid.appendChild(cell);
}
}
}
// 初始化游戏
createGrid();
// 模拟知识点掉落
let currentRow = 0;
function dropKnowledgePoints() {
for (let col = 0; col < colCount; col++) {
const cell = document.querySelector(`[data-row="${currentRow}"][data-col="${col}"]`);
if (knowledgePoints[col]) {
cell.innerText = currentRow;
// cell.innerText = knowledgePoints[col].content;
}
cell.addEventListener('click', handleCellClick);
if (currentRow > 0) {
const oldCell = document.querySelector(`[data-row="${currentRow - 1}"][data-col="${col}"]`);
oldCell.innerText = '';
oldCell.removeEventListener('click', handleCellClick);
}
}
currentRow++;
}
// 处理方格点击事件
function handleCellClick(event) {
const cell = event.target;
const blogUrl = prompt('请输入今天的学习过程地址：');
if (blogUrl) {
cell.innerText = '';
cell.removeEventListener('click', handleCellClick);
moveUpCell(cell);
} else {
cell.classList.add('falling');
}
}
// 方格向上移动
function moveUpCell(cell) {
const row = parseInt(cell.dataset.row, 10);
const col = parseInt(cell.dataset.col, 10);
if (row > 0) {
const newCell = document.querySelector(`[data-row="${row - 1}"][data-col="${col}"]`);
newCell.innerText = cell.innerText;
newCell.addEventListener('click', handleCellClick);
cell.innerText = '';
}
}
// 初始化知识点掉落
dropKnowledgePoints();
// 模拟每一天的时间流逝
setInterval(() => {
dropKnowledgePoints();
}, 10000); // 每秒钟掉落一行
</script>
</body>
</html>