summaryrefslogtreecommitdiff
path: root/geometry2.html
diff options
context:
space:
mode:
Diffstat (limited to 'geometry2.html')
-rwxr-xr-xgeometry2.html671
1 files changed, 671 insertions, 0 deletions
diff --git a/geometry2.html b/geometry2.html
new file mode 100755
index 0000000..15927c0
--- /dev/null
+++ b/geometry2.html
@@ -0,0 +1,671 @@
+<!doctype html>
+<html>
+<head><title>GEOMETRY</title></head>
+<style type="text/css">
+*
+ {
+ // border: 1px solid red;
+ }
+body
+ {
+ background-color: #87CEEB;
+ overflow: hidden;
+ }
+#frustrum
+ {
+ z-index: 666;
+ }
+#player
+ {
+ z-index: 980;
+ background-color: #0f0;
+ }
+#grid
+ {
+ display: none;
+ z-index: 950;
+ }
+#water
+ {
+ z-index: 800;
+ background-color: #6666cc;
+ }
+#seafloor
+ {
+ z-index: 810;
+ background-color: #8380ab;
+ }
+#background
+ {
+ position: fixed;
+ overflow: visible;
+ z-index: 900;
+ }
+#foreground
+ {
+ overflow: visible;
+ z-index: 999;
+ }
+#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;
+ }
+.flip
+ {
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+ }
+</style>
+
+<body>
+</body>
+
+<script type="text/javascript" src="/js/jquery.js"></script>
+<script type="text/javascript" src="jquery.gamequery-0.5.1.js"></script>
+<script type="text/javascript">
+var SCREEN_WIDTH = $(window).width()
+var SCREEN_HEIGHT = $(window).height()
+var REFRESH_RATE = 30
+var ISLAND_HEIGHT = 576
+var WATER_OFFSET = 458
+var SKY_OFFSET = SCREEN_HEIGHT - ISLAND_HEIGHT
+var FLOOR_OFFSET = SKY_OFFSET + WATER_OFFSET
+var SEAFLOOR_DEPTH = 600
+
+var FALL_THRESHOLD = 10
+
+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,
+ msg: "",
+ 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",
+ "SCREEN", SCREEN_WIDTH, SCREEN_HEIGHT, SKY_OFFSET, "\n",
+ HUD.msg,
+ ].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"),
+ background: document.createElement("div"),
+ foreground: document.createElement("div"),
+ water: document.createElement("div"),
+ seafloor: document.createElement("div"),
+ x: 0,
+ y: 0,
+ width: 2024+1224,
+ height: 3000,
+ surfaces: [],
+ ground: [
+ [0,-90],
+ [700,-90],
+ [1000,-70],
+ [1200,0],
+ [1210,SEAFLOOR_DEPTH],
+ [1980,SEAFLOOR_DEPTH],
+ [2080,0],
+ [2090,-90],
+ [2800,-90],
+ [2024+1224,-90],
+ ],
+ recalculate_surfaces: function ()
+ {
+ var calc = []
+ for (var i = 1; i < Canvas.ground.length; i++)
+ {
+ var two = Canvas.ground[i]
+ var one = Canvas.ground[i-1]
+ // console.log(one,two)
+ calc.push([one[0], one[1]+FLOOR_OFFSET, two[0], two[1]+FLOOR_OFFSET])
+ }
+ for (var i = 0; i < Canvas.surfaces.length; i++)
+ {
+ var s = Canvas.surfaces[i]
+ calc.push([s[0], s[1]+FLOOR_OFFSET, s[2], s[3]+FLOOR_OFFSET])
+ }
+ Canvas.surfaces = calc
+ },
+ background_elements:
+ [
+ // x, y, width, height, image
+ [0, 0, 1224, 576, "landscape/island1bg.png"],
+ [0, 576, 1224, 1000, "#8380ab"],
+ [2024, 576, 1224, 1000, "#8380ab"],
+ [1224, WATER_OFFSET + SEAFLOOR_DEPTH - 152, 200, 152, "landscape/underwaterislandcorner.png",],
+ [1824, WATER_OFFSET + SEAFLOOR_DEPTH - 152, 200, 152, "landscape/underwaterislandcorner.png", "flip"],
+ [2024, 0, 1224, 576, "landscape/island1bg.png", "flip"],
+ ],
+ foreground_elements:
+ [
+ // x, y, width, height, image
+ [0, -34, 1224, 576, "landscape/island1fg.png"],
+ ],
+ init: function ()
+ {
+ Canvas.background.style.position = "fixed"
+ Canvas.background.style.top = 0 + "px"
+ Canvas.background.style.left = 0 + "px"
+ Canvas.background.style.width = Canvas.width + "px"
+ Canvas.background.style.height = Canvas.height + "px"
+ Canvas.background.setAttribute("id", "background")
+ document.body.appendChild(Canvas.background)
+
+ Canvas.foreground.style.position = "fixed"
+ Canvas.foreground.style.top = 0 + "px"
+ Canvas.foreground.style.left = 0 + "px"
+ Canvas.foreground.style.width = Canvas.width + "px"
+ Canvas.foreground.style.height = Canvas.height + "px"
+ Canvas.foreground.setAttribute("id", "foreground")
+ document.body.appendChild(Canvas.foreground)
+
+ Canvas.water.style.position = "fixed"
+ Canvas.water.style.top = SKY_OFFSET + WATER_OFFSET + "px"
+ Canvas.water.style.left = 0 + "px"
+ Canvas.water.style.width = Canvas.width + "px"
+ Canvas.water.style.height = Canvas.height + "px"
+ Canvas.water.setAttribute("id", "water")
+ document.body.appendChild(Canvas.water)
+
+ Canvas.seafloor.style.position = "fixed"
+ Canvas.seafloor.style.top = SKY_OFFSET + SEAFLOOR_DEPTH + "px"
+ Canvas.seafloor.style.left = 0 + "px"
+ Canvas.seafloor.style.width = Canvas.width + "px"
+ Canvas.seafloor.style.height = Canvas.height + "px"
+ Canvas.seafloor.setAttribute("id", "seafloor")
+ document.body.appendChild(Canvas.seafloor)
+
+ ctx = Canvas.div.getContext("2d"),
+ Canvas.div.style.position = "fixed"
+ Canvas.div.style.top = 0
+ Canvas.div.style.left = 0
+ Canvas.div.setAttribute("width", Canvas.width+"px")
+ Canvas.div.setAttribute("height", Canvas.height+"px")
+ Canvas.div.setAttribute("id", "grid")
+ 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 = "rgba(255,255,255,0.2)"
+ ctx.stroke()
+
+ ctx.beginPath()
+ ctx.moveTo(0, SKY_OFFSET+0.5)
+ ctx.lineTo(Canvas.width+0.5, SKY_OFFSET+0.5)
+ ctx.strokeStyle = "rgba(255,255,0,1)"
+ ctx.stroke()
+
+ ctx.beginPath()
+ ctx.moveTo(0, FLOOR_OFFSET+0.5)
+ ctx.lineTo(Canvas.width+0.5, FLOOR_OFFSET+0.5)
+ ctx.strokeStyle = "rgba(255,255,0,1)"
+ 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)
+ */
+
+ Canvas.recalculate_surfaces ()
+ 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.background_elements.length; i++)
+ {
+ Frustrum.furniture.push (new Furniture (Canvas.background, Canvas.background_elements[i]))
+ }
+ for (var i = 0; i < Canvas.foreground_elements.length; i++)
+ {
+ Frustrum.furniture.push (new Furniture (Canvas.foreground, Canvas.foreground_elements[i]))
+ }
+ },
+ }
+function Furniture (container, row)
+ {
+ var div = document.createElement("div")
+ div.style.position = "fixed"
+ div.style.left = row[0] + "px"
+ div.style.top = SKY_OFFSET + row[1] + "px"
+ div.style.width = row[2] + "px"
+ div.style.height = row[3] + "px"
+ if (row[4].substr(0,1) === "#")
+ div.style.background = row[4]
+ else
+ div.style.background = "url('" + row[4] + "')"
+ if (row.length === 6)
+ div.className = row[5]
+ container.appendChild(div)
+
+ // this.container = container
+ this.elem = div
+ this.x = row[0]
+ this.y = row[1]
+ this.width = row[2]
+ this.height = row[3]
+ this.background = row[4]
+ this.update = function ()
+ {
+ this.elem.style.top = SKY_OFFSET + 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: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ 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"
+
+ Canvas.water.style.top = SKY_OFFSET + WATER_OFFSET + Canvas.y - Frustrum.y + "px"
+ Canvas.seafloor.style.top = SKY_OFFSET + WATER_OFFSET + SEAFLOOR_DEPTH + Canvas.y - Frustrum.y + "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: 5,
+ dx_walk: 50,
+ dx_swim: 50,
+ dy_swim_up: -20,
+ dy_swim_down: 20,
+ dy_resistance: 15,
+ dx_resistance: 15,
+ air_resistance: 15,
+ water_resistance: 8,
+ water_level: SKY_OFFSET + WATER_OFFSET,
+ jump_power: -45,
+ }
+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: 0,
+ y: 0,
+ width: 100,
+ height: 167,
+ yIntercept: 0,
+ surface: [0,0,0,0],
+ surface_left: [0,0,0,0],
+ surface_right: [0,0,0,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])
+ {
+ Player.slope = 0
+ Player.yIntercept = s[1]
+ 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.slope = slope
+ Player.yIntercept = (Player.x - s[0]) * slope + s[1]
+
+ if (feet < Player.yIntercept - 1)
+ 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"
+ if (Player.underwater)
+ Player.dy = Math.min(Player.dy + Physics.gravity, Physics.dy_resistance)
+ else
+ Player.dy = Player.dy + Physics.gravity
+ if (Player.y + Player.dy + Player.height > Player.yIntercept)
+ {
+ Player.y = Player.yIntercept - Player.height
+ Player.dy = 0
+ Player.surfaceState = ON_SURFACE
+ }
+ break
+ case ON_SURFACE:
+ HUD.surface = "ON SURFACE"
+ Player.dy = 0
+ Player.y = Player.yIntercept - Player.height
+ Player.jumping = false
+ HUD.msg = [Player.y, Player.yIntercept, Player.height, "...", Player.surface]
+ // clearInterval(Events.interval)
+ // Tests.random_x()
+ break
+ case BELOW_SURFACE:
+ HUD.surface = "BELOW SURFACE"
+ Player.dy = 0
+ Player.y = Player.yIntercept - Player.height
+ Player.surfaceState = ON_SURFACE
+ break
+ case BEYOND_SURFACE:
+ HUD.surface = "BEYOND SURFACE"
+ 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])
+ {
+ Player.dx = Physics.dx_walk * Player.orientation
+ }
+ else if (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, 10, Canvas.width-Player.width - 20)
+ },
+ init: function ()
+ {
+ Player.x = 200
+ Player.y = SKY_OFFSET + FLOOR_OFFSET - 350 - Player.height
+ 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 =
+ {
+ interval: false,
+ 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
+ case 71: // "G"
+ $("#grid").toggle()
+ 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)
+ Events.interval = setInterval(Events.loop, REFRESH_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 07:13:57 +0000