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

Better background, scrolling ground, scaling

Browse Source
This commit is contained in:
karl 2021-10-16 22:29:28 +02:00
parent 460d5ef60d
commit 594a702e5a
1 changed files with 82 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
index.html
View File

@ -81,20 +81,10 @@
<div id="viewport">
<div id="flash" style="z-index:11;
background-color: white;
width: 800px;
height: 480px;
width: 100vw;
height: 100vh;
opacity: 0%;"></div>
<div id="floor" class="level" style="
left:0px;
top:409px;
background-image:url(sheet.png);
background-position: -0px -142px;
width: 800px;
height: 71px;
z-index: 2;
">
</div>
<div id="background" style="
left:0px;
top:0px;
@ -105,33 +95,49 @@
z-index: -2;
">
</div>
<div id="background2" style="
left:800px;
top:0px;
background-image:url(sheet.png);
background-position: -0px -355px;
width: 800px;
height: 480px;
z-index: -2;
">
</div>
<div id="plane" style="
z-index: 0;
">
</div>
</div>
<div id="game_over" style="
left:200px;
top:200px;
<div id="game_over" style="
left: calc(50vw - 206px);
top: 40vh;
background-image:url(sheet.png);
background-position: -0px -835px;
width: 412px;
height: 78px;
z-index: 10;
">
</div>
</div>
<div id="get_ready" style="
left:200px;
top:200px;
<div id="score" style="
left:50px;
top: 50px;
z-index: 10;
">Score</div>
<div id="get_ready" style="
left: calc(50vw - 200px);
top: 40vh;
background-image:url(sheet.png);
background-position: -0px -913px;
width: 400px;
height: 73px;
z-index: 10;
">
</div>
</div>
<script>
@ -188,6 +194,7 @@
const GRAVITY = 200
const JUMP_VEL = 200
const SPIKE_DISTANCE = 250
const GROUND_DISTANCE = 800;
var camera_x = window.innerWidth / 10.0;
var score = 0;
@ -270,13 +277,52 @@
}
}
class Ground {
constructor(x) {
this.position_x = x;
this.position_y = 12345;
this.id = Math.floor(Math.random() * 1000000);
this.element1 = document.createElement("div");
this.element1.id = this.id;
document.getElementById("viewport").appendChild(this.element1);
$("#" + this.id).css({
"left": (this.position_x) + "px",
"top": "409px",
"background-image": "url(sheet.png)",
"background-position": "-0px -142px",
"width": "800px",
"height": "71px",
"z-index": "2"
});
}
set_camera_position(x) {
$("#" + this.id).css({
"left": (this.position_x + x) + "px"
})
}
remove() {
document.getElementById(this.id).remove();
}
}
let player = new Bird()
var spikes = []
var grounds = []
function spawn_spikes(x, y) {
spikes.push(new Spikes(x, y));
}
function spawn_ground(x) {
grounds.push(new Ground(x));
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
@ -287,8 +333,12 @@
spikes.forEach(function (spike) {
spike.remove();
})
grounds.forEach(function (ground) {
ground.remove();
})
spikes.length = 0;
grounds.length = 0;
player.position_x = 100;
player.position_y = 150;
@ -298,6 +348,9 @@
for (let i = 350; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
spawn_spikes(i, randomInt(-100, 100));
}
for (let i = -GROUND_DISTANCE; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
spawn_ground(i);
}
}
// Fixed time loop
@ -348,7 +401,7 @@
console.log(score);
} else if (current_gamestate == GameState.STARTSCREEN) {
// Drop the player to the ground if they're not there yet (after hitting a spike)
if (player.position_y < 400) {
if (player.position_y < 400 && has_died) {
player.velocity_y += GRAVITY * dt;
player.position_y += player.velocity_y * dt;
}
@ -371,6 +424,10 @@
spikes.forEach(function (spike) {
spike.set_camera_position(-player.position_x + camera_x);
})
grounds.forEach(function (ground) {
ground.set_camera_position(-player.position_x + camera_x);
})
if (current_gamestate == GameState.STARTSCREEN) {
if (has_died == false) {
@ -408,6 +465,9 @@
$("#flash").css({
"opacity": "100%",
});
// Drop down with some speed
player.velocity_y = 100;
}
function restart() {