Spaces:
Running
Running
Update index.html
Browse files- index.html +38 -24
index.html
CHANGED
|
@@ -1,4 +1,3 @@
|
|
| 1 |
-
|
| 2 |
<!DOCTYPE html>
|
| 3 |
<html>
|
| 4 |
<head>
|
|
@@ -10,11 +9,12 @@
|
|
| 10 |
position: relative;
|
| 11 |
overflow: hidden;
|
| 12 |
background: #2a2a2a;
|
|
|
|
| 13 |
}
|
| 14 |
|
| 15 |
.character {
|
| 16 |
-
width:
|
| 17 |
-
height: 100px;
|
| 18 |
position: absolute;
|
| 19 |
bottom: 0;
|
| 20 |
transition: height 0.2s;
|
|
@@ -23,12 +23,12 @@
|
|
| 23 |
background-position: center;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
#player {
|
| 27 |
left: 100px;
|
| 28 |
background-image: url('kstand1.png');
|
| 29 |
}
|
| 30 |
|
| 31 |
-
#enemy {
|
| 32 |
right: 100px;
|
| 33 |
background: #f44;
|
| 34 |
}
|
|
@@ -42,15 +42,15 @@
|
|
| 42 |
border: 2px solid #fff;
|
| 43 |
}
|
| 44 |
|
| 45 |
-
#playerHealthBar { left: 20px; }
|
| 46 |
-
#enemyHealthBar { right: 20px; }
|
| 47 |
-
|
| 48 |
.healthFill {
|
| 49 |
height: 100%;
|
| 50 |
width: 100%;
|
| 51 |
transition: width 0.1s;
|
| 52 |
}
|
| 53 |
|
|
|
|
|
|
|
|
|
|
| 54 |
#playerHealthFill { background: linear-gradient(90deg, #44f, #88f); }
|
| 55 |
#enemyHealthFill { background: linear-gradient(90deg, #f44, #f88); }
|
| 56 |
|
|
@@ -81,12 +81,6 @@
|
|
| 81 |
animation: ultimateEffect 0.3s linear;
|
| 82 |
}
|
| 83 |
|
| 84 |
-
@keyframes ultimateEffect {
|
| 85 |
-
0% { opacity: 0.3; }
|
| 86 |
-
50% { opacity: 0.8; }
|
| 87 |
-
100% { opacity: 0.3; }
|
| 88 |
-
}
|
| 89 |
-
|
| 90 |
#timer {
|
| 91 |
position: fixed;
|
| 92 |
top: 20px;
|
|
@@ -105,7 +99,7 @@
|
|
| 105 |
padding: 15px;
|
| 106 |
background: rgba(0,0,0,0.8);
|
| 107 |
color: white;
|
| 108 |
-
border-radius:
|
| 109 |
font-family: monospace;
|
| 110 |
}
|
| 111 |
|
|
@@ -116,13 +110,35 @@
|
|
| 116 |
padding: 10px;
|
| 117 |
background: rgba(0,0,0,0.8);
|
| 118 |
color: white;
|
| 119 |
-
border-radius: 5px;
|
| 120 |
font-family: monospace;
|
| 121 |
}
|
| 122 |
|
| 123 |
.facing-left {
|
| 124 |
transform: scaleX(-1);
|
| 125 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 126 |
</style>
|
| 127 |
</head>
|
| 128 |
<body>
|
|
@@ -151,7 +167,6 @@
|
|
| 151 |
</div>
|
| 152 |
|
| 153 |
<script>
|
| 154 |
-
// 게임 설정
|
| 155 |
const SETTINGS = {
|
| 156 |
FPS: 60,
|
| 157 |
FRAME_TIME: 1000/60,
|
|
@@ -168,7 +183,6 @@
|
|
| 168 |
ANIMATION_INTERVAL: 500
|
| 169 |
};
|
| 170 |
|
| 171 |
-
// 스프라이트 상태 정의
|
| 172 |
const SPRITES = {
|
| 173 |
stand: ['kstand1.png', 'kstand2.png', 'kstand3.png']
|
| 174 |
};
|
|
@@ -178,31 +192,31 @@
|
|
| 178 |
this.element = element;
|
| 179 |
this.isPlayer = isPlayer;
|
| 180 |
this.health = SETTINGS.INITIAL_HEALTH;
|
| 181 |
-
this.pos = {
|
| 182 |
-
x: isPlayer ? 100 : 650,
|
| 183 |
-
y: 0
|
| 184 |
-
};
|
| 185 |
this.vel = { x: 0, y: 0 };
|
| 186 |
this.direction = isPlayer ? 'right' : 'left';
|
| 187 |
this.isMoving = false;
|
| 188 |
this.isAttacking = false;
|
|
|
|
| 189 |
this.currentFrame = 0;
|
| 190 |
this.lastAnimationUpdate = 0;
|
| 191 |
}
|
| 192 |
|
| 193 |
updateAnimation(timestamp) {
|
| 194 |
-
if (
|
| 195 |
if (timestamp - this.lastAnimationUpdate >= SETTINGS.ANIMATION_INTERVAL) {
|
| 196 |
this.currentFrame = (this.currentFrame + 1) % SPRITES.stand.length;
|
| 197 |
this.element.style.backgroundImage =
|
| 198 |
`url(${SPRITES.stand[this.currentFrame]})`;
|
| 199 |
this.lastAnimationUpdate = timestamp;
|
| 200 |
}
|
|
|
|
|
|
|
| 201 |
}
|
| 202 |
}
|
| 203 |
}
|
| 204 |
|
| 205 |
-
// Game
|
| 206 |
</script>
|
| 207 |
</body>
|
| 208 |
</html>
|
|
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html>
|
| 3 |
<head>
|
|
|
|
| 9 |
position: relative;
|
| 10 |
overflow: hidden;
|
| 11 |
background: #2a2a2a;
|
| 12 |
+
margin: auto;
|
| 13 |
}
|
| 14 |
|
| 15 |
.character {
|
| 16 |
+
width: 45px; /* 수정된 캐릭터 너비 */
|
| 17 |
+
height: 100px; /* 수정된 캐릭터 높이 */
|
| 18 |
position: absolute;
|
| 19 |
bottom: 0;
|
| 20 |
transition: height 0.2s;
|
|
|
|
| 23 |
background-position: center;
|
| 24 |
}
|
| 25 |
|
| 26 |
+
#player {
|
| 27 |
left: 100px;
|
| 28 |
background-image: url('kstand1.png');
|
| 29 |
}
|
| 30 |
|
| 31 |
+
#enemy {
|
| 32 |
right: 100px;
|
| 33 |
background: #f44;
|
| 34 |
}
|
|
|
|
| 42 |
border: 2px solid #fff;
|
| 43 |
}
|
| 44 |
|
|
|
|
|
|
|
|
|
|
| 45 |
.healthFill {
|
| 46 |
height: 100%;
|
| 47 |
width: 100%;
|
| 48 |
transition: width 0.1s;
|
| 49 |
}
|
| 50 |
|
| 51 |
+
#playerHealthBar { left: 20px; }
|
| 52 |
+
#enemyHealthBar { right: 20px; }
|
| 53 |
+
|
| 54 |
#playerHealthFill { background: linear-gradient(90deg, #44f, #88f); }
|
| 55 |
#enemyHealthFill { background: linear-gradient(90deg, #f44, #f88); }
|
| 56 |
|
|
|
|
| 81 |
animation: ultimateEffect 0.3s linear;
|
| 82 |
}
|
| 83 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 84 |
#timer {
|
| 85 |
position: fixed;
|
| 86 |
top: 20px;
|
|
|
|
| 99 |
padding: 15px;
|
| 100 |
background: rgba(0,0,0,0.8);
|
| 101 |
color: white;
|
| 102 |
+
border-radius: 5px;
|
| 103 |
font-family: monospace;
|
| 104 |
}
|
| 105 |
|
|
|
|
| 110 |
padding: 10px;
|
| 111 |
background: rgba(0,0,0,0.8);
|
| 112 |
color: white;
|
|
|
|
| 113 |
font-family: monospace;
|
| 114 |
}
|
| 115 |
|
| 116 |
.facing-left {
|
| 117 |
transform: scaleX(-1);
|
| 118 |
}
|
| 119 |
+
|
| 120 |
+
.counter-effect {
|
| 121 |
+
position: absolute;
|
| 122 |
+
width: 45px;
|
| 123 |
+
height: 100px;
|
| 124 |
+
border: 2px solid #0ff;
|
| 125 |
+
animation: counterAnim 0.4s linear;
|
| 126 |
+
}
|
| 127 |
+
|
| 128 |
+
@keyframes ultimateEffect {
|
| 129 |
+
0% { opacity: 0.3; }
|
| 130 |
+
50% { opacity: 0.8; }
|
| 131 |
+
100% { opacity: 0.3; }
|
| 132 |
+
}
|
| 133 |
+
|
| 134 |
+
@keyframes counterAnim {
|
| 135 |
+
0% { transform: scale(1); opacity: 1; }
|
| 136 |
+
100% { transform: scale(1.2); opacity: 0; }
|
| 137 |
+
}
|
| 138 |
+
|
| 139 |
+
.crouch {
|
| 140 |
+
height: 50px !important;
|
| 141 |
+
}
|
| 142 |
</style>
|
| 143 |
</head>
|
| 144 |
<body>
|
|
|
|
| 167 |
</div>
|
| 168 |
|
| 169 |
<script>
|
|
|
|
| 170 |
const SETTINGS = {
|
| 171 |
FPS: 60,
|
| 172 |
FRAME_TIME: 1000/60,
|
|
|
|
| 183 |
ANIMATION_INTERVAL: 500
|
| 184 |
};
|
| 185 |
|
|
|
|
| 186 |
const SPRITES = {
|
| 187 |
stand: ['kstand1.png', 'kstand2.png', 'kstand3.png']
|
| 188 |
};
|
|
|
|
| 192 |
this.element = element;
|
| 193 |
this.isPlayer = isPlayer;
|
| 194 |
this.health = SETTINGS.INITIAL_HEALTH;
|
| 195 |
+
this.pos = { x: isPlayer ? 100 : 650, y: 0 };
|
|
|
|
|
|
|
|
|
|
| 196 |
this.vel = { x: 0, y: 0 };
|
| 197 |
this.direction = isPlayer ? 'right' : 'left';
|
| 198 |
this.isMoving = false;
|
| 199 |
this.isAttacking = false;
|
| 200 |
+
this.isJumping = false;
|
| 201 |
this.currentFrame = 0;
|
| 202 |
this.lastAnimationUpdate = 0;
|
| 203 |
}
|
| 204 |
|
| 205 |
updateAnimation(timestamp) {
|
| 206 |
+
if (this.isPlayer && !this.isMoving && !this.isAttacking) {
|
| 207 |
if (timestamp - this.lastAnimationUpdate >= SETTINGS.ANIMATION_INTERVAL) {
|
| 208 |
this.currentFrame = (this.currentFrame + 1) % SPRITES.stand.length;
|
| 209 |
this.element.style.backgroundImage =
|
| 210 |
`url(${SPRITES.stand[this.currentFrame]})`;
|
| 211 |
this.lastAnimationUpdate = timestamp;
|
| 212 |
}
|
| 213 |
+
} else if (this.isPlayer) {
|
| 214 |
+
this.element.style.backgroundImage = "url('kstand1.png')";
|
| 215 |
}
|
| 216 |
}
|
| 217 |
}
|
| 218 |
|
| 219 |
+
// Game 클래스를 이어서 작성할까요?
|
| 220 |
</script>
|
| 221 |
</body>
|
| 222 |
</html>
|