zhaoxin/rock-paper-scissors
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新建

Browse Source
This commit is contained in:
赵鑫 2022-08-20 23:17:35 +08:00
parent f2dc8bebea
commit 6d0c87f45d
5 changed files with 109 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" ,content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>包剪锤</title>
</head>
<body>
<div id="game">
<div id="player1">
<div class="name">玩家甲</div>
<div class="score">0</div>
<div class="shape"></div>
</div>
<div id="player2">
<div class="shape"></div>
<div class="score">0</div>
<div class="name">玩家乙</div>
</div>
</div>
<script src="socket.io/socket.io.js"></script>
<script src="client.js"></script>
</body>
</html>

BIN
public/paper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/rock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/scissors.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

80
public/style.css Normal file
View File

@ -0,0 +1,80 @@
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
#game,
#player1,
#player2 {
display: flex;
gap: 10px;
}
.score,
.shape {
min-width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.shape {
border: 1px solid #777;
border-radius: 1rem;
}
#player1,
#player2 {
position: relative;
}
.name {
font-size: 2rem;
font-weight: 600;
position: absolute;
top: 0px;
left: 0px;
}
#player2 .name {
left: auto;
right: 0px;
}
.score {
font-size: 100px;
padding: 0 1rem;
}
#player1 .shape,
#player2 .shape {
background-repeat: no-repeat;
background-size: 200px 200px;
}
.rock {
background: url(rock.png);
}
.paper {
background: url(paper.png);
}
.scissors {
background: url(scissors.png);
}
#player2 .shape {
transform: scaleX(-1);
}