Initial commit
This commit is contained in:
44
css/game.css
Normal file
44
css/game.css
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body:hover {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
canvas.main_canvas {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.hud {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.hud_item {
|
||||||
|
background-color: #555555aa;
|
||||||
|
margin: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
font-family: roboto, sans-serif;
|
||||||
|
}
|
||||||
|
div.bar {
|
||||||
|
width: 400px;
|
||||||
|
background-color: grey;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
div.bar div {
|
||||||
|
width: 100%;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
div.red_bar div {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
div.green_bar div {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
26
game.html
Normal file
26
game.html
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="css/game.css">
|
||||||
|
<title>Runic</title>
|
||||||
|
</head>
|
||||||
|
<body onload="init()">
|
||||||
|
<canvas id="main_canvas" class="main_canvas" width="700" height="700" autofocus></canvas>
|
||||||
|
<div class="hud">
|
||||||
|
<div class="hud_item">
|
||||||
|
<div class="bar red_bar">
|
||||||
|
<div id="health_bar"></div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="bar green_bar">
|
||||||
|
<div id="energy_bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hud_item" id="player_username">Runic alpha</div>
|
||||||
|
</div>
|
||||||
|
<script src="script/engine.js"></script>
|
||||||
|
<script src="script/client.js"></script>
|
||||||
|
<script src="script/game.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
img/character/character.svg
Normal file
80
img/character/character.svg
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
viewBox="0 0 132.29166 132.29167"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="character.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.84297153"
|
||||||
|
inkscape:cx="291.25235"
|
||||||
|
inkscape:cy="247.00935"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="true"
|
||||||
|
units="px"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
inkscape:window-width="1333"
|
||||||
|
inkscape:window-height="808"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid10"
|
||||||
|
dotted="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<circle
|
||||||
|
style="fill:#06ff00;stroke:#00e600;stroke-width:5.29167;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1;stroke-opacity:1"
|
||||||
|
id="circle843"
|
||||||
|
cx="108.47916"
|
||||||
|
cy="34.395836"
|
||||||
|
r="18.520834" />
|
||||||
|
<circle
|
||||||
|
style="fill:#00ff00;stroke:#00e600;stroke-width:5.29167;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
|
||||||
|
id="path841"
|
||||||
|
cx="23.8125"
|
||||||
|
cy="34.395836"
|
||||||
|
r="18.520834" />
|
||||||
|
<circle
|
||||||
|
style="fill:#00ff00;stroke:#00e600;stroke-width:5.2916666;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1;stroke-opacity:1"
|
||||||
|
id="path14"
|
||||||
|
cx="66.145836"
|
||||||
|
cy="66.145836"
|
||||||
|
r="44.979168" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
94
img/world/biome/forest/boulder.svg
Normal file
94
img/world/biome/forest/boulder.svg
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="700"
|
||||||
|
height="700"
|
||||||
|
viewBox="0 0 185.20833 185.20834"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
sodipodi:docname="boulder.svg"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.85934584"
|
||||||
|
inkscape:cx="370.64492"
|
||||||
|
inkscape:cy="346.33349"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1500"
|
||||||
|
inkscape:window-height="920"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid10"
|
||||||
|
dotted="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#8b8b91;fill-opacity:1;stroke-width:0.132292;stroke-linecap:round"
|
||||||
|
id="path12"
|
||||||
|
sodipodi:sides="10"
|
||||||
|
sodipodi:cx="92.604164"
|
||||||
|
sodipodi:cy="92.604164"
|
||||||
|
sodipodi:r1="91.770804"
|
||||||
|
sodipodi:r2="73.919937"
|
||||||
|
sodipodi:arg1="-0.22731924"
|
||||||
|
sodipodi:arg2="0.086840028"
|
||||||
|
inkscape:flatsided="true"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="M 182.01408,71.922095 177.09492,128.42585 139.90316,171.24693 84.644798,184.02916 32.426639,161.89014 3.19425,113.28623 8.113409,56.782481 45.305165,13.961394 100.56353,1.1791719 152.78169,23.31819 Z"
|
||||||
|
inkscape:transform-center-x="-1.4142858e-06"
|
||||||
|
inkscape:transform-center-y="1.2857144e-06" />
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#afafb8;fill-opacity:1;stroke-width:0.096411;stroke-linecap:round"
|
||||||
|
id="path12-3"
|
||||||
|
sodipodi:sides="10"
|
||||||
|
sodipodi:cx="92.604164"
|
||||||
|
sodipodi:cy="92.604164"
|
||||||
|
sodipodi:r1="67.987129"
|
||||||
|
sodipodi:r2="53.87093"
|
||||||
|
sodipodi:arg1="-0.22243095"
|
||||||
|
sodipodi:arg2="0.091728315"
|
||||||
|
inkscape:flatsided="true"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
inkscape:transform-center-x="-1.4142858e-06"
|
||||||
|
d="m 158.91637,77.606112 -3.84887,41.841708 -27.70774,31.58834 -40.983199,9.26931 -38.604462,-16.59029 -21.480137,-36.11296 3.84887,-41.841712 27.70774,-31.588344 40.983195,-9.269305 38.604463,16.590292 z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
143
img/world/biome/forest/grass.svg
Normal file
143
img/world/biome/forest/grass.svg
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="200"
|
||||||
|
height="200"
|
||||||
|
viewBox="0 0 52.916664 52.916668"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="grass.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="2.4344304"
|
||||||
|
inkscape:cx="155.83664"
|
||||||
|
inkscape:cy="110.68719"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="true"
|
||||||
|
units="px"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
inkscape:window-width="1500"
|
||||||
|
inkscape:window-height="920"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:object-nodes="true">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid115"
|
||||||
|
dotted="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="rect1172"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,0 H 13.229167 V 13.229167 H 0 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-4"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 13.229167,0 H 26.458333 V 13.229167 H 13.229167 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-7"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 26.458333,0 H 39.687501 V 13.229167 H 26.458333 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-6"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 39.687501,1.025641e-7 H 52.916666 V 13.229167 H 39.687501 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-5"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,13.229167 H 13.229167 V 26.458333 H 0 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-69"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 13.229167,13.229167 H 26.458333 V 26.458333 H 13.229167 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-3"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 26.458333,13.229167 H 39.687501 V 26.458333 H 26.458333 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-74"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 39.687501,13.229167 H 52.916666 V 26.458333 H 39.687501 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-52"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 0,26.458333 H 13.229167 V 39.687501 H 0 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-54"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 13.229167,26.458334 H 26.458333 V 39.687501 H 13.229167 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-744"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 26.458333,26.458335 H 39.687497 V 39.687501 H 26.458333 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-30"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 39.687501,26.458333 H 52.916666 V 39.687497 H 39.687501 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-78"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 1.025641e-7,39.687501 H 13.229167 V 52.916666 H 1.025641e-7 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-68"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 13.229167,39.687501 H 26.458333 V 52.916666 H 13.229167 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-8"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 26.458333,39.687501 H 39.687497 V 52.916666 H 26.458333 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<path
|
||||||
|
id="rect1172-43"
|
||||||
|
style="fill:#00cb00;fill-opacity:1;stroke:#00b300;stroke-width:0.912355;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 39.687497,39.687501 H 52.916663 V 52.916666 H 39.687497 Z"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
94
img/world/biome/forest/tree.svg
Normal file
94
img/world/biome/forest/tree.svg
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="700"
|
||||||
|
height="700"
|
||||||
|
viewBox="0 0 185.20833 185.20834"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||||
|
sodipodi:docname="tree.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.85934584"
|
||||||
|
inkscape:cx="370.64492"
|
||||||
|
inkscape:cy="346.33349"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
inkscape:document-rotation="0"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1500"
|
||||||
|
inkscape:window-height="920"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid10"
|
||||||
|
dotted="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata5">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#2e963b;stroke-width:0.132292;stroke-linecap:round;fill-opacity:1"
|
||||||
|
id="path12"
|
||||||
|
sodipodi:sides="10"
|
||||||
|
sodipodi:cx="92.604164"
|
||||||
|
sodipodi:cy="92.604164"
|
||||||
|
sodipodi:r1="93.289734"
|
||||||
|
sodipodi:r2="73.919934"
|
||||||
|
sodipodi:arg1="-0.22243095"
|
||||||
|
sodipodi:arg2="0.091728315"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
d="m 183.59562,72.024324 -17.38229,27.350887 12.10099,30.062949 -30.13901,11.91028 -7.88065,31.43422 L 108.911,164.70301 84.058849,185.5017 63.418031,160.51828 31.087058,162.73704 29.073173,130.39266 1.6127104,113.184 18.994993,85.833118 6.8940055,55.77017 37.033015,43.859887 44.913668,12.425669 76.297327,20.505314 101.14948,-0.29337106 121.7903,24.690051 l 32.33097,-2.218762 2.01389,32.344382 z"
|
||||||
|
inkscape:transform-center-x="-1.4142858e-06"
|
||||||
|
inkscape:transform-center-y="1.2857144e-06" />
|
||||||
|
<path
|
||||||
|
sodipodi:type="star"
|
||||||
|
style="fill:#13c215;stroke-width:0.096411;stroke-linecap:round;fill-opacity:1"
|
||||||
|
id="path12-3"
|
||||||
|
sodipodi:sides="10"
|
||||||
|
sodipodi:cx="92.604164"
|
||||||
|
sodipodi:cy="92.604164"
|
||||||
|
sodipodi:r1="67.987129"
|
||||||
|
sodipodi:r2="53.87093"
|
||||||
|
sodipodi:arg1="-0.22243095"
|
||||||
|
sodipodi:arg2="0.091728315"
|
||||||
|
inkscape:flatsided="false"
|
||||||
|
inkscape:rounded="0"
|
||||||
|
inkscape:randomized="0"
|
||||||
|
inkscape:transform-center-x="-1.4142858e-06"
|
||||||
|
d="m 158.91637,77.606112 -12.66775,19.932615 8.81888,21.909093 -21.96453,8.67991 -5.74321,22.90843 -22.8716,-5.88823 -18.111599,15.15754 -15.042492,-18.20727 -23.56197,1.61698 -1.467671,-23.57174 -20.012466,-12.54122 12.667751,-19.932619 -8.818881,-21.909093 21.964523,-8.679907 5.743217,-22.908437 22.871593,5.888231 18.111602,-15.157536 15.042493,18.207264 23.56197,-1.616972 1.46767,23.571741 z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
71
script/client.js
Normal file
71
script/client.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
var canvas;
|
||||||
|
var canvas_center = new vector(0, 0);
|
||||||
|
var mouse_position = new vector(0, 0);
|
||||||
|
|
||||||
|
function load_image(path) {
|
||||||
|
let image = new Image();
|
||||||
|
image.src = path;
|
||||||
|
return image;
|
||||||
|
}
|
||||||
|
|
||||||
|
function global_to_canvas(pos) {
|
||||||
|
let tempx = -player.position.x + pos.x + canvas_center.x;
|
||||||
|
let tempy = -player.position.y + pos.y + canvas_center.y;
|
||||||
|
return new vector(tempx, tempy);
|
||||||
|
}
|
||||||
|
|
||||||
|
function round_rect(ctx, x, y, width, height, radius, fill, stroke) {
|
||||||
|
if (typeof stroke != "undefined" ) {
|
||||||
|
stroke = true;
|
||||||
|
}
|
||||||
|
if (typeof radius === "undefined") {
|
||||||
|
radius = 5;
|
||||||
|
}
|
||||||
|
ctx.fillStyle = fill;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x + radius, y);
|
||||||
|
ctx.lineTo(x + width - radius, y);
|
||||||
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||||||
|
ctx.lineTo(x + width, y + height - radius);
|
||||||
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
||||||
|
ctx.lineTo(x + radius, y + height);
|
||||||
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||||||
|
ctx.lineTo(x, y + radius);
|
||||||
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||||||
|
ctx.closePath();
|
||||||
|
if (stroke) {
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
if (fill) {
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize_canvas() {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
canvas_center.x = canvas.width / 2;
|
||||||
|
canvas_center.y = canvas.height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
canvas = document.getElementById("main_canvas");
|
||||||
|
resize_canvas();
|
||||||
|
document.onkeydown = key_down;
|
||||||
|
document.onkeyup = key_up;
|
||||||
|
game_init();
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
resize_canvas(canvas);
|
||||||
|
game_tick();
|
||||||
|
}
|
||||||
|
|
||||||
|
function game_ready() {
|
||||||
|
setInterval(tick, 1000 / fps);
|
||||||
|
}
|
||||||
1
script/engine.js
Symbolic link
1
script/engine.js
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../../engine.js
|
||||||
308
script/game.js
Normal file
308
script/game.js
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
var fps = 30;
|
||||||
|
var server_fps = 1;
|
||||||
|
var server;
|
||||||
|
var player;
|
||||||
|
var hud = new Object();
|
||||||
|
var keys_pressed = {
|
||||||
|
"KeyW": false,
|
||||||
|
"KeyA": false,
|
||||||
|
"KeyS": false,
|
||||||
|
"KeyD": false
|
||||||
|
}
|
||||||
|
var mouse_position = new vector(0, 0);
|
||||||
|
var rotation_offset = 0;
|
||||||
|
var player_speed = 200;
|
||||||
|
var update_server_tick;
|
||||||
|
|
||||||
|
var username;
|
||||||
|
//set name from URL
|
||||||
|
try {
|
||||||
|
let URL = window.location.search;
|
||||||
|
params = new URLSearchParams(URL);
|
||||||
|
username = params.get("name"); //this will get foo from <url>?name=foo
|
||||||
|
if (username === null) {
|
||||||
|
username = "Anonymous";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch(err) {
|
||||||
|
console.error("Failed to get name from url", err);
|
||||||
|
}
|
||||||
|
var game_data = {
|
||||||
|
"character": {
|
||||||
|
"variants": [
|
||||||
|
load_image("img/character/character.svg")
|
||||||
|
],
|
||||||
|
"radius": 40
|
||||||
|
},
|
||||||
|
"world": {
|
||||||
|
"biome": {
|
||||||
|
"forest": {
|
||||||
|
"ground": {
|
||||||
|
"img": load_image("img/world/biome/forest/grass.svg")
|
||||||
|
},
|
||||||
|
"tree": {
|
||||||
|
"img": load_image("img/world/biome/forest/tree.svg"),
|
||||||
|
"radius": 50,
|
||||||
|
"size": 180
|
||||||
|
},
|
||||||
|
"boulder": {
|
||||||
|
"img": load_image("img/world/biome/forest/boulder.svg"),
|
||||||
|
"radius": 60,
|
||||||
|
"size": 130
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function game_init() {
|
||||||
|
init_player();
|
||||||
|
open_socket();
|
||||||
|
load_hud();
|
||||||
|
game_ready();
|
||||||
|
}
|
||||||
|
|
||||||
|
function load_hud() {
|
||||||
|
hud.health = document.getElementById("health_bar");
|
||||||
|
hud.energy = document.getElementById("energy_bar");
|
||||||
|
document.getElementById("player_username").innerText = username;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_hud() {
|
||||||
|
hud.health.style.width = `${player.health}%`;
|
||||||
|
hud.energy.style.width = `${player.stamina}%`;
|
||||||
|
document.getElementById("player_username").innerText = username;
|
||||||
|
}
|
||||||
|
|
||||||
|
function key_down(e) {
|
||||||
|
if (e.code in keys_pressed) {
|
||||||
|
if (keys_pressed[e.code] === false) {
|
||||||
|
keys_pressed[e.code] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function key_up(e) {
|
||||||
|
if (e.code in keys_pressed) {
|
||||||
|
if (keys_pressed[e.code] === true) {
|
||||||
|
keys_pressed[e.code] = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function game_tick() {
|
||||||
|
//calculations
|
||||||
|
do_collisions();
|
||||||
|
do_movement();
|
||||||
|
|
||||||
|
//rendering
|
||||||
|
render_background();
|
||||||
|
render_characters();
|
||||||
|
render_nodes();
|
||||||
|
render_usernames();
|
||||||
|
}
|
||||||
|
|
||||||
|
function init_player() {
|
||||||
|
let player_vector = new vector(0, 0);
|
||||||
|
player = new character(player_vector, 0, 0, username);
|
||||||
|
}
|
||||||
|
|
||||||
|
function message(type, data) { //incoming message
|
||||||
|
if (type === "position_update") {
|
||||||
|
if ("position" in data) {
|
||||||
|
player.position.x = data.position.x;
|
||||||
|
player.position.y = data.position.y;
|
||||||
|
}
|
||||||
|
if ("rotation" in data) {
|
||||||
|
player.rotation = data.rotation;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (type === "other_players") {
|
||||||
|
let char_array = Array.from(characters);
|
||||||
|
for (let other_player_num in data) {
|
||||||
|
let other_player = data[other_player_num];
|
||||||
|
let exists = false;
|
||||||
|
for (let existing_character_num in char_array) {
|
||||||
|
let existing_character = char_array[existing_character_num];
|
||||||
|
if (existing_character != player) {
|
||||||
|
//console.log("not the same");
|
||||||
|
if (existing_character.id === other_player.id) {
|
||||||
|
exists = true;
|
||||||
|
existing_character.position.x = other_player.position.x;
|
||||||
|
existing_character.position.y = other_player.position.y;
|
||||||
|
existing_character.rotation = other_player.rotation;
|
||||||
|
existing_character.username = other_player.username;
|
||||||
|
existing_character.health = other_player.health;
|
||||||
|
existing_character.stamina = other_player.stamina;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//console.log("the same");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!exists) {
|
||||||
|
let new_character = new character(new vector(other_player.position.x, other_player.position.y), other_player.rotation, other_player.variant, other_player.username);
|
||||||
|
new_character.id = other_player.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//remove players
|
||||||
|
for (let exiting_character_num in char_array) {
|
||||||
|
let existing_character = char_array[exiting_character_num];
|
||||||
|
let exists = false;
|
||||||
|
for (let other_player_num in data) {
|
||||||
|
let other_player = data[other_player_num];
|
||||||
|
if (other_player.id === existing_character.id) {
|
||||||
|
exists = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!exists) {
|
||||||
|
if (existing_character != player) {
|
||||||
|
existing_character.destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (type === "world") {
|
||||||
|
nodes = new Set();
|
||||||
|
data.forEach(function(itr, idx) {
|
||||||
|
let this_node = new node(new vector(itr.position.x, itr.position.y), itr.rotation, itr.radius, itr.size, itr.image);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (type === "server_data") {
|
||||||
|
if ("fps" in data) {
|
||||||
|
server_fps = data.fps;
|
||||||
|
clearInterval(send_position_to_server);
|
||||||
|
setInterval(send_position_to_server, server_fps);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("Unknown packet");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function do_collisions() {
|
||||||
|
nodes.forEach(function(itr, idx) {
|
||||||
|
collide(itr, player);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function do_movement() {
|
||||||
|
if (keys_pressed["KeyW"]) {
|
||||||
|
player.position.y -= player_speed / fps;
|
||||||
|
}
|
||||||
|
if (keys_pressed["KeyS"]) {
|
||||||
|
player.position.y += player_speed / fps;
|
||||||
|
}
|
||||||
|
if (keys_pressed["KeyA"]) {
|
||||||
|
player.position.x -= player_speed / fps;
|
||||||
|
}
|
||||||
|
if (keys_pressed["KeyD"]) {
|
||||||
|
player.position.x += player_speed / fps;
|
||||||
|
}
|
||||||
|
|
||||||
|
//rotation
|
||||||
|
player.rotation = canvas_center.rotation_to(mouse_position) + rotation_offset;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onmousemove = function(e) {
|
||||||
|
//console.log(e);
|
||||||
|
//position.rot = point_towards([xenter, yenter], e) + rotate_offset;
|
||||||
|
mouse_position.x = e.pageX;
|
||||||
|
mouse_position.y = e.pageY;
|
||||||
|
};
|
||||||
|
|
||||||
|
function render_characters() {
|
||||||
|
let ctx = canvas.getContext("2d");
|
||||||
|
characters.forEach(function(itr, idx) {
|
||||||
|
ctx.save();
|
||||||
|
//draw character
|
||||||
|
let character_position = global_to_canvas(itr.position);
|
||||||
|
ctx.translate(character_position.x, character_position.y);
|
||||||
|
ctx.rotate(itr.rotation);
|
||||||
|
let image = game_data.character.variants[itr.variant];
|
||||||
|
ctx.drawImage(image, -50, -50, dwidth = 100, dheight = 100);
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function render_usernames() {
|
||||||
|
let ctx = canvas.getContext("2d");
|
||||||
|
characters.forEach(function(itr, idx) {
|
||||||
|
ctx.save();
|
||||||
|
let character_position = global_to_canvas(itr.position);
|
||||||
|
ctx.translate(character_position.x, character_position.y-80);
|
||||||
|
//measure text
|
||||||
|
ctx.font = "15px Arial";
|
||||||
|
let size = ctx.measureText(itr.username);
|
||||||
|
//draw name plate
|
||||||
|
round_rect(ctx, -((size.width/2)+12), -20, size.width+24, 30, 4, "#555555aa", undefined);
|
||||||
|
//draw name
|
||||||
|
ctx.font = "15px Arial";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.fillStyle = "white";
|
||||||
|
ctx.fillText(itr.username, 0, 0);
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function render_background() {
|
||||||
|
let ctx = canvas.getContext("2d");
|
||||||
|
let image = game_data.world.biome.forest.ground.img;
|
||||||
|
for (let i = -2500; i < 5000; i += image.width) {
|
||||||
|
for (let j = -2500; j < 5000; j += image.height) {
|
||||||
|
ctx.save();
|
||||||
|
let where_this_ground = global_to_canvas(new vector(i, j));
|
||||||
|
ctx.translate(where_this_ground.x, where_this_ground.y);
|
||||||
|
ctx.drawImage(image, 0, 0);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function render_nodes() {
|
||||||
|
let ctx = canvas.getContext("2d");
|
||||||
|
nodes.forEach(function(itr, idx) {
|
||||||
|
ctx.save();
|
||||||
|
let position = global_to_canvas(itr.position);
|
||||||
|
let rotation = itr.rotation;
|
||||||
|
let image = game_data.world.biome.forest[itr.image].img;
|
||||||
|
|
||||||
|
ctx.translate(position.x, position.y);
|
||||||
|
ctx.rotate(rotation);
|
||||||
|
ctx.drawImage(image, image.width/2, image.height/2, dwidth=itr.size, dheight=itr.size);
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function open_socket() {
|
||||||
|
server = new WebSocket("ws://NUC-server-1:8080");
|
||||||
|
server.onopen = function() {
|
||||||
|
server.send(JSON.stringify({
|
||||||
|
"type": "init",
|
||||||
|
"data": {
|
||||||
|
"username": player.username,
|
||||||
|
"variant": player.variant
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
update_server_tick = setInterval(send_position_to_server, 1000/20);
|
||||||
|
}
|
||||||
|
server.onmessage = function(thing) {
|
||||||
|
let thingp = JSON.parse(thing.data);
|
||||||
|
message(thingp.type, thingp.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function send_position_to_server() {
|
||||||
|
let data = {
|
||||||
|
"type": "movement",
|
||||||
|
"data": {
|
||||||
|
"position": player.position,
|
||||||
|
"rotation": player.rotation
|
||||||
|
}
|
||||||
|
}
|
||||||
|
server.send(JSON.stringify(data));
|
||||||
|
if (server.readyState != 1) {
|
||||||
|
clearInterval(update_server_tick);
|
||||||
|
console.log("disconnected from server");
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user