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; animation: cycle_sprites 300ms steps(1) infinite;
} }
.opacity-transition {
transition-property: opacity;
transition-duration: 1s;
}
@-webkit-keyframes cycle_sprites { @-webkit-keyframes cycle_sprites {
0% { 0% {
background-position: -330px -1371px; background-position: -330px -1371px;
@ -74,6 +79,12 @@
<body> <body>
<div id="viewport"> <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=" <div id="floor" class="level" style="
left:0px; left:0px;
top:409px; top:409px;
@ -154,6 +165,8 @@
var current_gamestate = GameState.STARTSCREEN; var current_gamestate = GameState.STARTSCREEN;
var has_died = false; var has_died = false;
var just_died = false;
var frame_passed = false;
function frame() { function frame() {
@ -177,6 +190,9 @@
const SPIKE_DISTANCE = 250 const SPIKE_DISTANCE = 250
var camera_x = window.innerWidth / 10.0; var camera_x = window.innerWidth / 10.0;
var score = 0;
var under_spikes_in_previous_frame = false;
class Bird { class Bird {
constructor() { constructor() {
this.position_x = 100; this.position_x = 100;
@ -305,19 +321,37 @@
die(); die();
} }
var under_spikes_this_frame = false;
// Player hits a spike // Player hits a spike
spikes.forEach(function (spike) { spikes.forEach(function (spike) {
if (player.get_center_x() > spike.position_x + spike.collision_begin_x if (player.get_center_x() > spike.position_x + spike.collision_begin_x
&& player.get_center_x() < spike.position_x + spike.collision_end_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 // Player is inside the spikes - check the y axis
if (!(player.get_center_y() > spike.position_y + spike.collision_begin_y if (!(player.get_center_y() > spike.position_y + spike.collision_begin_y
&& player.get_center_y() < spike.position_y + spike.collision_end_y)) { && player.get_center_y() < spike.position_y + spike.collision_end_y)) {
die(); 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) { } 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" }); $("#get_ready").css({ visibility: "hidden" });
$("#game_over").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() { function die() {
current_gamestate = GameState.STARTSCREEN; current_gamestate = GameState.STARTSCREEN;
has_died = true; has_died = true;
just_died = true;
$("#flash").removeClass("opacity-transition")
$("#flash").css({
"opacity": "100%",
});
} }
function restart() { function restart() {