1nicerOli
/
fishy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fishy fix i guess;

master
Nero Ignis 3 years ago
parent
27edbe7fcf
commit
873942b592
3 changed files with 142 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      css/app.css
  2. 132
      index.html
  3. 83
      js/app.js

53
css/app.css
Unescape View File

@ -0,0 +1,53 @@
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;
position: relative;
}
.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: absolute;
z-index: 10;
}

132
index.html
Unescape View File

@ -4,147 +4,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>fishy</title> <title>fishy</title>
<style> <link rel="stylesheet" href="css/app.css">
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> </head>
<body> <body>
<div id="root"> <div id="root">
<div class="rod"> <div class="rod">
<p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p> <p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p>
<img v-if="fish" :src="fish.sprite" alt="fish.sprite" class="fish"> <img v-if="fishy" :src="fishy.sprite" alt="fishy.sprite" class="fish" :style="'bottom: '+fishy.position+'px'">
</div> </div>
{{ force }} | {{ pull }} | {{ intervalID }}<br> {{ force }} | {{ pull }} | {{ intervalID }} | {{ fishy ? fishy.position +' '+ fishy.name: '' }}<br>
<div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false"> <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
<span>PULL</span> <span>PULL</span>
</div> </div>
<a href="javascript:" v-on:click="deployFish()" v-if="!fish">let there be fish</a> <a href="javascript:" v-on:click="deployFish()" v-if="!fishy">let there be fish</a>
</div> </div>
</div> </div>
<script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript"> <script src="js/app.js"></script>
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> </body>
</html> </html>

83
js/app.js
Unescape View File

@ -0,0 +1,83 @@
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,
fishy: null,
fishies: [
{
name: 'Freddy the fishy',
strength: 3,
quirkyness: 10,
points: 100,
position: 0,
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.fishy = this.fishies.random();
this.startFishLifecycle();
},
startFishLifecycle() {
let vue = this;
this.fishy.position = 0;
this.fishMovementIntervalID = setInterval(() => {
let up = Math.floor(Math.random() * 100) < 10;
console.log(up);
if (up) {
if (vue.fishy.position < 250) {
vue.fishy.position += vue.fishy.quirkyness;
} else {
vue.fishy.position -= vue.fishy.quirkyness * 4;
}
} else {
if (vue.fishy.position < 0) {
vue.fishy.position = Number(vue.fishy.position) - (vue.fishy.quirkyness * 4);
}
}
}, 100);
}
}
};
Vue.createApp(FishApp).mount('#root');
Write Preview
Loading…
Cancel
Save