meatheadzHEAD master

author: Jules <jules@asdf.us> 2016-11-10 15:34:53 -0500
committer: Jules <jules@asdf.us> 2016-11-10 15:34:53 -0500
commit: dc06cab69f9e871aa8f7f519c964cf632d2217ea (patch)
tree: 1c9344a58185c55f90c9b0db7f87c478e5d9a947 /geometry2.html
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>
+
author	Jules <jules@asdf.us>	2016-11-10 15:34:53 -0500
committer	Jules <jules@asdf.us>	2016-11-10 15:34:53 -0500
commit	dc06cab69f9e871aa8f7f519c964cf632d2217ea (patch)
tree	1c9344a58185c55f90c9b0db7f87c478e5d9a947 /geometry2.html