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

Basic movement and art done

Browse Source
This commit is contained in:
Karl 2021-10-13 12:04:05 +02:00
parent 44ac1a7a9b
commit 7a39b88854
2 changed files with 120 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
index.html
View File

@ -32,14 +32,12 @@
margin-top: 0px;
}
#test {
#plane {
width: 88px;
height: 73px;
background-image: url(sheet.png);
-webkit-animation: cycle_sprites 300ms steps(1) infinite,
move_bird 5s linear infinite;
animation: cycle_sprites 300ms steps(1) infinite,
move_bird 5s linear infinite;
-webkit-animation: cycle_sprites 300ms steps(1) infinite;
animation: cycle_sprites 300ms steps(1) infinite;
}
@-webkit-keyframes cycle_sprites {
@ -69,73 +67,139 @@
background-position: -222px -1562px;
}
}
@-webkit-keyframes move_bird {
from {
left: 0px;
top: 100px
}
to {
left: 600px;
top: 100px
}
}
@keyframes move_bird {
from {
left: 0px;
top: 100px
}
to {
left: 600px;
top: 100px
}
}
</style>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
// Setup
function timestamp() {
return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
}
var now,
dt = 0,
last = timestamp(),
step = 1 / 60;
var position_x = 100;
var position_y = 100;
function frame() {
now = timestamp();
dt = dt + Math.min(1, (now - last) / 1000);
while (dt > step) {
dt = dt - step;
update(step);
}
render(dt);
last = now;
requestAnimationFrame(frame);
}
// Game
const GRAVITY = 200
const JUMP_VEL = 200
const SPIKE_DISTANCE = 400
class Bird {
constructor() {
this.position_x = 100;
this.position_y = 100;
this.width = 88;
this.height = 73;
this.velocity_y = 0;
}
}
class Spikes {
constructor() {
this.position_x = 350;
this.position_y = 0;
}
}
let player = new Bird()
// Fixed time loop
function update(dt) {
player.position_y += player.velocity_y * dt;
player.position_x += 100 * dt;
// Gravity
player.velocity_y += GRAVITY * dt;
}
// Variable time render loop
function render(dt) {
$("#plane").css({
top: player.position_y + "px",
left: player.position_x + "px"
});
}
// Jump
document.onmousedown = function (evt) {
player.velocity_y = -JUMP_VEL;
};
requestAnimationFrame(frame);
</script>
<div id="viewport">
<div style="
left:0px;
top:300px;
background-image:url(sheet.png);
background-position: -0px -410px;
width: 276px;
height: 200px;
z-index: -2;
">
</div>
<div style="
<div id="floor" style="
left:0px;
top:380px;
top:409px;
background-image:url(sheet.png);
background-position: -276px -410px;
width: 224px;
height: 110px;
background-position: -0px -142px;
width: 800px;
height: 71px;
z-index: -1;
">
</div>
<div style="
left:224px;
top:380px;
<div id="background" style="
left:0px;
top:0px;
background-image:url(sheet.png);
background-position: -276px -410px;
width: 224px;
height: 110px;
z-index: -1;
background-position: -0px -355px;
width: 800px;
height: 480px;
z-index: -2;
">
</div>
<div id="test" style="
left: 100px;
top: 100px;
<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>
</body>

2
jquery-3.6.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long