Move CSS around, add render loop
This commit is contained in:
parent
17f06fd1d8
commit
a6e959b8ef
File diff suppressed because one or more lines are too long
69
public/assets/css/src/buttons.css
Normal file
69
public/assets/css/src/buttons.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.ui.button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
background: #f7f8fa linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
|
||||
box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset;
|
||||
color: #111111;
|
||||
padding: 0.5rem 1rem 0.5rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
|
||||
box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&.badge {
|
||||
font-size: 10px;
|
||||
padding: 0.1rem 0.25rem;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: #f4cc67;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
color: #111111;
|
||||
border: 1px solid;
|
||||
border-color: #C59F43 #AA8326 #957321;
|
||||
|
||||
&:hover {
|
||||
background-color: #fac847;
|
||||
border-color: #C59F43 #AA8326 #957321;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: #444c55;
|
||||
color: #ffffff;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||
border: 1px solid;
|
||||
border-color: #3D444C #2F353B #2C3137;
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
|
||||
&:hover {
|
||||
background-color: #4e5964;
|
||||
border-color: #32373E #24282D #212429;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: #e57373;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1));
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
border: 1px solid;
|
||||
border-color: #d32f2f #c62828 #b71c1c;
|
||||
|
||||
&:hover {
|
||||
background-color: #d95c5c;
|
||||
border-color: #b71c1c #a52727 #8e1f1f;
|
||||
}
|
||||
}
|
||||
}
|
||||
450
public/assets/css/src/main.css
Normal file
450
public/assets/css/src/main.css
Normal file
|
|
@ -0,0 +1,450 @@
|
|||
@import 'utilities.css';
|
||||
@import 'buttons.css';
|
||||
@import 'forms.css';
|
||||
|
||||
body {
|
||||
background-color: #bcc6cf;
|
||||
background-image: url('/assets/img/bg.jpg');
|
||||
background-attachment: fixed;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
max-width: 1640px;
|
||||
margin: 0px auto;
|
||||
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 76px;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
background-image: url('/assets/img/header.jpg');
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
|
||||
#center {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
min-width: 200px;
|
||||
|
||||
.box {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.15rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
aside#left nav {
|
||||
& > *:not(:last-child) {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
div.stack {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.15rem;
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
&:checked ~ div.list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked + label {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.15rem;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
transition: color, background-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
height: 18px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
span.text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
span.arrow {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
div.list {
|
||||
display: none;
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem 0.5rem 1.35rem;
|
||||
border-radius: 0.15rem;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
transition: color, background-color 0.2s ease;
|
||||
|
||||
&:not(:last-child)::before {
|
||||
content: '├';
|
||||
display: inline-block;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:last-child::before {
|
||||
content: '└';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #444c55;
|
||||
color: #ffffff;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||
border: 1px solid;
|
||||
border-color: #3D444C #2F353B #2C3137;
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
transition: color, background-color 0.2s ease;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.15rem;
|
||||
|
||||
&:has(img) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 18px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #444c55;
|
||||
color: #ffffff;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||
border: 1px solid;
|
||||
border-color: #3D444C #2F353B #2C3137;
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
|
||||
& > p:not(:last-child) {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
#char-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 0 1rem;
|
||||
height: 34px;
|
||||
color: white;
|
||||
gap: 1rem;
|
||||
background-image: url('/assets/img/bar.jpg');
|
||||
|
||||
& > div.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.badge {
|
||||
font-size: 10px;
|
||||
background-color: #f7f8fa;
|
||||
color: #111111;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.1rem 0.25rem;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
|
||||
|
||||
&.dark {
|
||||
background-color: #444c55;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: #a6e3a1;
|
||||
}
|
||||
}
|
||||
|
||||
.char-meter {
|
||||
background-color: black;
|
||||
height: 16px;
|
||||
min-width: 100px;
|
||||
border-radius: 0.1rem;
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
border-radius: 0.1rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.hp {
|
||||
background-color: #e57373;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1));
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
border: 1px solid;
|
||||
border-color: #d32f2f #c62828 #b71c1c;
|
||||
}
|
||||
|
||||
&.mp {
|
||||
background-color: #5a9bd4;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(60, 100, 150, 0.1));
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
border: 1px solid;
|
||||
border-color: #4a8ab0 #3a7a9c #2a6a88;
|
||||
}
|
||||
|
||||
&.tp {
|
||||
background-color: #f4cc67;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
border: 1px solid;
|
||||
border-color: #C59F43 #AA8326 #957321;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: 1px solid #666;
|
||||
font-size: 14px;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip-trigger {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.debug-query-log {
|
||||
padding: 2rem;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#center section {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
h1:has(.badge), h2:has(.badge), h3:has(.badge), h4:has(.badge), h5:has(.badge), h6:has(.badge) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > .badge {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
min-height: 1rem;
|
||||
margin: 1rem 0;
|
||||
background: #f8f8f9;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 1.4285rem;
|
||||
color: rgba(0, 0, 0, .87);
|
||||
transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease;
|
||||
border-radius: .28571429rem;
|
||||
box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&.success {
|
||||
background-color: #f0f9eb;
|
||||
color: #2c662d;
|
||||
border-color: #b3dc9d;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: #f9e9eb;
|
||||
color: #9f3a38;
|
||||
border-color: #e0b4b4;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: #fff8e1;
|
||||
color: #573a08;
|
||||
border-color: #f9e79f;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: #f0f9fb;
|
||||
color: #2c7fba;
|
||||
border-color: #b3d7f9;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: #f0f0f0;
|
||||
color: #2c2c2c;
|
||||
border-color: #b3b3b3;
|
||||
}
|
||||
|
||||
a[alert-close] {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4C0515;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #6C0515;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: #444c55;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
|
||||
border: 1px solid;
|
||||
border-color: #3D444C #2F353B #2C3137;
|
||||
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
|
||||
#canvas-container {
|
||||
& > canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
}
|
||||
|
||||
.char-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url('/assets/img/world/rogues.png');
|
||||
|
||||
&.index-0 {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
&.index-1 {
|
||||
background-position: -32px 0;
|
||||
}
|
||||
|
||||
&.index-2 {
|
||||
background-position: -64px 0;
|
||||
}
|
||||
|
||||
&.index-3 {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
|
||||
&.index-4 {
|
||||
background-position: -128px 0;
|
||||
}
|
||||
}
|
||||
40
public/assets/css/src/utilities.css
Normal file
40
public/assets/css/src/utilities.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.my-1 { margin-bottom: 0.25rem; margin-top: 0.25rem; }
|
||||
.my-2 { margin-bottom: 0.5rem; margin-top: 0.5rem; }
|
||||
.my-3 { margin-bottom: 0.75rem; margin-top: 0.75rem; }
|
||||
.my-4 { margin-bottom: 1rem; margin-top: 1rem; }
|
||||
|
||||
.ml-1 { margin-left: 0.25rem; }
|
||||
.ml-2 { margin-left: 0.5rem; }
|
||||
.ml-3 { margin-left: 0.75rem; }
|
||||
.ml-4 { margin-left: 1rem; }
|
||||
|
||||
.mr-1 { margin-right: 0.25rem; }
|
||||
.mr-2 { margin-right: 0.5rem; }
|
||||
.mr-3 { margin-right: 0.75rem; }
|
||||
.mr-4 { margin-right: 1rem; }
|
||||
|
||||
.mb-1 { margin-bottom: 0.25rem; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.mb-3 { margin-bottom: 0.75rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mt-3 { margin-top: 0.75rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
|
||||
|
||||
.container-960 {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -104,11 +104,11 @@ function user($field = '')
|
|||
}
|
||||
|
||||
/**
|
||||
* Check whether the user has selected a character. If so, return the character's ID.
|
||||
* Check whether the user has selected a character.
|
||||
*/
|
||||
function user_selected_char(): int
|
||||
function user_selected_char()
|
||||
{
|
||||
return (int) $_SESSION['user']['char_id'];
|
||||
return user('char_id') > 0 ? true : false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -124,7 +124,7 @@ function char($field = '')
|
|||
$GLOBALS['char'] = db_query(
|
||||
db_live(),
|
||||
"SELECT * FROM characters WHERE id = :c",
|
||||
[':c' => user_selected_char()]
|
||||
[':c' => user('char_id')]
|
||||
)->fetchArray(SQLITE3_ASSOC);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<main>
|
||||
<aside id="left">
|
||||
<?php if (user()) echo c_left_nav($activeTab ?? 0); ?>
|
||||
<?php if (user() && user_selected_char()) echo c_left_nav($activeTab ?? 0); ?>
|
||||
</aside>
|
||||
|
||||
<div id="center">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
<aside id="right">
|
||||
<?php if (user()): ?>
|
||||
<?php if (user() && user_selected_char()): ?>
|
||||
<div class="box">
|
||||
@TODO
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
<a href="/auth/login" class="ui button primary">Login</a>
|
||||
<a href="/auth/register" class="ui button secondary">Register</a>
|
||||
<?php else: ?>
|
||||
<h1 class="tooltip-click" data-tooltip-content="Hover-based tooltip">Home</h1>
|
||||
<?= print_r(char()) ?>
|
||||
<h1>Home</h1>
|
||||
<p>Welcome, <?= user('username') ?>!</p>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -55,13 +55,25 @@
|
|||
y: document.getElementById('char_y')
|
||||
}
|
||||
|
||||
let player = { x: <?= location('x') ?>, y: <?= location('y') ?>, char: 23, sprite: { x: 0, y: 0 } }
|
||||
let player = {
|
||||
location: { x: <?= location('x') ?>, y: <?= location('y') ?> },
|
||||
current: { x: <?= location('x') ?>, y: <?= location('y') ?> },
|
||||
target: { x: <?= location('x') ?>, y: <?= location('y') ?> },
|
||||
char: 23, sprite: { x: 0, y: 0 },
|
||||
tweenDuration: 0.2, // seconds
|
||||
tweenProgress: 0
|
||||
}
|
||||
let camera = { x: 0, y: 0 }
|
||||
let visible = { x: 0, y: 0 }
|
||||
|
||||
game.tiles.img.src = '/assets/img/world/tiles.jpg';
|
||||
game.sprites.img.src = '/assets/img/world/rogues.png';
|
||||
|
||||
let lastFrameTime = 0;
|
||||
let fps = 0;
|
||||
|
||||
let debounce = false;
|
||||
|
||||
function getPlayerSprite() {
|
||||
let col = player.char % game.sprites.cols
|
||||
let row = Math.floor(player.char / game.sprites.cols)
|
||||
|
|
@ -73,17 +85,18 @@
|
|||
game.canvas.height = game.canvas.clientHeight
|
||||
visible.x = Math.ceil(game.canvas.width / game.tiles.size)
|
||||
visible.y = Math.ceil(game.canvas.height / game.tiles.size)
|
||||
updateCamera()
|
||||
render()
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
window.addEventListener('resize', updateCanvasSize)
|
||||
window.addEventListener('keydown', handleKeyPress)
|
||||
window.addEventListener('keyup', () => debounce = false)
|
||||
}
|
||||
|
||||
// Handle keyboard input
|
||||
function handleKeyPress(e) {
|
||||
if (debounce) return;
|
||||
debounce = true;
|
||||
let moved = false;
|
||||
const newPos = { ...player }
|
||||
|
||||
|
|
@ -104,8 +117,8 @@
|
|||
const dy = [-1, 1, 0, 0];
|
||||
|
||||
// Calculate new position
|
||||
const newX = player.x + dx[direction];
|
||||
const newY = player.y + dy[direction];
|
||||
const newX = player.location.x + dx[direction];
|
||||
const newY = player.location.y + dy[direction];
|
||||
|
||||
if (direction !== undefined) {
|
||||
// Check if the new position is outside the map bounds
|
||||
|
|
@ -124,12 +137,11 @@
|
|||
}).then(response => {
|
||||
if (response.ok) {
|
||||
response.json().then(data => {
|
||||
player.x = data.x
|
||||
player.y = data.y
|
||||
loc_span.x.textContent = player.x
|
||||
loc_span.y.textContent = player.y
|
||||
updateCamera()
|
||||
render()
|
||||
player.location = { x: data.x, y: data.y }
|
||||
player.target = { x: data.x, y: data.y }
|
||||
player.tweenProgress = 0
|
||||
loc_span.x.textContent = player.location.x
|
||||
loc_span.y.textContent = player.location.y
|
||||
});
|
||||
} else {
|
||||
throw new Error('Failed to move character');
|
||||
|
|
@ -140,8 +152,8 @@
|
|||
|
||||
// Update camera position
|
||||
function updateCamera() {
|
||||
camera.x = player.x * game.tiles.size - canvas.width / 2;
|
||||
camera.y = player.y * game.tiles.size - canvas.height / 2;
|
||||
camera.x = player.current.x * game.tiles.size - canvas.width / 2;
|
||||
camera.y = player.current.y * game.tiles.size - canvas.height / 2;
|
||||
|
||||
// Clamp camera to map bounds
|
||||
camera.x = Math.max(0, Math.min(camera.x,
|
||||
|
|
@ -150,10 +162,21 @@
|
|||
map.length * game.tiles.size - canvas.height));
|
||||
}
|
||||
|
||||
function lerp(start, end, t) {
|
||||
return start + (end - start) * t;
|
||||
}
|
||||
|
||||
// Render the game
|
||||
function render() {
|
||||
function render(t) {
|
||||
const ctx = game.canvas.getContext('2d')
|
||||
|
||||
// Calculate FPS
|
||||
if (lastFrameTime) {
|
||||
const delta = (t - lastFrameTime) / 1000;
|
||||
fps = Math.round(1 / delta);
|
||||
}
|
||||
lastFrameTime = t;
|
||||
|
||||
ctx.clearRect(0, 0, game.canvas.width, game.canvas.height)
|
||||
|
||||
// Calculate visible tile range
|
||||
|
|
@ -169,24 +192,43 @@
|
|||
for (let x = startTileX; x < endTileX; x++) {
|
||||
if (x >= map[0].length) continue
|
||||
|
||||
const screenX = x * game.tiles.size - camera.x
|
||||
const screenY = y * game.tiles.size - camera.y
|
||||
const screenX = Math.round(x * game.tiles.size - camera.x)
|
||||
const screenY = Math.round(y * game.tiles.size - camera.y)
|
||||
|
||||
ctx.drawImage(game.tiles.img, map[y][x] * game.tiles.size, 0, game.tiles.size, game.tiles.size,
|
||||
screenX, screenY, game.tiles.size, game.tiles.size)
|
||||
}
|
||||
}
|
||||
|
||||
// Tween player position
|
||||
if (player.tweenProgress < 1) {
|
||||
player.tweenProgress += 1 / player.tweenDuration / 60
|
||||
player.current.x = lerp(player.current.x, player.target.x, player.tweenProgress)
|
||||
player.current.y = lerp(player.current.y, player.target.y, player.tweenProgress)
|
||||
} else {
|
||||
player.current = { x: player.current.x, y: player.current.y }
|
||||
}
|
||||
|
||||
updateCamera()
|
||||
|
||||
// Render the player on top of the map using their current position
|
||||
const playerX = Math.round((player.current.x * game.tiles.size) - camera.x)
|
||||
const playerY = Math.round((player.current.y * game.tiles.size) - camera.y)
|
||||
ctx.drawImage(game.sprites.img, player.sprite.x, player.sprite.y, game.sprites.size, game.sprites.size,
|
||||
(player.x * game.sprites.size) - camera.x, (player.y * game.sprites.size) - camera.y,
|
||||
game.sprites.size, game.sprites.size)
|
||||
playerX, playerY, game.sprites.size, game.sprites.size)
|
||||
|
||||
// Render FPS counter
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.font = '16px Arial';
|
||||
ctx.fillText(`FPS: ${fps}`, game.canvas.width - 70, 20);
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
getPlayerSprite()
|
||||
updateCanvasSize()
|
||||
setupEventListeners()
|
||||
render()
|
||||
requestAnimationFrame(render)
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user