mgs/msp-flappy-bird
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

White flash on game over

Browse Source
This commit is contained in:
karl 2021-10-16 19:01:18 +02:00
parent 9e3724a867
commit 460d5ef60d
1 changed files with 54 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -40,6 +40,11 @@
animation: cycle_sprites 300ms steps(1) infinite;
}
.opacity-transition {
transition-property: opacity;
transition-duration: 1s;
}
@-webkit-keyframes cycle_sprites {
0% {
background-position: -330px -1371px;
@ -74,6 +79,12 @@
<body>
<div id="viewport">
<div id="flash" style="z-index:11;
background-color: white;
width: 800px;
height: 480px;
opacity: 0%;"></div>
<div id="floor" class="level" style="
left:0px;
top:409px;
@ -154,6 +165,8 @@
var current_gamestate = GameState.STARTSCREEN;
var has_died = false;
var just_died = false;
var frame_passed = false;
function frame() {
@ -177,6 +190,9 @@
const SPIKE_DISTANCE = 250
var camera_x = window.innerWidth / 10.0;
var score = 0;
var under_spikes_in_previous_frame = false;
class Bird {
constructor() {
this.position_x = 100;
@ -305,19 +321,37 @@
die();
}
var under_spikes_this_frame = false;
// Player hits a spike
spikes.forEach(function (spike) {
if (player.get_center_x() > spike.position_x + spike.collision_begin_x
&& player.get_center_x() < spike.position_x + spike.collision_end_x) {
under_spikes_this_frame = true;
// Player is inside the spikes - check the y axis
if (!(player.get_center_y() > spike.position_y + spike.collision_begin_y
&& player.get_center_y() < spike.position_y + spike.collision_end_y)) {
die();
}
}
})
});
// Increase the score if we just left spikes
if (under_spikes_in_previous_frame && !under_spikes_this_frame) {
score += 1;
}
under_spikes_in_previous_frame = under_spikes_this_frame;
// TODO: Display as UI
console.log(score);
} else if (current_gamestate == GameState.STARTSCREEN) {
// Do nothing
// Drop the player to the ground if they're not there yet (after hitting a spike)
if (player.position_y < 400) {
player.velocity_y += GRAVITY * dt;
player.position_y += player.velocity_y * dt;
}
}
}
@ -350,12 +384,30 @@
$("#get_ready").css({ visibility: "hidden" });
$("#game_over").css({ visibility: "hidden" });
}
if (just_died) {
if (frame_passed == true) {
$("#flash").addClass("opacity-transition");
$("#flash").css({
"opacity": "0%",
});
frame_passed = false;
just_died = false;
} else {
frame_passed = true;
}
}
}
function die() {
current_gamestate = GameState.STARTSCREEN;
has_died = true;
just_died = true;
$("#flash").removeClass("opacity-transition")
$("#flash").css({
"opacity": "100%",
});
}
function restart() {