added code for pokemon game
This commit is contained in:
parent
05d8a5b2ac
commit
fb5c56c555
|
|
@ -1,2 +0,0 @@
|
||||||
# Auto detect text files and perform LF normalization
|
|
||||||
* text=auto
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 720 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 465 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
|
|
@ -1,16 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
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,
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
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];
|
|
||||||
}
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue