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

Some cleanup

Browse Source 
moved things around to make it a bit easier to read through
This commit is contained in:
karl 2021-10-16 22:51:28 +02:00
parent 594a702e5a
commit ee84ecaad0
1 changed files with 62 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
index.html
View File

@ -141,7 +141,7 @@
</div>
<script>
// Setup
// // Setup
// Scale viewport to fit device width
function apply_scale() {
@ -151,7 +151,6 @@
}
window.onresize = apply_scale;
apply_scale();
// Game Loop
@ -169,12 +168,6 @@
STARTSCREEN: 1
};
var current_gamestate = GameState.STARTSCREEN;
var has_died = false;
var just_died = false;
var frame_passed = false;
function frame() {
now = timestamp();
dt = dt + Math.min(1, (now - last) / 1000);
@ -190,16 +183,31 @@
requestAnimationFrame(frame);
}
// Game
// // Game
const GRAVITY = 200
const JUMP_VEL = 200
const SPIKE_DISTANCE = 250
const GROUND_DISTANCE = 800;
const INITIAL_SPIKE_DISTANCE = 2000;
const FIRST_SPIKE_POSITION = 350;
// Should be considered a const too, but can't be because it needs to react to viewport resizing
var camera_x = window.innerWidth / 10.0;
// Score
var score = 0;
var under_spikes_in_previous_frame = false;
// Level placement utilities
var next_spike_location;
var current_gamestate = GameState.STARTSCREEN;
var has_died = false; // true if the player has ever died during this session
var just_died = false; // true from player death to one frame after play death
var frame_passed_after_death = false; // true in the frame after the player has died
// Classes
class Bird {
constructor() {
this.position_x = 100;
@ -311,25 +319,29 @@
}
}
// Objects
let player = new Bird()
var spikes = []
var grounds = []
function spawn_spikes(x, y) {
spikes.push(new Spikes(x, y));
// Utility functions
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function spawn_spikes() {
spikes.push(new Spikes(next_spike_location, randomInt(-100, 100)));
next_spike_location += SPIKE_DISTANCE;
}
function spawn_ground(x) {
grounds.push(new Ground(x));
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const INITIAL_SPIKE_DISTANCE = 2000;
// Setup the game world by removing old objects and spawning new ones
function setupGame() {
next_spike_location = FIRST_SPIKE_POSITION;
spikes.forEach(function (spike) {
spike.remove();
})
@ -345,8 +357,8 @@
player.velocity_y = 0;
for (let i = 350; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
spawn_spikes(i, randomInt(-100, 100));
for (let i = next_spike_location; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
spawn_spikes();
}
for (let i = -GROUND_DISTANCE; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
spawn_ground(i);
@ -356,6 +368,20 @@
// Fixed time loop
function update(dt) {
if (current_gamestate == GameState.PLAYING) {
// Remove old spikes and spawn new ones
var first_spike = spikes[0];
if (first_spike.position_x < player.position_x - camera_x - first_spike.width) {
// This spike has just left the view -> remove it
first_spike.remove()
spikes.shift();
// Spawn new spikes in front of the player
spawn_spikes();
}
// Move the player
player.position_y += player.velocity_y * dt;
player.position_x += 100 * dt;
@ -374,9 +400,9 @@
die();
}
// Player hits a spike
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) {
@ -394,7 +420,6 @@
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
@ -410,17 +435,13 @@
// Variable time render loop
function render(dt) {
// Place the player
$("#plane").css({
top: player.position_y + "px",
left: camera_x + "px"
});
// Move camera by moving everything in the level to the inverse of the player position
// TODO: offset by the object's actual position
$(".level").css({
left: (-player.position_x + camera_x) + "px"
})
// Move the camera by moving everything in the level by the inverse of the player position
spikes.forEach(function (spike) {
spike.set_camera_position(-player.position_x + camera_x);
})
@ -428,7 +449,7 @@
ground.set_camera_position(-player.position_x + camera_x);
})
// Visibility of start / game over texts
if (current_gamestate == GameState.STARTSCREEN) {
if (has_died == false) {
$("#get_ready").css({ visibility: "visible" });
@ -443,39 +464,46 @@
}
if (just_died) {
if (frame_passed == true) {
// We need to wait for one frame in order to make sure that the flash has been set to full opacity by die().
// After waiting for this frame to pass, we can enable the smooth transition to 0% opacity.
if (frame_passed_after_death == true) {
$("#flash").addClass("opacity-transition");
$("#flash").css({
"opacity": "0%",
});
frame_passed = false;
frame_passed_after_death = false;
just_died = false;
} else {
frame_passed = true;
frame_passed_after_death = true;
}
}
}
// Lose state
function die() {
current_gamestate = GameState.STARTSCREEN;
has_died = true;
just_died = true;
// Remove the flash from the opacity-transition class to set it to white immediately
$("#flash").removeClass("opacity-transition")
$("#flash").css({
"opacity": "100%",
});
// Drop down with some speed
// Drop the player down with some speed
player.velocity_y = 100;
}
// Sets up and starts a new game
function restart() {
setupGame();
current_gamestate = GameState.PLAYING;
}
// Input
document.onmousedown = function (evt) {
if (current_gamestate == GameState.PLAYING) {
// Jump
@ -485,6 +513,7 @@
}
};
// Start the game loop
requestAnimationFrame(frame);
</script>