You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
4.0 KiB
150 lines
4.0 KiB
<!DOCTYPE html> |
|
<html lang="de"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>fishy</title> |
|
<style> |
|
body { |
|
font-family: Arial,sans-serif; |
|
} |
|
|
|
.rod { |
|
float: right; |
|
width: 50px; |
|
height: 300px; |
|
border: 1px solid black; |
|
background-color: lightblue; |
|
padding: 0; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-end; |
|
} |
|
|
|
.hook { |
|
background-color: sandybrown; |
|
width: 100%; |
|
height: 50px; |
|
margin: 0; |
|
} |
|
|
|
.pull { |
|
background-color: cornflowerblue; |
|
width: 250px; |
|
height: 250px; |
|
border-radius: 15px; |
|
border: 5px solid darkblue; |
|
|
|
display: flex; |
|
align-content: space-around; |
|
justify-content: space-around; |
|
align-items: center; |
|
|
|
font-size: 4.7em; |
|
user-select: none; |
|
color: white; |
|
} |
|
|
|
.pull:active { |
|
background-color: #a4bbe5; |
|
margin-top: 3px; |
|
} |
|
|
|
.fish { |
|
width: 50px; |
|
position: fixed; |
|
z-index: 10; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div id="root"> |
|
<div class="rod"> |
|
<p class="hook" :style="'margin-bottom: '+force*2+'px'"></p> |
|
<img v-if="fish" :src="fish.sprite" alt="fish.sprite" class="fish"> |
|
</div> |
|
|
|
{{ force }} | {{ pull }} | {{ intervalID }}<br> |
|
<div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false"> |
|
<span>PULL</span> |
|
</div> |
|
<a href="javascript:" v-on:click="deployFish()" v-if="!fish">let there be fish</a> |
|
</div> |
|
</div> |
|
|
|
<script src="https://unpkg.com/vue@next"></script> |
|
<script type="text/javascript"> |
|
Array.prototype.random = function () { |
|
return this[Math.floor((Math.random()*this.length))]; |
|
} |
|
|
|
const FishApp = { |
|
data() { |
|
return { |
|
force: 0, |
|
pull: false, |
|
pullRate: 1.5, |
|
dropRate: 2.5, |
|
intervalID: null, |
|
fishMovementIntervalID: null, |
|
fish: null, |
|
fishies: [ |
|
{ |
|
name: 'Freddy the fishy', |
|
strength: 3, |
|
quirkyness: 100, |
|
points: 100, |
|
sprite: './assets/fishTile_074.png' |
|
} |
|
] |
|
} |
|
}, |
|
watch: { |
|
pull() { |
|
let vue = this; |
|
window.clearInterval(vue.intervalID); |
|
|
|
if (vue.pull) { |
|
vue.intervalID = setInterval(function () { |
|
if (vue.force < 125) { |
|
vue.force = Number(vue.force) + vue.pullRate; |
|
} |
|
}, 50); |
|
} else { |
|
vue.intervalID = setInterval(function () { |
|
if (vue.force >= 0.0) { |
|
vue.force = Number(vue.force) - vue.dropRate; |
|
} |
|
|
|
if (vue.force < 0.7) { |
|
vue.force = 0; |
|
} |
|
}, 50); |
|
} |
|
} |
|
}, |
|
methods: { |
|
pullRod() { |
|
this.force = Number(this.force) + 0.5; |
|
}, |
|
deployFish() { |
|
this.fish = this.fishies.random(); |
|
this.startFishLifecycle(); |
|
}, |
|
startFishLifecycle() { |
|
let vue = this; |
|
this.fish.position = 0; |
|
|
|
this.fishMovementIntervalID = setInterval(() => { |
|
|
|
}, 50); |
|
} |
|
} |
|
}; |
|
|
|
Vue.createApp(FishApp).mount('#root'); |
|
</script> |
|
</body> |
|
</html> |