--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+ <title>Racer</title>
+ </head>
+ <body style='background: #fff; margin: 0; padding: 0; width: 100%; height: 100%;'>
+ <canvas id='display' width='1' height='1' style='width: 100%; height: 100%;' />
+ <script>
+"use strict";
+
+const Keys = { left: 37, right: 39, up: 38, down: 40 };
+const Canvas = display.getContext('2d');
+
+const FrameTimer = ((prev = 1, curr = 1)=>({
+ update: (now) => (prev = curr, curr = now, (curr - prev) / 1000),
+ render: () => {
+ Canvas.fillStyle = "Red";
+ Canvas.font = "normal 12pt Arial";
+ Canvas.fillText(Math.round(1/((curr - prev) / 1000)) + " fps", 10, 26);
+ }
+}))();
+
+const Controls = ((self = {})=>{
+ const onKey = (val) => ((e)=>{
+ self[e.keyCode] = val;
+ e.preventDefault && e.preventDefault();
+ e.stopPropagation && e.stopPropagation();
+ });
+ document.addEventListener('keydown', onKey(true), false);
+ document.addEventListener('keyup', onKey(false), false);
+ return self;
+})();
+
+const Camera = ((self = {})=>{
+ let x = 0, y = 0;
+
+ const resizeView = ()=>{
+ if (self.width != window.innerWidth || self.height != window.innerHeight) {
+ self.width = display.width = window.innerWidth;
+ self.height = display.height = window.innerHeight;
+ }
+ };
+
+ const tracePath = (points)=>{
+ console.log(points);
+ Canvas.beginPath();
+ Canvas.moveTo(points[0][0], points[0][1]);
+ points.map((pt) => Canvas.lineTo(pt[0], pt[1]));
+ };
+
+ self.render = ()=>{
+ resizeView();
+
+ const adjust = 5;
+ if (Controls[Keys.left]) x -= adjust;
+ if (Controls[Keys.right]) x += adjust;
+ if (Controls[Keys.up]) y -= adjust;
+ if (Controls[Keys.down]) y += adjust;
+
+ Canvas.save();
+ Canvas.clearRect(0, 0, self.width, self.height);
+
+ Canvas.beginPath();
+ Canvas.moveTo(self.width/2, 0);
+ Canvas.bezierCurveTo(x, y, x, y, self.width/8, self.height);
+ Canvas.stroke();
+
+ Canvas.beginPath();
+ Canvas.moveTo(self.width/2, 0);
+ Canvas.bezierCurveTo(x, y, x, y, 7 * self.width/8, self.height);
+ Canvas.stroke();
+
+ Canvas.restore();
+ };
+
+ resizeView();
+ return self;
+})();
+
+(() => {
+ const loop = (now) => {
+ const seconds = FrameTimer.update(now);
+ Camera.render();
+ FrameTimer.render();
+ requestAnimationFrame(loop);
+ };
+ requestAnimationFrame(loop);
+})();
+ </script>
+ </body>
+</html>
const Keys = { left: 37, right: 39, up: 38, down: 40 };
const Canvas = display.getContext('2d');
-const FrameTimer = (()=>{
- let prev = 1, curr = 1;
+const FrameTimer = ((prev = 1, curr = 1)=>{
return {
update: (now) => (prev = curr, curr = now, (curr - prev) / 1000),
render: () => {
};
})();
-const Controls = (()=>{
- const self = {};
+const Controls = ((self = {})=>{
const onKey = (val) => ((e)=>{
self[e.keyCode] = val;
e.preventDefault && e.preventDefault();
return self;
})();
-const Player = (()=>{
- const self = START_POS;
-
+const Player = ((self = START_POS)=>{
const rotate = (angle)=>(self.direction = (self.direction + angle + TAU) % TAU);
const walk = (distance)=>{
return self;
})();
-const Map = (()=>{
- let grid = new Uint8Array(MAP_SIZE * MAP_SIZE);
+const Map = ((grid = new Uint8Array(MAP_SIZE ** 2))=>{
return {
get: (x, y)=>(grid[Math.floor(y) * MAP_SIZE + Math.floor(x)] || -1),
randomize: ()=>(grid = grid.map((i) => (Math.random() < 0.3 ? 1 : 0))),
};
})();
-const Camera = (()=>{
- const self = {};
- let columns = [], ceiling = null, floor = null;
-
+const Camera = ((self = {}, columns = [], ceiling = null, floor = null)=>{
const resizeView = ()=>{
if (self.width != window.innerWidth || self.height != window.innerHeight) {
self.width = display.width = Math.floor(window.innerWidth * VIEW_SCALER);
};
self.render = ()=>{
+ resizeView();
Canvas.save();
const data = {};
- resizeView();
Canvas.fillStyle = ceiling;
Canvas.fillRect(0, 0, self.width, self.height/2);
projects / proto / jstoys.git / commitdiff