Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ai.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
## 心得感悟

<!-- 请在此部分分享你在完成作业中使用 AI 的过程与方法,最好能体现自己的思考(使用层面的思考就行,比如怎么用 AI 的效果更好) -->

我认为可以利用AI检查代码,或者搜索一些知识点,比如,我在假期学习前端的时间较短,学习的内容不够全面,导致我在写游戏的时候经常碰到一些想用但又不知道怎么用的功能就会去问豆包,得到答案之后再详细学一下里面涉及到的一些知识点,把知识点吃透;写完一段代码我就会把他丢给AI,让AI帮我检查一下是否有问题,并吸取教训。我认为这样做能达到最好的效果
## prompt 记录

<!-- 可以记录一下与 AI 交互的 prompt 记录,以及 AI 给出的大致回答,用于总结改进 -->
Expand Down
2 changes: 1 addition & 1 deletion git-test.md
Original file line number Diff line number Diff line change
@@ -1 +1 @@
hello world
hello oureda
Binary file modified presentation.pptx
Binary file not shown.
175 changes: 174 additions & 1 deletion project/index.css
Original file line number Diff line number Diff line change
@@ -1 +1,174 @@
/* 请在此文件中给出你的 CSS 代码 */
/* 全局样式重置 */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
background-color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#game-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

#message{
text-align: center;
}
header {
border-bottom: 1px solid #d3d6da;
width: 100%;
text-align: center;
margin-bottom: 30px;
}

h1 {
font-size: 2.5rem;
letter-spacing: 0.2rem;
margin: 10px 0;
}

/* 重新开始按钮 */
#restart-btn,#answer-btn{
margin: 10px 0 14px;
padding: 8px 14px;
border: 1px solid #000000;
background: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}

#restart-btn:hover,#answer-btn:hover {
background: #f6f7f8;
box-shadow: 0 0 3px black;
}

#restart-btn:active,#answer-btn:active {
background: #f6f7f8;
box-shadow: 0 0 0 black;
}

/* 网格布局:6行5列 */
#board {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 5px;
padding: 10px;
}

/* 单个格子样式 */
.cell {
width: 60px;
height: 60px;
border: 2px solid #d3d6da;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-weight: bold;
text-transform: lowercase;
transition: all 0.1s ease;
box-sizing: border-box;
border-radius: 5px;
}

/* 当格子内有字母但未提交时的边框颜色 */
.cell:not(:empty) {
border-color: #878a8c;
}

/* 根据 data-color 上色 */
.cell[data-color="g"] {
background: #787c7e; /* 灰 */
border-color: #787c7e;
color: #fff;
}

.cell[data-color="y"] {
background: #c9b458; /* 黄 */
border-color: #c9b458;
color: #fff;
}

.cell[data-color="b"] {
background: #6aaa64; /* 绿(这里用 b 表示 green) */
border-color: #6aaa64;
color: #fff;
}

.key[data-color="g"] {
background: #787c7e; /* 灰 */
border-color: #787c7e;
color: #fff;
}

.key[data-color="y"] {
background: #c9b458; /* 黄 */
border-color: #c9b458;
color: #fff;
}

.key[data-color="b"] {
background: #6aaa64; /* 绿(这里用 b 表示 green) */
border-color: #6aaa64;
color: #fff;
}

/* 适配移动端 */
@media (max-width: 400px) {
.cell {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
}

/*虚拟键盘*/
#keyboard{
background-color: rgb(255, 255, 255);
border: 3px solid black;
display: flex;
flex-wrap: wrap;
gap: 2px;
width: 652px;

border-radius: 10px;
position: absolute;
bottom: 100px;
left:550px;
box-shadow: 0 0 10px black;
}
#enter{
width: 50px;
}

#none2{
height: 50px;
width: 40px;
}
#backspace{
width:110px ;
}
.key{
width: 50px;
height: 50px;
background-color: rgb(255, 255, 255);
border: 3px solid black;
border-radius: 5px;
margin: 4px;
transition: 0.1s;
text-align: center;
vertical-align: middle;
box-shadow: 0 0 5px rgb(0, 0, 0);
cursor: pointer;
}
.key:active{
box-shadow: 0 0 0 rgb(0, 0, 0);

}
99 changes: 93 additions & 6 deletions project/index.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,98 @@
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordle</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wordle</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- 请在此文件中给出你的 html 代码并引入同目录下的 css 和 js 文件来实现样式和逻辑功能 -->
<div id="game-wrapper">
<header>
<h1>WORDLE</h1>
<button id="restart-btn" type="button">重新开始</button>
<button id="answer-btn" type="button">查看答案</button>

</header>

<!-- 状态提示 -->
<div id="message" style="margin-bottom: 14px; min-height: 24px;"></div>

<div id="board">
<div class="cell" id="cell-1"></div>
<div class="cell" id="cell-2"></div>
<div class="cell" id="cell-3"></div>
<div class="cell" id="cell-4"></div>
<div class="cell" id="cell-5"></div>

<div class="cell" id="cell-6"></div>
<div class="cell" id="cell-7"></div>
<div class="cell" id="cell-8"></div>
<div class="cell" id="cell-9"></div>
<div class="cell" id="cell-10"></div>

<div class="cell" id="cell-11"></div>
<div class="cell" id="cell-12"></div>
<div class="cell" id="cell-13"></div>
<div class="cell" id="cell-14"></div>
<div class="cell" id="cell-15"></div>

<div class="cell" id="cell-16"></div>
<div class="cell" id="cell-17"></div>
<div class="cell" id="cell-18"></div>
<div class="cell" id="cell-19"></div>
<div class="cell" id="cell-20"></div>

<div class="cell" id="cell-21"></div>
<div class="cell" id="cell-22"></div>
<div class="cell" id="cell-23"></div>
<div class="cell" id="cell-24"></div>
<div class="cell" id="cell-25"></div>

<div class="cell" id="cell-26"></div>
<div class="cell" id="cell-27"></div>
<div class="cell" id="cell-28"></div>
<div class="cell" id="cell-29"></div>
<div class="cell" id="cell-30"></div>
</div>

<!--键盘-->
</div>
<div id="keyboard">
<div class="key" id="q">q</div>
<div class="key" id="w">w</div>
<div class="key" id="e">e</div>
<div class="key" id="r">r</div>
<div class="key" id="t">t</div>
<div class="key" id="y">y</div>
<div class="key" id="u">u</div>
<div class="key" id="i">i</div>
<div class="key" id="o">o</div>
<div class="key" id="p">p</div>


<div class="key" id="a">a</div>
<div class="key" id=s>s</div>
<div class="key" id="d">d</div>
<div class="key" id="f">f</div>
<div class="key" id="g">g</div>
<div class="key" id="h">h</div>
<div class="key" id="j">j</div>
<div class="key" id="k">k</div>
<div class="key" id="l">l</div>
<div class="key" id="enter">enter</div>

<div id="none2"></div>
<div class="key" id="z">z</div>
<div class="key" id="x">x</div>
<div class="key" id="c">c</div>
<div class="key" id="v">v</div>
<div class="key" id="b">b</div>
<div class="key" id="n">n</div>
<div class="key" id="m">m</div>

<div class="key" id="backspace">backspace</div>

<script src="./index.js"></script>
</body>
</html>
</html>
Loading