04 inizio monster slayer game
| New file |
| | |
|---|
| | | const app = Vue.createApp({ |
|---|
| | | data() { |
|---|
| | | return {}; |
|---|
| | | }, |
|---|
| | | computed: {}, |
|---|
| | | watch: {}, |
|---|
| | | methods: {}, |
|---|
| | | }); |
|---|
| | | |
|---|
| | | app.mount("#game"); |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8" /> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|---|
| | | <title>Vue Basics</title> |
|---|
| | | <link |
|---|
| | | href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" |
|---|
| | | rel="stylesheet" |
|---|
| | | /> |
|---|
| | | <link rel="stylesheet" href="styles.css" /> |
|---|
| | | <script src="https://unpkg.com/vue@next" defer></script> |
|---|
| | | <script src="app.js" defer></script> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <header> |
|---|
| | | <h1>Monster Slayer</h1> |
|---|
| | | </header> |
|---|
| | | <div id="game"> |
|---|
| | | <section id="monster" class="container"> |
|---|
| | | <h2>Monster Health</h2> |
|---|
| | | <div class="healthbar"> |
|---|
| | | <div class="healthbar__value"></div> |
|---|
| | | </div> |
|---|
| | | </section> |
|---|
| | | <section id="player" class="container"> |
|---|
| | | <h2>Your Health</h2> |
|---|
| | | <div class="healthbar"> |
|---|
| | | <div class="healthbar__value"></div> |
|---|
| | | </div> |
|---|
| | | </section> |
|---|
| | | <section id="controls"> |
|---|
| | | <button>ATTACK</button> |
|---|
| | | <button>SPECIAL ATTACK</button> |
|---|
| | | <button>HEAL</button> |
|---|
| | | <button>SURRENDER</button> |
|---|
| | | </section> |
|---|
| | | <section id="log" class="container"> |
|---|
| | | <h2>Battle Log</h2> |
|---|
| | | <ul></ul> |
|---|
| | | </section> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | * { |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | html { |
|---|
| | | font-family: 'Jost', sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | header { |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | padding: 0.5rem; |
|---|
| | | background-color: #880017; |
|---|
| | | color: white; |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 2rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | section { |
|---|
| | | width: 90%; |
|---|
| | | max-width: 40rem; |
|---|
| | | margin: auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .healthbar { |
|---|
| | | width: 100%; |
|---|
| | | height: 40px; |
|---|
| | | border: 1px solid #575757; |
|---|
| | | margin: 1rem 0; |
|---|
| | | background: #fde5e5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .healthbar__value { |
|---|
| | | background-color: #00a876; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .container { |
|---|
| | | text-align: center; |
|---|
| | | padding: 0.5rem; |
|---|
| | | margin: 1rem auto; |
|---|
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | border-radius: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #monster h2, |
|---|
| | | #player h2 { |
|---|
| | | margin: 0.25rem; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #controls { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: row; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button { |
|---|
| | | font: inherit; |
|---|
| | | border: 1px solid #88005b; |
|---|
| | | background-color: #88005b; |
|---|
| | | color: white; |
|---|
| | | padding: 1rem 2rem; |
|---|
| | | border-radius: 12px; |
|---|
| | | margin: 1rem; |
|---|
| | | width: 12rem; |
|---|
| | | cursor: pointer; |
|---|
| | | box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:focus { |
|---|
| | | outline: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:hover, |
|---|
| | | button:active { |
|---|
| | | background-color: #af0a78; |
|---|
| | | border-color: #af0a78; |
|---|
| | | box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26); |
|---|
| | | } |
|---|
| | | |
|---|
| | | button:disabled { |
|---|
| | | background-color: #ccc; |
|---|
| | | border-color: #ccc; |
|---|
| | | box-shadow: none; |
|---|
| | | color: #3f3f3f; |
|---|
| | | cursor: not-allowed; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #log ul { |
|---|
| | | list-style: none; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #log li { |
|---|
| | | margin: 0.5rem 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .log--player { |
|---|
| | | color: #7700ff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .log--monster { |
|---|
| | | color: #da8d00; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .log--damage { |
|---|
| | | color: red; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .log--heal { |
|---|
| | | color: green; |
|---|
| | | } |
|---|
