159 lines
6.1 KiB
HTML
159 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Map creator for Penger Party</title>
|
|
<style>
|
|
#canva {
|
|
width: 800px;
|
|
height: 600px;
|
|
}
|
|
@media screen and (min-width: calc(800px + calc(64px * 4))) {
|
|
#css-bullshit {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
#left {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
#right {
|
|
float: right;
|
|
width: calc(100% - 800px - 25px);
|
|
position: absolute;
|
|
right: 0px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="css-bullshit">
|
|
<h1>Map creator for Penger Party</h1>
|
|
<div id="left">
|
|
<canvas id="canva"></canvas>
|
|
</div>
|
|
<div id="right">
|
|
<textarea id="import-json" placeholder="map.json"></textarea>
|
|
<button id="import-butt">Import</button>
|
|
<form>
|
|
<input type="radio" name="type" id="is_coll" checked><label for="is_coll">collisions</label></input>
|
|
<input type="radio" name="type" id="is_coin"><label for="is_coin">coin</label></input>
|
|
</form>
|
|
name: <input id="map-name"></input>
|
|
<p>copie paste to maps.json:</p>
|
|
<pre id="mapjson"></pre>
|
|
<p>mouse = <span id="mousepos"></span></p>
|
|
<h3>Delete collisions:</h3>
|
|
<ul id="delete-coll"></ul>
|
|
<h3>Delete coins:</h3>
|
|
<ul id="delete-coin"></ul>
|
|
</div>
|
|
<script>
|
|
var WIDTH = 800;
|
|
var HEIGHT = 600;
|
|
var canva = document.getElementById("canva");
|
|
var mapjson = document.getElementById("mapjson");
|
|
var mapname = document.getElementById("map-name");
|
|
var mousepos = document.getElementById("mousepos");
|
|
var ctx = canva.getContext("2d");
|
|
ctx.canvas.width = WIDTH;
|
|
ctx.canvas.height = HEIGHT;
|
|
ctx.fillStyle = "blue";
|
|
ctx.fillRect(0, 0, WIDTH, HEIGHT);
|
|
var map = {}
|
|
map.name = "test";
|
|
map.collisions = [];
|
|
map.coins = [];
|
|
mapname.onchange = (e) => {
|
|
map.name = mapname.value
|
|
mapjson.innerText = JSON.stringify(map);
|
|
};
|
|
var importbutt = document.getElementById("import-butt");
|
|
importbutt.onclick = () => {
|
|
var importjson = document.getElementById("import-json");
|
|
map = JSON.parse(importjson.value);
|
|
}
|
|
var clickidiclick = false;
|
|
document.addEventListener("mousemove", (e) => {
|
|
var rect = canva.getBoundingClientRect();
|
|
var x = Math.floor(e.clientX - rect.left);
|
|
var y = Math.floor(e.clientY - rect.top);
|
|
if (x < 0 || x >= WIDTH || y >= HEIGHT || y < 0) return;
|
|
mousepos.innerText = "x: "+x+", y: "+y;
|
|
if (clickidiclick) {
|
|
map.collisions[map.collisions.length-1].width = x - map.collisions[map.collisions.length-1].x;
|
|
map.collisions[map.collisions.length-1].height = y - map.collisions[map.collisions.length-1].y;
|
|
}
|
|
});
|
|
document.addEventListener("click", (e) => {
|
|
var rect = canva.getBoundingClientRect();
|
|
var x = Math.floor(e.clientX - rect.left);
|
|
var y = Math.floor(e.clientY - rect.top);
|
|
if (x < 0 || x >= WIDTH || y >= HEIGHT || y < 0) return;
|
|
if (document.getElementById("is_coll").checked) {
|
|
if (!clickidiclick) {
|
|
map.collisions[map.collisions.length] = {x: x, y: y};
|
|
document.getElementById("delete-coll").innerHTML += "<li><button onclick='del_coll("+JSON.stringify(map.collisions[map.collisions.length-1])+", this)'>x: "+x+", y: "+y+"</button></li>";
|
|
} else {
|
|
var coll = map.collisions[map.collisions.length-1];
|
|
if (coll.width < 0) {
|
|
coll.x = coll.x + coll.width;
|
|
coll.width = -coll.width;
|
|
}
|
|
if (coll.height < 0) {
|
|
coll.y = coll.y + coll.height;
|
|
coll.height = -coll.height;
|
|
}
|
|
}
|
|
clickidiclick = !clickidiclick;
|
|
}
|
|
else if (document.getElementById("is_coin").checked) {
|
|
map.coins[map.coins.length] = {x: x-60/2, y: y-60/2};
|
|
document.getElementById("delete-coin").innerHTML += "<li><button onclick='del_coin("+JSON.stringify(map.coins[map.coins.length-1])+", this)'>x: "+x+", y: "+y+"</button></li>";
|
|
clickidiclick = false;
|
|
}
|
|
mapjson.innerText = JSON.stringify(map);
|
|
});
|
|
function del_coll(val, butt) {
|
|
var i = 0;
|
|
for (i = 0; i < map.collisions.length; i++) {
|
|
if (map.collisions[i].x == val.x && map.collisions[i].y == val.y) break;
|
|
}
|
|
map.collisions.splice(i, 1);
|
|
mapjson.innerText = JSON.stringify(map);
|
|
butt.parentElement.remove();
|
|
}
|
|
function del_coin(val, butt) {
|
|
var i = 0;
|
|
for (i = 0; i < map.coins.length; i++) {
|
|
if (map.coins[i].x == val.x && map.coins[i].y == val.y) break;
|
|
}
|
|
map.coins.splice(i, 1);
|
|
mapjson.innerText = JSON.stringify(map);
|
|
butt.parentElement.remove();
|
|
}
|
|
function draw() {
|
|
ctx.fillStyle = "green";
|
|
ctx.fillRect(0, 0, WIDTH, HEIGHT);
|
|
for (var i = 0; i < map.collisions.length; i++) {
|
|
ctx.fillStyle = "red";
|
|
ctx.fillRect(
|
|
map.collisions[i].x,
|
|
map.collisions[i].y,
|
|
map.collisions[i].width,
|
|
map.collisions[i].height
|
|
);
|
|
}
|
|
for (var i = 0; i < map.coins.length; i++) {
|
|
ctx.beginPath();
|
|
ctx.arc(map.coins[i].x+60/2, map.coins[i].y+60/2, 60/2, 0, 2 * Math.PI);
|
|
ctx.fillStyle = "yellow";
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
}
|
|
window.requestAnimationFrame(draw);
|
|
}
|
|
window.requestAnimationFrame(draw);
|
|
</script>
|
|
</body>
|
|
</html>
|