summaryrefslogtreecommitdiff
path: root/geometry.html
diff options
context:
space:
mode:
Diffstat (limited to 'geometry.html')
-rwxr-xr-xgeometry.html502
1 files changed, 502 insertions, 0 deletions
diff --git a/geometry.html b/geometry.html
new file mode 100755
index 0000000..e496483
--- /dev/null
+++ b/geometry.html
@@ -0,0 +1,502 @@
+<!doctype html>
+<html>
+<head><title>GEOMETRY</title></head>
+<style type="text/css">
+body
+ {
+ background-color: #000;
+ overflow: hidden;
+ }
+#frustrum
+ {
+ z-index: 666;
+ border: 1px solid red;
+ }
+#player
+ {
+ z-index: 999;
+ background-color: #0f0;
+ }
+#hud
+ {
+ font-size: 14px;
+ font-family: monospace;
+ background-color: #333;
+ z-index: 1000;
+ color: #fff;
+ opacity: 0.7;
+ white-space: pre;
+ }
+#tests
+ {
+ position: fixed;
+ right: 400px;
+ z-index: 1001;
+ }
+</style>
+
+<body>
+<!--
+<div id="tests">
+<button id="random_x">RANDOM X</button>
+</div>
+-->
+</body>
+
+<script type="text/javascript" src="/js/jquery.js"></script>
+<script type="text/javascript">
+var FRAME_RATE = 30
+
+var ABOVE_SURFACE = 3
+var ON_SURFACE = 2
+var LANDING_ON_SURFACE = 1
+var BELOW_SURFACE = 0
+var BEYOND_SURFACE = -1
+var OFF_MAP = -2
+
+var ORIENTATION_RIGHT = 1
+var ORIENTATION_LEFT = -1
+
+var KEY_LEFT = 37
+var KEY_UP = 38
+var KEY_RIGHT = 39
+var KEY_DOWN = 40
+var KEYTRACK = {}
+KEYTRACK[KEY_LEFT] = false
+KEYTRACK[KEY_UP] = false
+KEYTRACK[KEY_RIGHT] = false
+KEYTRACK[KEY_DOWN] = false
+
+function clamp (x, min, max)
+ {
+ return Math.max(min, Math.min(x, max))
+ }
+var HUD =
+ {
+ div: document.createElement("div"),
+ surface: false,
+ update: function ()
+ {
+ var activity = Player.running ? "RUNNING" : ""
+ activity += Player.jumping ? " JUMPING" : ""
+ activity += Player.cannonball ? " CANNONBALL" : ""
+ activity += Player.underwater ? " UNDERWATER" : ""
+ var orientation = Player.orientation === ORIENTATION_RIGHT ? "RIGHT" : "LEFT"
+ HUD.div.innerHTML =
+ [
+ "",
+ "PLAYER", Player.x, Player.y, activity, orientation, "\n",
+ "SPEED ", Player.dx, Player.dy, HUD.surface, "\n",
+ "CANVAS", Canvas.x, Canvas.y, "\n",
+ "KEY_UP", KEYTRACK[KEY_UP], "\n",
+ "KEY_DOWN", KEYTRACK[KEY_DOWN], "\n",
+ "KEY_LEFT", KEYTRACK[KEY_LEFT], "\n",
+ "KEY_RIGHT", KEYTRACK[KEY_RIGHT], "\n",
+ ].join(" ")
+ },
+ init: function ()
+ {
+ HUD.div.style.position = "fixed"
+ HUD.div.style.top = 0
+ HUD.div.style.right = 0
+ HUD.div.style.width = 300 + "px"
+ HUD.div.style.height = 300 + "px"
+ HUD.div.setAttribute("id", "hud")
+ document.body.appendChild(HUD.div)
+ },
+ }
+var Canvas =
+ {
+ div: document.createElement("canvas"),
+ x: 0,
+ y: 0,
+ width: 500,
+ height: 320,
+ surfaces:
+ [
+ [0,50, 90,95],
+ [90,95, 110,110],
+ [110,110, 200,300],
+ [200,300, 220,300],
+ [220,300, 300,200],
+ [300,200, 400,95],
+ [400,95, 500,80],
+ ],
+ furniture:
+ [
+ [30,50],
+ [75,120],
+ [200,200],
+ [350,110],
+ [450,87],
+ ],
+ init: function ()
+ {
+ ctx = Canvas.div.getContext("2d"),
+ Canvas.div.style.position = "fixed"
+ Canvas.div.style.top = 0
+ Canvas.div.style.left = 0
+ Canvas.div.setAttribute("width", 4000+"px")
+ Canvas.div.setAttribute("height", 800+"px")
+ document.body.appendChild(Canvas.div)
+ ctx.beginPath()
+ for (var x = 0.5; x < Canvas.width; x += 10)
+ {
+ ctx.moveTo(x, 0)
+ ctx.lineTo(x, Canvas.height)
+ }
+ for (var y = 0.5; y < Canvas.height; y += 10)
+ {
+ ctx.moveTo(0, y)
+ ctx.lineTo(Canvas.width, y)
+ }
+ ctx.strokeStyle = "#333"
+ ctx.stroke()
+ ctx.fillStyle = "rgba(0,20,255,0.5)"
+ ctx.fillRect(0, Physics.water_level+0.5, Canvas.width, Canvas.height - Physics.water_level)
+ for (var i = 0; i < Canvas.surfaces.length; i++)
+ {
+ var surface = Canvas.surfaces[i]
+ ctx.beginPath()
+ ctx.moveTo(surface[0] + 0.5, surface[1] + 0.5)
+ ctx.lineTo(surface[2] + 0.5, surface[3] + 0.5)
+ ctx.strokeStyle = "#0bf"
+ ctx.stroke()
+ }
+ for (var i = 0; i < Canvas.furniture.length; i++)
+ {
+ console.log(Canvas.furniture[i])
+ var div = document.createElement("div")
+ div.style.position = "fixed"
+ div.style.top = Canvas.furniture[i][1] + "px"
+ div.style.left = Canvas.furniture[i][0] + "px"
+ div.style.background = "yellow"
+ div.style.width = 2 + "px"
+ div.style.height = 2 + "px"
+ div.style.zIndex = 333
+ document.body.appendChild(div)
+ Frustrum.furniture.push (new furniture (div, Canvas.furniture[i][0],Canvas.furniture[i][1]))
+ }
+ },
+ }
+function furniture (div, x, y)
+ {
+ // this.id = div
+ this.elem = div
+ this.x = x
+ this.y = y
+ this.update = function ()
+ {
+ this.elem.style.top = this.y - Frustrum.y + "px"
+ this.elem.style.left = this.x - Frustrum.x + "px"
+ }
+ }
+var Frustrum =
+ {
+ div: document.createElement("div"),
+ x: 0,
+ y: 0,
+ width: 200,
+ height: 150,
+ halfwidth: 0,
+ halfheight: 0,
+ furniture: [],
+ redraw: function ()
+ {
+ Canvas.div.style.top = Canvas.y - Frustrum.y + "px"
+ Canvas.div.style.left = Canvas.x - Frustrum.x + "px"
+
+ Player.div.style.top = Player.y - Frustrum.y + "px"
+ Player.div.style.left = Player.x - Frustrum.x + "px"
+
+ for (var i = 0; i < Frustrum.furniture.length; i++)
+ Frustrum.furniture[i].update()
+ },
+ update: function ()
+ {
+ if (Player.underwater)
+ {
+ Frustrum.dest_y = Player.y - Frustrum.halfheight + Player.height
+ Frustrum.dest_x = Player.x - Frustrum.halfwidth + Player.width
+ if (Player.y > Canvas.height - Frustrum.halfheight)
+ Frustrum.dest_y = Canvas.height - Frustrum.height
+ }
+ else
+ {
+ Frustrum.dest_x = 0
+ Frustrum.dest_y = 0
+ }
+ if (Player.x > Canvas.width - Frustrum.halfwidth)
+ Frustrum.dest_x = Canvas.width - Frustrum.width
+ else if (Player.x > Frustrum.halfwidth)
+ Frustrum.dest_x = Player.x - Frustrum.halfwidth
+ Frustrum.y = Math.floor( (Frustrum.dest_y + Frustrum.y * 9) / 10 )
+ Frustrum.x = Math.floor( (Frustrum.dest_x + Frustrum.x * 9) / 10 )
+ // Frustrum.div.style.top = Frustrum.y + "px"
+ // Frustrum.div.style.left = Frustrum.x + "px"
+ },
+ init: function ()
+ {
+ Frustrum.div.style.position = "fixed"
+ Frustrum.div.style.top = 0
+ Frustrum.div.style.left = 0
+ Frustrum.div.style.width = Frustrum.width + "px"
+ Frustrum.div.style.height = Frustrum.height + "px"
+ Frustrum.div.setAttribute("id", "frustrum")
+ document.body.appendChild(Frustrum.div)
+ Frustrum.halfwidth = Frustrum.width/2
+ Frustrum.halfheight = Frustrum.height/2
+ },
+ }
+var Physics =
+ {
+ gravity: 1,
+ dx_walk: 2,
+ dx_swim: 2,
+ dy_swim_up: -2,
+ dy_swim_down: 2,
+ dy_resistance: 5,
+ dx_resistance: 5,
+ air_resistance: 5,
+ water_resistance: 2,
+ water_level: 100,
+ jump_power: -5,
+ }
+var Player =
+ {
+ div: document.createElement("div"),
+ running: false,
+ jumping: false,
+ start_jump: false,
+ swimming: false,
+ cannonball: false,
+ orientation: ORIENTATION_RIGHT,
+ dx: 0,
+ dy: 0,
+ x: 50,
+ y: 5,
+ width: 2,
+ height: 4,
+ yIntercept: 0,
+ surface: Canvas.surfaces[0],
+ findNearestSurface: function (feet)
+ {
+ for (var i = 0; i < Canvas.surfaces.length; i++)
+ {
+ var s = Canvas.surfaces[i]
+ if (Player.onSurface(feet, s) > BELOW_SURFACE)
+ {
+ return s
+ }
+ }
+ return OFF_MAP
+ },
+ onSurface: function (feet, s)
+ {
+ if (s === OFF_MAP)
+ return OFF_MAP
+
+ // within bounds
+ if (Player.x < s[0] || Player.x > s[2])
+ return BEYOND_SURFACE
+
+ // above the line
+ if (s[1] === s[3])
+ {
+ if (feet < s[1])
+ return ABOVE_SURFACE
+ if (feet <= s[1] + Player.dy + Physics.gravity + Player.height)
+ return ON_SURFACE
+ // if (! Player.surface)
+ // return ON_SURFACE
+ return ON_SURFACE
+ // return BELOW_SURFACE
+ }
+ var slope = (s[3] - s[1]) / (s[2] - s[0])
+ Player.yIntercept = (Player.x - s[0]) * slope + s[1]
+ // console.log(Player.yIntercept, Player.y)
+ if (feet < Player.yIntercept)
+ return ABOVE_SURFACE
+ if (feet <= Player.yIntercept + Player.dy + Physics.gravity + Player.height)
+ return ON_SURFACE
+ if (Player.surfaceState === ON_SURFACE)
+ return ON_SURFACE
+ // if (! Player.surface)
+ // return ON_SURFACE
+ return ON_SURFACE
+ // return BELOW_SURFACE
+ },
+ underwater: false,
+ update: function ()
+ {
+ var feet = Player.y + Player.height
+ Player.feet = feet
+ Player.surfaceState = Player.onSurface(feet, Player.surface)
+ switch (Player.surfaceState)
+ {
+ case ABOVE_SURFACE:
+ HUD.surface = "ABOVE SURFACE"
+ Player.yIntercept = Player.surface[1]
+ Player.dy = Math.min(Player.dy + Physics.gravity, Physics.dy_resistance)
+ break
+ case ON_SURFACE:
+ HUD.surface = "ON SURFACE"
+ Player.dy = 0
+ Player.y = Player.yIntercept - Player.height
+ Player.jumping = false
+ // Tests.random_x()
+ break
+ case BELOW_SURFACE:
+ HUD.surface = "BELOW SURFACE"
+ break
+ case BEYOND_SURFACE:
+ HUD.surface = "BEYOND SURFACE"
+ // Player.surface = false
+ Player.surface = Player.findNearestSurface(feet)
+ Player.update()
+ break
+ case OFF_MAP:
+ HUD.surface = "OFF MAP"
+ break
+ }
+ // Player.div.style.left = Player.x + "px"
+ // Player.div.style.top = Player.y + "px"
+ if (Player.underwater)
+ {
+ if (Player.y > Physics.water_level - 2 && Player.y < Physics.water_level + 2)
+ Player.dy = 0
+ else if (Player.y < Physics.water_level)
+ {
+ Player.underwater = false
+ Player.cannonball = false
+ Physics.dx_resistance = Physics.air_resistance
+ Physics.dy_resistance = Physics.air_resistance
+ }
+ if (KEYTRACK[KEY_UP])
+ Player.dy = Physics.dy_swim_up
+ if (KEYTRACK[KEY_DOWN])
+ Player.dy = Physics.dy_swim_down
+ if (KEYTRACK[KEY_LEFT] || KEYTRACK[KEY_RIGHT])
+ Player.dx = Physics.dx_swim * Player.orientation
+ else
+ Player.dx = 0
+ }
+ else
+ {
+ if (Player.y > Physics.water_level)
+ {
+ Player.jumping = false
+ Player.cannonball = false
+ Player.underwater = true
+ Player.yJump = Physics.water_level
+ Physics.dx_resistance = Physics.water_resistance
+ Physics.dy_resistance = Physics.water_resistance
+ }
+ else if (Player.yJump < Physics.water_level && Player.yIntercept > Physics.water_level)
+ Player.cannonball = true
+ else
+ Player.cannonball = false
+ if ((Player.start_jump || KEYTRACK[KEY_UP]) && Player.surfaceState === ON_SURFACE)
+ {
+ Player.start_jump = false
+ Player.jumping = true
+ Player.yJump = Player.y
+ Player.dy = Physics.jump_power
+ Player.y += Player.dy
+ Player.surfaceState = ABOVE_SURFACE
+ }
+ if (KEYTRACK[KEY_LEFT] || KEYTRACK[KEY_RIGHT])
+ Player.dx = Physics.dx_walk * Player.orientation
+ else
+ Player.dx = 0
+ }
+ Player.y += Player.dy
+ Player.x = clamp (Player.x + Player.dx, 0, Canvas.width)
+ },
+ init: function ()
+ {
+ Player.div.style.position = "fixed"
+ Player.div.style.top = Player.y + "px"
+ Player.div.style.left = Player.x + "px"
+ Player.div.style.width = Player.width + "px"
+ Player.div.style.height = Player.height + "px"
+ Player.div.setAttribute("id", "player")
+ document.body.appendChild(Player.div)
+ },
+ }
+var Events =
+ {
+ keydown: function (e)
+ {
+ KEYTRACK[e.keyCode] = true
+ switch (e.keyCode)
+ {
+ case KEY_UP:
+ if (Player.underwater || Player.jumping)
+ break
+ Player.start_jump = true
+ break
+ case KEY_LEFT:
+ Player.orientation = ORIENTATION_LEFT
+ break
+ case KEY_RIGHT:
+ Player.orientation = ORIENTATION_RIGHT
+ break
+ }
+ },
+ keyup: function (e)
+ {
+ KEYTRACK[e.keyCode] = false
+ },
+ loop: function ()
+ {
+ Player.update()
+ Frustrum.update()
+ Frustrum.redraw()
+ HUD.update()
+ },
+ init: function ()
+ {
+ $(document).bind("keydown", Events.keydown)
+ $(document).bind("keyup", Events.keyup)
+ setInterval(Events.loop, FRAME_RATE)
+ },
+ }
+var Tests =
+ {
+ random_x: function ()
+ {
+ Player.x = Player.x+1 // Math.floor(Math.random () * 500)
+ if (Player.x > Canvas.width)
+ {
+ Player.x = 0
+ Player.y = 0
+ }
+ // Player.y = 50 // Math.floor(Math.random () * 50)
+ Player.surface = Canvas.surfaces[0]
+ //if (Math.random() > 0.3)
+ // {
+ // Player.dy = -5
+ // }
+ },
+ init: function ()
+ {
+ $("#random_x").click(Tests.random_x)
+ },
+ }
+var Main =
+ {
+ init: function ()
+ {
+ Tests.init()
+ Canvas.init()
+ Player.init()
+ Frustrum.init()
+ HUD.init()
+ Events.init()
+ },
+ }
+Main.init ()
+</script>
+</html>
+
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 14:27:55 +0000