92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
"use strict";
|
|
|
|
let _gameLoopTimeout = undefined;
|
|
|
|
(function () {
|
|
const editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/gruvbox");
|
|
editor.session.setMode("ace/mode/javascript");
|
|
|
|
if (editor.getValue() === "") {
|
|
editor.setValue(
|
|
``,
|
|
);
|
|
}
|
|
|
|
let running = false;
|
|
|
|
const startStopButton = document.querySelector("#start-stop");
|
|
const saveButton = document.querySelector("#save");
|
|
const consoleCode = document.querySelector("#console-code");
|
|
|
|
startStopButton.onclick = (ev) => {
|
|
if (running) {
|
|
if (_gameLoopTimeout) {
|
|
clearTimeout(_gameLoopTimeout);
|
|
_gameLoopTimeout = undefined;
|
|
}
|
|
startStopButton.textContent = "Start";
|
|
running = false;
|
|
} else {
|
|
const code = editor.getValue();
|
|
runCode(code, consoleCode);
|
|
startStopButton.textContent = "Stop";
|
|
running = true;
|
|
}
|
|
};
|
|
})();
|
|
|
|
const lib = (() => {
|
|
const consoleCode = document.querySelector("#console-code");
|
|
|
|
const width = 480;
|
|
const height = 360;
|
|
|
|
const canvas = document.querySelector("canvas");
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const cx = canvas.getContext("2d");
|
|
cx.imageSmoothingEnabled = false;
|
|
|
|
function rgb(red, green, blue) {
|
|
return `rgb(${red}, ${green}, ${blue})`;
|
|
}
|
|
|
|
function clear(color) {
|
|
cx.fillStyle = color;
|
|
cx.fillRect(0, 0, width, height);
|
|
}
|
|
|
|
function drawRect(x, y, width, height, color) {
|
|
cx.fillStyle = color;
|
|
cx.fillRect(x, y, width, height);
|
|
}
|
|
|
|
function println(msg) {
|
|
consoleCode.textContent += `${msg}\n`;
|
|
}
|
|
|
|
function startGameLoop(loopFunction) {
|
|
let before = Date.now();
|
|
_gameLoopTimeout = setInterval(() => {
|
|
const now = Date.now();
|
|
const deltaT = (now - before) / 1000;
|
|
before = now;
|
|
loopFunction(deltaT);
|
|
}, 16);
|
|
}
|
|
|
|
return { width, height, rgb, clear, drawRect, println, startGameLoop };
|
|
})();
|
|
|
|
async function runCode(code, consoleCode) {
|
|
lib;
|
|
consoleCode.textContent += `\nRunning code....\n`;
|
|
try {
|
|
const result = await eval(`(async function () {${code}})()`);
|
|
consoleCode.textContent += `Code returned ${result}\n`;
|
|
} catch (error) {
|
|
consoleCode.textContent += `${error}\n`;
|
|
}
|
|
}
|