diff --git a/oppgaver/uke7/pokemon/.gitattributes b/oppgaver/uke7/pokemon/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/oppgaver/uke7/pokemon/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/oppgaver/uke7/pokemon/Images/bulbasaur.png b/oppgaver/uke7/pokemon/Images/bulbasaur.png new file mode 100644 index 0000000..a211f21 Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/bulbasaur.png differ diff --git a/oppgaver/uke7/pokemon/Images/drowzee.png b/oppgaver/uke7/pokemon/Images/drowzee.png new file mode 100644 index 0000000..6c7bb4f Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/drowzee.png differ diff --git a/oppgaver/uke7/pokemon/Images/flygon.png b/oppgaver/uke7/pokemon/Images/flygon.png new file mode 100644 index 0000000..ac44d7f Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/flygon.png differ diff --git a/oppgaver/uke7/pokemon/Images/oranguru.png b/oppgaver/uke7/pokemon/Images/oranguru.png new file mode 100644 index 0000000..865531d Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/oranguru.png differ diff --git a/oppgaver/uke7/pokemon/Images/pikachu.png b/oppgaver/uke7/pokemon/Images/pikachu.png new file mode 100644 index 0000000..dea9ecf Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/pikachu.png differ diff --git a/oppgaver/uke7/pokemon/Images/pokemonTrainerIdle.png b/oppgaver/uke7/pokemon/Images/pokemonTrainerIdle.png new file mode 100644 index 0000000..6c46a7d Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/pokemonTrainerIdle.png differ diff --git a/oppgaver/uke7/pokemon/Images/pokemonTrainerThrow.png b/oppgaver/uke7/pokemon/Images/pokemonTrainerThrow.png new file mode 100644 index 0000000..4b05ca4 Binary files /dev/null and b/oppgaver/uke7/pokemon/Images/pokemonTrainerThrow.png differ diff --git a/oppgaver/uke7/pokemon/index.html b/oppgaver/uke7/pokemon/index.html new file mode 100644 index 0000000..fc7c016 --- /dev/null +++ b/oppgaver/uke7/pokemon/index.html @@ -0,0 +1,16 @@ + + + + + + + Pokemon + + + + +
+ + + + \ No newline at end of file diff --git a/oppgaver/uke7/pokemon/objExample.js b/oppgaver/uke7/pokemon/objExample.js new file mode 100644 index 0000000..8ca294b --- /dev/null +++ b/oppgaver/uke7/pokemon/objExample.js @@ -0,0 +1,22 @@ +let mariusSinLommebok = { + kort: ["Visa", "Mastercard", "Førerkort", "Kundeklubb"], + mynter: 82, + sedler: 50, + pictures: ["kattepus1.png", "kattepus2.png"], + isBroke: true, +}; + +// Variabler: +let pikachuName = "Pikachu"; +let pikachuHealth = 45; +let pikachuImage = "/Images/pikachu.png"; +let pikachuSound = "/Audio/pikachu.mp3"; +let pikachuLevel = 8; + +// Objekt: +let pikachu = { + health: 45, + image: "/Images/pikachu.png", + sound: "/Audio/pikachu.mp3", + level: 8, +}; \ No newline at end of file diff --git a/oppgaver/uke7/pokemon/script.js b/oppgaver/uke7/pokemon/script.js new file mode 100644 index 0000000..5412c56 --- /dev/null +++ b/oppgaver/uke7/pokemon/script.js @@ -0,0 +1,93 @@ +let pikachuName = "Pikachu" + +let pikachu = { + name: "Pikachu", + health: 45, + image: "Images/pikachu.png", + level: 8, +}; + +let bulbasaur = { + name: "Bulbasaur", + health: 70, + image: "Images/bulbasaur.png", + level: 12, +}; + +let oranguru = { + name: "Oranguru", + health: 170, + image: "Images/oranguru.png", + level: 45, +}; + +let drowzee = { + name: "Drowzee", + health: 90, + image: "Images/drowzee.png", + level: 33, +}; + +let possiblePokemon = [pikachu, bulbasaur, oranguru, drowzee]; +let randomPokemon = null; + +let playerName = "Bjarne"; +let playerImage = "/Images/pokemonTrainerIdle.png"; +let playerPokemon = []; + +let app = document.getElementById("app"); + +updateView(); + +function updateView() { + getRandomPokemon() + app.innerHTML = /*HTML*/ ` +
+
+
${randomPokemon.name}
+
lvl: ${randomPokemon.level}
+ +
+ +
+
+ +
${playerName}
+
+ +
+ + + +
+ +
+
+ `; +} + +function caughtPokemonView(){ + app.innerHTML = /*HTML*/` +
+

Du fanget ${playerPokemon[playerPokemon.length - 1].name}

+
+ + +
+
+ `; +} + +function catchPokemon(){ + playerPokemon.push(randomPokemon); + caughtPokemonView(); +} + +function showPokemon(){ + console.log(playerPokemon); +} + +function getRandomPokemon(){ + let randomNum = Math.floor(Math.random() * possiblePokemon.length); + randomPokemon = possiblePokemon[randomNum]; +} diff --git a/oppgaver/uke7/pokemon/style.css b/oppgaver/uke7/pokemon/style.css new file mode 100644 index 0000000..b30d6d6 --- /dev/null +++ b/oppgaver/uke7/pokemon/style.css @@ -0,0 +1,72 @@ +@import url("https://fonts.googleapis.com/css2?family=Orbitron&family=Roboto+Condensed:wght@700&display=swap"); + +html::-webkit-scrollbar { + display: none; +} + +#app { + display: flex; + align-items: center; + justify-content: center; + height: 98vh; + width: 98vw; + font-family: "Orbitron", sans-serif; + font-family: "Roboto Condensed", sans-serif; + font-size: 32px; +} + +.opposingPokemon { + margin-left: 50%; +} + +button { + height: 100px; + width: 100px; +} + +.buttonContainer { + width: 200px; + display: flex; + margin-bottom: 22px; + margin-left: 50%; +} + +img { + width: auto; + height: 250px; +} + +.bottomScreen { + display: flex; + align-items: flex-end; + justify-content: center; + flex-direction: row; +} + +.caughtContainer { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.pokemonPartyContainer { + display: grid; + grid-template-columns: repeat(2, 220px); +} + +.pokemonBoxDisplay { + display: flex; + flex-direction: column; + align-items: center; + + border: 3px solid rgb(107, 222, 115); + background-image: linear-gradient(rgb(0, 107, 33), rgb(49, 222, 82)); + margin: 10px; + padding: 5px; +} + +.partyImg { + width: 40px; + height: 40px; +} \ No newline at end of file