617 lines
19 KiB
HTML
617 lines
19 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: black;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-family: arial;
|
|
font-size: 12px;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
#viewport {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
top: 0px;
|
|
left: 0px;
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
#plane {
|
|
width: 88px;
|
|
height: 73px;
|
|
background-image: url(sheet.png);
|
|
-webkit-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 {
|
|
0% {
|
|
background-position: -330px -1371px;
|
|
}
|
|
|
|
33.33% {
|
|
background-position: -372px -1132px;
|
|
}
|
|
|
|
66.66% {
|
|
background-position: -222px -1562px;
|
|
}
|
|
}
|
|
|
|
@keyframes cycle_sprites {
|
|
0% {
|
|
background-position: -330px -1371px;
|
|
}
|
|
|
|
33.33% {
|
|
background-position: -372px -1132px;
|
|
}
|
|
|
|
66.66% {
|
|
background-position: -222px -1562px;
|
|
}
|
|
}
|
|
</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>
|
|
<div id="viewport">
|
|
<div id="flash" style="z-index:11;
|
|
background-color: white;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
opacity: 0%;"></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="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: calc(50vw - 206px);
|
|
top: 40vh;
|
|
background-image:url(sheet.png);
|
|
background-position: -0px -835px;
|
|
width: 412px;
|
|
height: 78px;
|
|
z-index: 10;
|
|
">
|
|
</div>
|
|
|
|
<div id="score" style="
|
|
left:50px;
|
|
top: 50px;
|
|
z-index: 10;
|
|
"></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>
|
|
|
|
<script>
|
|
// POTENTIAL IMPROVEMENTS:
|
|
// - Use a fixed pool of level objects instead of removing and creating them all the time
|
|
// - Use a better class hierarchy - there's some code duplication, especially between Spikes and Ground
|
|
|
|
// // 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() {
|
|
return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
|
|
}
|
|
|
|
var now,
|
|
dt = 0,
|
|
last = timestamp(),
|
|
step = 1 / 60;
|
|
|
|
const GameState = {
|
|
PLAYING: 0,
|
|
STARTSCREEN: 1
|
|
};
|
|
|
|
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 = 250
|
|
const GROUND_DISTANCE = 800;
|
|
const INITIAL_SPIKE_DISTANCE = 2000;
|
|
const FIRST_SPIKE_POSITION = 350;
|
|
const FIRST_GROUND_POSITION = -1000;
|
|
|
|
// 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 next_ground_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;
|
|
this.position_y = 150;
|
|
|
|
this.width = 88;
|
|
this.height = 73;
|
|
|
|
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 {
|
|
constructor(x, y) {
|
|
this.position_x = x;
|
|
this.position_y = y;
|
|
|
|
this.width = 108;
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
class Ground {
|
|
constructor(x) {
|
|
this.position_x = x;
|
|
|
|
this.width = 800;
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
class Digit {
|
|
constructor(x, y, image_x, image_y, width, height) {
|
|
this.position_x = x;
|
|
this.position_y = y;
|
|
|
|
this.width = width;
|
|
this.height = height
|
|
|
|
this.id = Math.floor(Math.random() * 1000000);
|
|
|
|
this.element1 = document.createElement("div");
|
|
this.element1.id = this.id;
|
|
|
|
document.getElementById("score").appendChild(this.element1);
|
|
|
|
$("#" + this.id).css({
|
|
"left": (this.position_x) + "px",
|
|
"top": (this.position_y) + "px",
|
|
"background-image": "url(sheet.png)",
|
|
"background-position": "-" + image_x + "px -" + image_y + "px",
|
|
"width": width + "px",
|
|
"height": height + "px",
|
|
"z-index": "10"
|
|
});
|
|
}
|
|
|
|
remove() {
|
|
document.getElementById(this.id).remove();
|
|
}
|
|
}
|
|
|
|
function get_digit(val, x, y) {
|
|
if (val == 0) {
|
|
return new Digit(x, y, 432, 1743, 53, 78);
|
|
} else if (val == 1) {
|
|
return new Digit(x, y, 512, 1093, 37, 76);
|
|
} else if (val == 2) {
|
|
return new Digit(x, y, 477, 1350, 51, 77);
|
|
} else if (val == 3) {
|
|
return new Digit(x, y, 485, 1679, 51, 78);
|
|
} else if (val == 4) {
|
|
return new Digit(x, y, 432, 1537, 55, 76);
|
|
} else if (val == 5) {
|
|
return new Digit(x, y, 485, 1823, 50, 76);
|
|
} else if (val == 6) {
|
|
return new Digit(x, y, 432, 1885, 53, 77);
|
|
} else if (val == 7) {
|
|
return new Digit(x, y, 478, 1173, 51, 76);
|
|
} else if (val == 8) {
|
|
return new Digit(x, y, 461, 899, 51, 78);
|
|
} else if (val == 9) {
|
|
return new Digit(x, y, 458, 1962, 53, 77);
|
|
}
|
|
}
|
|
|
|
// Objects
|
|
let player = new Bird()
|
|
var spikes = []
|
|
var grounds = []
|
|
var score_digits = []
|
|
|
|
// 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() {
|
|
grounds.push(new Ground(next_ground_location));
|
|
next_ground_location += GROUND_DISTANCE;
|
|
}
|
|
|
|
function update_score() {
|
|
score_digits.forEach(function (digit) {
|
|
digit.remove();
|
|
})
|
|
score_digits.length = 0;
|
|
|
|
// Could be done with modulo and division but I like this stupid approach:
|
|
// Turn the score into a string and iterate over its characters
|
|
var working_x = 0;
|
|
String(score).split('').map(function (v, i) {
|
|
var digit = get_digit(v, working_x, 0);
|
|
score_digits.push(digit);
|
|
working_x += digit.width;
|
|
});
|
|
}
|
|
|
|
// Setup the game world by removing old objects and spawning new ones
|
|
function setupGame() {
|
|
next_spike_location = FIRST_SPIKE_POSITION;
|
|
next_ground_location = FIRST_GROUND_POSITION;
|
|
|
|
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;
|
|
|
|
player.velocity_y = 0;
|
|
|
|
for (let i = next_spike_location; i < INITIAL_SPIKE_DISTANCE; i += SPIKE_DISTANCE) {
|
|
spawn_spikes();
|
|
}
|
|
for (let i = next_ground_location; i < INITIAL_SPIKE_DISTANCE; i += GROUND_DISTANCE) {
|
|
spawn_ground();
|
|
}
|
|
|
|
under_spikes_in_previous_frame = false;
|
|
score = 0;
|
|
update_score();
|
|
}
|
|
|
|
// 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();
|
|
}
|
|
|
|
// Same for ground
|
|
var first_ground = grounds[0];
|
|
if (first_ground.position_x < player.position_x - camera_x - first_ground.width) {
|
|
// This spike has just left the view -> remove it
|
|
first_ground.remove()
|
|
grounds.shift();
|
|
|
|
// Spawn new spikes in front of the player
|
|
spawn_ground();
|
|
}
|
|
|
|
|
|
// Move the player
|
|
player.position_y += player.velocity_y * dt;
|
|
player.position_x += 100 * dt;
|
|
|
|
// Clamp at top
|
|
if (player.position_y < 0) {
|
|
player.position_y = 0;
|
|
player.velocity_y = 0;
|
|
}
|
|
|
|
// Gravity
|
|
player.velocity_y += GRAVITY * dt;
|
|
|
|
// // Lose conditions
|
|
// Player hits the ground
|
|
if (player.position_y > 400) {
|
|
die();
|
|
}
|
|
|
|
// Player hits a spike
|
|
var under_spikes_this_frame = false;
|
|
|
|
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) {
|
|
under_spikes_this_frame = true;
|
|
|
|
// 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();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Increase the score if we just left spikes
|
|
if (under_spikes_in_previous_frame && !under_spikes_this_frame) {
|
|
score += 1;
|
|
update_score();
|
|
}
|
|
under_spikes_in_previous_frame = under_spikes_this_frame;
|
|
} 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 && has_died) {
|
|
player.velocity_y += GRAVITY * dt;
|
|
player.position_y += player.velocity_y * dt;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Variable time render loop
|
|
function render(dt) {
|
|
// Place the player
|
|
$("#plane").css({
|
|
top: player.position_y + "px",
|
|
left: 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);
|
|
})
|
|
grounds.forEach(function (ground) {
|
|
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" });
|
|
$("#game_over").css({ visibility: "hidden" });
|
|
} else {
|
|
$("#get_ready").css({ visibility: "hidden" });
|
|
$("#game_over").css({ visibility: "visible" });
|
|
}
|
|
} else {
|
|
$("#get_ready").css({ visibility: "hidden" });
|
|
$("#game_over").css({ visibility: "hidden" });
|
|
}
|
|
|
|
if (just_died) {
|
|
// 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_after_death = false;
|
|
just_died = false;
|
|
} else {
|
|
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 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
|
|
player.velocity_y = -JUMP_VEL;
|
|
} else if (current_gamestate == GameState.STARTSCREEN) {
|
|
restart();
|
|
}
|
|
};
|
|
|
|
// Start the game loop
|
|
requestAnimationFrame(frame);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |