some work on team asignment
49
intro_js/clickerv2.html
Normal file
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
div{
|
||||
font-size: 300%;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script>
|
||||
//model
|
||||
var points = 0;
|
||||
var pointsPerClick = 1;
|
||||
var smilyIndex = 0;
|
||||
|
||||
// view
|
||||
updateView();
|
||||
function updateView() {
|
||||
var smiley = smilyIndex == 0 ? '😊' : '😁' ;
|
||||
document.getElementById('app').innerHTML = /*HTML*/ `
|
||||
<div id="image" onclick="doClick()">${smiley}</div>
|
||||
<div id="pointsInfo">${points}</div>
|
||||
<button onclick="buyUpgrade()">Kjøp oppgrdering (-10 poeng)</button>
|
||||
`;
|
||||
}
|
||||
|
||||
// controller
|
||||
function doClick(){
|
||||
points += pointsPerClick;
|
||||
console.log(points + "<-- Dette er points");
|
||||
smilyIndex = 1 - smilyIndex;
|
||||
updateView();
|
||||
}
|
||||
function buyUpgrade(){
|
||||
if (points < 10) return;
|
||||
points -= 10;
|
||||
pointsPerClick++;
|
||||
updateView();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
BIN
team/oppgave1/uke4/img/dead.jpg
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
team/oppgave1/uke4/img/default.jpg
Normal file
After Width: | Height: | Size: 21 KiB |
BIN
team/oppgave1/uke4/img/eating.jpg
Normal file
After Width: | Height: | Size: 27 KiB |
BIN
team/oppgave1/uke4/img/ghost.jpg
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
team/oppgave1/uke4/img/need_food.jpg
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
team/oppgave1/uke4/img/need_love.jpg
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
team/oppgave1/uke4/img/need_petting.jpg
Normal file
After Width: | Height: | Size: 22 KiB |
0
team/oppgave1/uke4/img/style.css
Normal file
|
@ -1,12 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>Sir Quacksalot</title>
|
||||
</head>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div>Thus spake the Master Programmer:<br>
|
||||
"After three days without programming, life becomes meaningless." - <a href="https://www.mit.edu/~xela/tao.html">The Tao of Programming</a></div>
|
||||
<div id="foodId"></div>
|
||||
<div id="petId"></div>
|
||||
<button onclick="feed()" id="foodBtn">Feed</button>
|
||||
<button onclick="pet()" id="petBtn">Pet</button>
|
||||
<img id="tamaFrog">
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
69
team/oppgave1/uke4/script.js
Normal file
|
@ -0,0 +1,69 @@
|
|||
// Model
|
||||
let lifeTimer = 100;
|
||||
let foodTime = 10;
|
||||
let petTime = 10;
|
||||
let foodElement = document.getElementById("foodId");
|
||||
let petElement = document.getElementById('petId');
|
||||
let frogImage = document.getElementById('tamaFrog').src = "img/default.jpg";
|
||||
|
||||
|
||||
setInterval(foodFunction, 1000)
|
||||
|
||||
// View
|
||||
function foodFunction() {
|
||||
|
||||
if (foodTime < 0) {
|
||||
//game over???
|
||||
document.getElementById('tamaFrog').src = "img/dead.jpg";
|
||||
document.getElementById('tamaFrog').style.backgroundColor = 'red';
|
||||
setInterval(afterLife, 1000);
|
||||
} else {
|
||||
foodElement.innerHTML = foodTime + " seconds remaining"
|
||||
foodTime--
|
||||
if (foodTime < 5) {
|
||||
document.getElementById('tamaFrog').src = "img/need_food.jpg";
|
||||
}
|
||||
}
|
||||
}
|
||||
// Controller
|
||||
function feed() {
|
||||
if (foodTime > 0) {
|
||||
foodTime += 10;
|
||||
document.getElementById('tamaFrog').src = "img/eating.jpg";
|
||||
setTimeout(defaultImg, 500)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function defaultImg() {
|
||||
document.getElementById('tamaFrog').src = "img/default.jpg";
|
||||
}
|
||||
|
||||
function petFunction() {
|
||||
if (petTime < 0) {
|
||||
|
||||
document.getElementById('petFrog').src = "img/need_petting.jpg";
|
||||
} else {
|
||||
petElement.innerHTML = petTime + "seconds remaining"
|
||||
foodTime--
|
||||
if (petTime < 3) {
|
||||
document.getElementById('petFrog').src = "img/need_love.jpg";
|
||||
}
|
||||
}
|
||||
}
|
||||
function pet() {
|
||||
if (petTime > 0) {
|
||||
petTime += 10;
|
||||
document.getElementById('petFrog').src = "img/need_love.jpg";
|
||||
setTimeout(defaultImg, 500)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
function defaultImg() {
|
||||
document.getElementById('tamaFrog').src = "img/default.jpg";
|
||||
}
|
||||
function afterLife() {
|
||||
document.getElementById('tamaFrog').src = "img/ghost.jpg";
|
||||
}
|