geir/startit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added code for pokemon game

Browse source
This commit is contained in:
Geir Okkenhaug Jerstad 2024-09-19 11:10:04 +02:00
parent 166b85b5e7
commit 05d8a5b2ac
15 changed files with 243 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
objekter/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
let pokemon = {
picachu: {
health: 100,
level: 14,
image: "img/pikachu.png",
sound: "audio/pikachu.vaw"
},
otherPoke: {
health: 100,
},
ekans: {
health: 1000,
}
}
</script>
</body>
</html>

2
oppgaver/uke7/pokemonOppgaveObjektIntro/.gitattributes vendored Normal file
View file

@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/bulbasaur.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 720 KiB

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/drowzee.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 KiB

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/flygon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/oranguru.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 465 KiB

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/pikachu.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 547 KiB

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/pokemonTrainerIdle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
oppgaver/uke7/pokemonOppgaveObjektIntro/Images/pokemonTrainerThrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

16
oppgaver/uke7/pokemonOppgaveObjektIntro/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pokemon</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

22
oppgaver/uke7/pokemonOppgaveObjektIntro/objExample.js Normal file
View file

@ -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,
};

5
oppgaver/uke7/pokemonOppgaveObjektIntro/objekter1.md Normal file
View file

@ -0,0 +1,5 @@
Introduksjon til objekter:
1. Hva er det?
2. Hvorfor skal vi bruke det?
3. Eksempel på sånn vi har gjort det uten og hvordan vi kan gjøre det med objekter isteden

5
oppgaver/uke7/pokemonOppgaveObjektIntro/objekter2.md Normal file
View file

@ -0,0 +1,5 @@
Objekter 2, en litt mer avansert introduksjon
1. Lister av objekter
2. Lager spillet nesten ferdig
3. Dere får en oppgave å løse fra videoen

93
oppgaver/uke7/pokemonOppgaveObjektIntro/script.js Normal file
View file

@ -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*/ `
<div class="container">
<div class="opposingPokemon">
<div>${randomPokemon.name}</div>
<div>lvl: ${randomPokemon.level}</div>
<img src="${randomPokemon.image}">
</div>
<div class="bottomScreen">
<div class="player">
<img src="${playerImage}">
<div>${playerName}</div>
</div>
<div class="buttonContainer">
<button onclick="catchPokemon()">Fang</button>
<button onclick="updateView()">Finn en annen</button>
<button onclick="showPokemon()">Vis dine pokemon</button>
</div>
</div>
</div>
`;
}
function caughtPokemonView(){
app.innerHTML = /*HTML*/`
<div class="caughtContainer">
<h1>Du fanget ${playerPokemon[playerPokemon.length - 1].name}</h1>
<div class="buttonContainer">
<button onclick="updateView()">Finn en annen</button>
<button onclick="showPokemon()">Vis dine pokemon</button>
</div>
</div>
`;
}
function catchPokemon(){
playerPokemon.push(randomPokemon);
caughtPokemonView();
}
function showPokemon(){
console.log(playerPokemon);
}
function getRandomPokemon(){
let randomNum = Math.floor(Math.random() * possiblePokemon.length);
randomPokemon = possiblePokemon[randomNum];
}

72
oppgaver/uke7/pokemonOppgaveObjektIntro/style.css Normal file
View file

@ -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;
}