|
|
|
|
<!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>
|
