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

Collision, spike spawning

Browse Source
This commit is contained in:
karl 2021-10-16 18:25:30 +02:00
parent e7f2bd171a
commit 9e3724a867
1 changed files with 181 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
index.html
View File

@ -73,8 +73,71 @@
</head> </head>
<body> <body>
<div id="viewport">
<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;
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 id="game_over" style="
left:200px;
top:200px;
background-image:url(sheet.png);
background-position: -0px -835px;
width: 412px;
height: 78px;
z-index: 10;
">
</div>
<div id="get_ready" style="
left:200px;
top:200px;
background-image:url(sheet.png);
background-position: -0px -913px;
width: 400px;
height: 73px;
z-index: 10;
">
</div>
</div>
<script> <script>
// Setup // Setup
// Scale viewport to fit device width
function apply_scale() {
var scale = window.innerHeight / 480.0;
$("#viewport").css({ "transform": "scale(" + scale + ")", "transform-origin": "0 0" });
camera_x = window.innerWidth / 10.0;
}
window.onresize = apply_scale;
apply_scale();
// Game Loop
function timestamp() { function timestamp() {
return window.performance && window.performance.now ? window.performance.now() : new Date().getTime(); return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
} }
@ -111,28 +174,115 @@
// Game // Game
const GRAVITY = 200 const GRAVITY = 200
const JUMP_VEL = 200 const JUMP_VEL = 200
const SPIKE_DISTANCE = 400 const SPIKE_DISTANCE = 250
var camera_x = window.innerWidth / 10.0;
class Bird { class Bird {
constructor() { constructor() {
this.position_x = 100; this.position_x = 100;
this.position_y = 100; this.position_y = 150;
this.width = 88; this.width = 88;
this.height = 73; this.height = 73;
this.velocity_y = 0; this.velocity_y = 0;
} }
get_center_x() {
return this.position_x + this.width / 2.0;
}
get_center_y() {
return this.position_y + this.height / 2.0;
}
} }
class Spikes { class Spikes {
constructor() { constructor(x, y) {
this.position_x = 350; this.position_x = x;
this.position_y = 0; this.position_y = y;
this.collision_begin_x = 25;
this.collision_end_x = 75;
this.collision_begin_y = 170;
this.collision_end_y = 280;
this.id = Math.floor(Math.random() * 1000000);
this.element1 = document.createElement("div");
this.element1.id = this.id;
this.element2 = document.createElement("div");
this.element2.id = this.id + 1;
document.getElementById("viewport").appendChild(this.element1);
document.getElementById("viewport").appendChild(this.element2);
$("#" + this.id).css({
"top": (y + 300) + "px",
"background-image": "url(sheet.png)",
"background-position": "-0px -1757px",
"width": "108px",
"height": "239px",
"z-index": "1"
})
$("#" + (this.id + 1)).css({
"top": (y - 100) + "px",
"background-image": "url(sheet.png)",
"background-position": "-264px -986px",
"width": "108px",
"height": "239px",
"z-index": "1"
})
}
set_camera_position(x) {
$("#" + this.id).css({
"left": (this.position_x + x) + "px"
})
$("#" + (this.id + 1)).css({
"left": (this.position_x + x) + "px"
})
}
remove() {
document.getElementById(this.id).remove();
document.getElementById(this.id + 1).remove();
} }
} }
let player = new Bird() let player = new Bird()
var spikes = []
function spawn_spikes(x, y) {
spikes.push(new Spikes(x, y));
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const INITIAL_SPIKE_DISTANCE = 2000;
function setupGame() {
spikes.forEach(function (spike) {
spike.remove();
})
spikes.length = 0;
player.position_x = 100;
player.position_y = 150;
player.velocity_y = 0;
for (let i = 350; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
spawn_spikes(i, randomInt(-100, 100));
}
}
// Fixed time loop // Fixed time loop
function update(dt) { function update(dt) {
@ -149,10 +299,23 @@
// Gravity // Gravity
player.velocity_y += GRAVITY * dt; player.velocity_y += GRAVITY * dt;
// Lose condition // // Lose conditions
// Player hits the ground
if (player.position_y > 400) { if (player.position_y > 400) {
die(); die();
} }
// 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) {
// 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();
}
}
})
} else if (current_gamestate == GameState.STARTSCREEN) { } else if (current_gamestate == GameState.STARTSCREEN) {
// Do nothing // Do nothing
} }
@ -162,9 +325,19 @@
function render(dt) { function render(dt) {
$("#plane").css({ $("#plane").css({
top: player.position_y + "px", top: player.position_y + "px",
left: player.position_x + "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"
})
spikes.forEach(function (spike) {
spike.set_camera_position(-player.position_x + camera_x);
})
if (current_gamestate == GameState.STARTSCREEN) { if (current_gamestate == GameState.STARTSCREEN) {
if (has_died == false) { if (has_died == false) {
$("#get_ready").css({ visibility: "visible" }); $("#get_ready").css({ visibility: "visible" });
@ -186,10 +359,7 @@
} }
function restart() { function restart() {
player.position_x = 100; setupGame();
player.position_y = 100;
player.velocity_y = 0;
current_gamestate = GameState.PLAYING; current_gamestate = GameState.PLAYING;
} }
@ -206,92 +376,6 @@
requestAnimationFrame(frame); requestAnimationFrame(frame);
</script> </script>
<div id="viewport">
<div id="floor" style="
left:0px;
top:409px;
background-image:url(sheet.png);
background-position: -0px -142px;
width: 800px;
height: 71px;
z-index: -1;
">
</div>
<div id="background" style="
left:0px;
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 id="spike_bottom" style="
left:300px;
top:300px;
background-image:url(sheet.png);
background-position: -0px -1757px;
width: 108px;
height: 239px;
z-index: 1;
">
</div>
<div id="spike_top" style="
left:300px;
top:-100px;
background-image:url(sheet.png);
background-position: -264px -986px;
width: 108px;
height: 239px;
z-index: 1;
">
</div>
<div id="game_over" style="
left:200px;
top:200px;
background-image:url(sheet.png);
background-position: -0px -835px;
width: 412px;
height: 78px;
z-index: 1;
">
</div>
<div id="get_ready" style="
left:200px;
top:200px;
background-image:url(sheet.png);
background-position: -0px -913px;
width: 400px;
height: 73px;
z-index: 1;
">
</div>
</div>
<script>
// Scale viewport to fit device width
function apply_scale() {
var scale = window.innerHeight / 480.0;
$("#viewport").css({ "transform": "scale(" + scale + ")", "transform-origin": "0 0" });
}
window.onresize = apply_scale;
apply_scale();
</script>
</body> </body>
</html> </html>