<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/strict.dtd">
\n<HTML>
\n<HEAD>
\n<TITLE>Canvascape – 3D walker<\/TITLE>
\n<!–
\nThis game is copyright by Benjamin Joffe.
\nYou may not reproduce or modify this without
\nwritten permission by the origional author.
\nEmail him: CanvasGame@gmail.com for suggestions.
\n–>
\n<SCRIPT type="text\/javascript" >
\nfunction G_VmlCanvasManager() {
\nthis.init();
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvasManager.prototype = {
\ninit: function (opt_doc) {
\nvar doc = opt_doc || document;
\nif (\/MSIE\/.test(navigator.userAgent) && !window.opera) {
\nvar self = this;
\ndoc.attachEvent("onreadystatechange", function () {
\nself.init_(doc);
\n});
\n}
\n},<\/p>\n
\n <\/p>\n
init_: function (doc, e) {
\nif (doc.readyState == "complete") {
\n\/\/ create xmlns
\nif (!doc.namespaces["g_vml_"]) {
\ndoc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml");
\n}<\/p>\n
\n <\/p>\n
\/\/ setup default css
\nvar ss = doc.createStyleSheet();
\nss.cssText = "canvas{display:inline-block; overflow:hidden; text-align:left;}" +
\n"canvas *{behavior:url(#default#VML)}";<\/p>\n
\n <\/p>\n
\/\/ find all canvas elements
\nvar els = doc.getElementsByTagName("canvas");
\nfor (var i = 0; i < els.length; i++) {
\nif (!els[i].getContext) {
\nthis.initElement(els[i]);
\n}
\n}
\n}
\n},<\/p>\n
\n <\/p>\n
fixElement_: function (el) {
\n\/\/ in IE before version 5.5 we would need to add HTML: to the tag name
\n\/\/ but we do not care about IE before version 6
\nvar outerHTML = el.outerHTML;
\nvar newEl = document.createElement(outerHTML);
\n\/\/ if the tag is still open IE has created the children as siblings and
\n\/\/ it has also created a tag with the name "\/FOO"
\nif (outerHTML.slice(-2) != "\/>") {
\nvar tagName = "\/" + el.tagName;
\nvar ns;
\n\/\/ remove content
\nwhile ((ns = el.nextSibling) && ns.tagName != tagName) {
\nns.removeNode();
\n}
\n\/\/ remove the incorrect closing tag
\nif (ns) {
\nns.removeNode();
\n}
\n}
\nel.parentNode.replaceChild(newEl, el);
\nreturn newEl;
\n},<\/p>\n
\n <\/p>\n
initElement: function (el) {
\nel = this.fixElement_(el);
\nel.getContext = function () {
\nif (this._context) {
\nreturn this._context;
\n}
\nreturn this._context = new G_VmlCanvas(this);
\n};<\/p>\n
\n <\/p>\n
var self = this; \/\/bind
\nel.attachEvent("onpropertychange", function (e) {
\n\/\/ we need to watch changes to width and height
\nswitch (e.propertyName) {
\ncase "width":
\ncase "height":
\n\/\/ coord size changed?
\nbreak;
\n}
\n});<\/p>\n
\n <\/p>\n
\/\/ if style.height is set<\/p>\n
\n <\/p>\n
var attrs = el.attributes;
\nif (attrs.width && attrs.width.specified) {
\n\/\/ TOD use runtimeStyle and coordsize
\n\/\/ el.getContext().setWidth_(attrs.width.nodeValue);
\nel.style.width = attrs.width.nodeValue + "px";
\n}
\nif (attrs.height && attrs.height.specified) {
\n\/\/ TOD use runtimeStyle and coordsize
\n\/\/ el.getContext().setHeight_(attrs.height.nodeValue);
\nel.style.height = attrs.height.nodeValue + "px";
\n}
\n\/\/el.getContext().setCoordsize_()
\n}
\n};<\/p>\n
\n <\/p>\n
var G_vmlCanvasManager = new G_VmlCanvasManager;<\/p>\n
\n <\/p>\n
\nfunction G_VmlCanvas(surface) {
\nthis.m = G_VmlCanvas.MatrixIdentity();
\nthis.element = surface;<\/p>\n
\n <\/p>\n
this.mStack = [];
\nthis.aStack = [];
\nthis.currentPath = [];<\/p>\n
\n <\/p>\n
\/\/ Canvas context properties
\nthis.strokeStyle = "#000";
\nthis.fillStyle = "#ccc";<\/p>\n
\n <\/p>\n
this.lineWidth = 1;
\nthis.lineJoin = ‘miter’;
\nthis.lineCap = ‘butt’;
\nthis.miterLimit = 10.0;
\nthis.globalAlpha = 1.0;
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.dec2hex = [];
\n(function () {
\nfor (var i = 0; i < 16; i++) {
\nfor (var j = 0; j < 16; j++) {
\nG_VmlCanvas.dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
\n}
\n}
\n})();<\/p>\n
\n <\/p>\n
G_VmlCanvas.MatrixIdentity = function() {
\nreturn [
\n[1,0,0],
\n[0,1,0],
\n[0,0,1]
\n];
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.MatrixMultiply = function(m1, m2) {
\nvar result = G_VmlCanvas.MatrixIdentity();<\/p>\n
\n <\/p>\n
for (var x = 0; x < 3; x++) {
\nfor (var y = 0; y < 3; y++) {
\nvar sum = 0;<\/p>\n
\n <\/p>\n
for (var z = 0; z < 3; z++) {
\nsum += m1[x][z] * m2[z][y];
\n}<\/p>\n
\n <\/p>\n
result[x][y] = sum;
\n}
\n}
\nreturn result;
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.CopyState = function(o1, o2) {
\no2.fillStyle = o1.fillStyle;
\no2.lineCap = o1.lineCap;
\no2.lineJoin = o1.lineJoin;
\no2.lineWidth = o1.lineWidth;
\no2.miterLimit = o1.miterLimit;
\no2.shadowBlur = o1.shadowBlur;
\no2.shadowColor = o1.shadowColor;
\no2.shadowOffsetX = o1.shadowOffsetX;
\no2.shadowOffsetY = o1.shadowOffsetY;
\no2.strokeStyle = o1.strokeStyle;
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.ProcessStyle = function(styleString) {
\nvar str, alpha = 1.0;<\/p>\n
\n <\/p>\n
styleString = String(styleString);
\nif (styleString.substring(0, 3) == "rgb") {
\nvar start = styleString.indexOf("(", 3);
\nvar end = styleString.indexOf(")", start + 1);
\nvar guts = styleString.substring(start + 1, end).split(",");<\/p>\n
\n <\/p>\n
str = "#";
\nfor (var i = 0; i < 3; i++) {
\nstr += G_VmlCanvas.dec2hex[parseInt(guts[i])];
\n}<\/p>\n
\n <\/p>\n
if ((guts.length == 4) && (styleString.substr(3, 1) == "a")) {
\nalpha = guts[3];
\n}
\n} else {
\nstr = styleString;
\n}<\/p>\n
\n <\/p>\n
return [str, alpha];
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.ProcessLineCap = function(lineCap) {
\nswitch (lineCap) {
\ncase ‘butt’: return ‘flat’;
\ncase ’round’: return ’round’;
\ncase ‘square’: return ‘square’;
\n}
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.clearRect = function() {
\nthis.element.innerHTML = "";
\nthis.currentPath = [];
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.beginPath = function() {
\n\/\/ TODO(glen): Branch current matrix so that save\/restore has no effect
\n\/\/ as per safari docs.<\/p>\n
\n <\/p>\n
this.currentPath = [];
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.moveTo = function(aX, aY) {
\nthis.currentPath.push({type: ‘moveTo’, x: aX, y:aY});
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.lineTo = function(aX, aY) {
\nthis.currentPath.push({type: ‘lineTo’, x: aX, y:aY});
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.bezierCurveTo = function(aCP1x, aCP1y, aCP2x, aCP2y, aX, aY) {
\nthis.currentPath.push({type: ‘bezierCurveTo’,
\ncp1x: aCP1x,
\ncp1y: aCP1y,
\ncp2x: aCP2x,
\ncp2y: aCP2y,
\nx: aX,
\ny: aY});
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
\n\/\/ VML’s qb produces different output to Firefox’s
\nthis.bezierCurveTo(aCPx, aCPy, aCPx, aCPy, aX, aY);
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.arc = function(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) {<\/p>\n
\n <\/p>\n
if (!aClockwise) {
\nvar t = aStartAngle;
\naStartAngle = aEndAngle;
\naEndAngle = t;
\n}<\/p>\n
\n <\/p>\n
var xStart = aX + (Math.cos(aStartAngle) * aRadius);
\nvar yStart = aY + (Math.sin(aStartAngle) * aRadius);<\/p>\n
\n <\/p>\n
var xEnd = aX + (Math.cos(aEndAngle) * aRadius);
\nvar yEnd = aY + (Math.sin(aEndAngle) * aRadius);<\/p>\n
\n <\/p>\n
this.currentPath.push({type: ‘arc’,
\nx: aX,
\ny: aY,
\nradius: aRadius,
\nxStart: xStart,
\nyStart: yStart,
\nxEnd: xEnd,
\nyEnd: yEnd});<\/p>\n
\n <\/p>\n
}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.strokeRect = function(aX, aY, aWidth, aHeight) {
\n\/\/ Will destroy any existing path (same as FF behaviour)
\nthis.beginPath();
\nthis.moveTo(aX, aY);
\nthis.lineTo(aX + aWidth, aY);
\nthis.lineTo(aX + aWidth, aY + aHeight);
\nthis.lineTo(aX, aY + aHeight);
\nthis.closePath();
\nthis.stroke();
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.fillRect = function(aX, aY, aWidth, aHeight) {
\n\/\/ Will destroy any existing path (same as FF behaviour)
\nthis.beginPath();
\nthis.moveTo(aX, aY);
\nthis.lineTo(aX + aWidth, aY);
\nthis.lineTo(aX + aWidth, aY + aHeight);
\nthis.lineTo(aX, aY + aHeight);
\nthis.closePath();
\nthis.fill();
\n}<\/p>\n
\n <\/p>\n
\/\/ Gradient \/ Pattern Stubs
\nfunction G_VmlGradient(aType) {
\nthis.type = aType;
\nthis.radius1 = 0;
\nthis.radius2 = 0;
\nthis.colors = [];
\nthis.focus = {x: 0, y:0};
\n}<\/p>\n
\n <\/p>\n
G_VmlGradient.prototype.addColorStop = function(aOffset, aColor) {
\naColor = G_VmlCanvas.ProcessStyle(aColor);
\nthis.colors.push({offset: 1-aOffset, color: aColor});
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
\nvar gradient = new G_VmlGradient("gradient");
\nreturn gradient;
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.createRadialGradient = function(aX0, aY0, aR0, aX1, aY1, aR1) {
\nvar gradient = new G_VmlGradient("gradientradial");
\ngradient.radius1 = aR0;
\ngradient.radius2 = aR1;
\ngradient.focus.x = aX0;
\ngradient.focus.y = aY0;
\nreturn gradient;
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.drawImage = function (image, var_args) {
\nvar dx, dy, dw, dh, sx, sy, sw, sh;
\nvar w = image.width;
\nvar h = image.height;<\/p>\n
\n <\/p>\n
if (arguments.length == 3) {
\ndx = arguments[1];
\ndy = arguments[2];
\nsx = sy = 0;
\nsw = dw = w;
\nsh = dh = h;
\n} else if (arguments.length == 5) {
\ndx = arguments[1];
\ndy = arguments[2];
\ndw = arguments[3];
\ndh = arguments[4];
\nsx = sy = 0;
\nsw = w;
\nsh = h;
\n} else if (arguments.length == 9) {
\nsx = arguments[1];
\nsy = arguments[2];
\nsw = arguments[3];
\nsh = arguments[4];
\ndx = arguments[5];
\ndy = arguments[6];
\ndw = arguments[7];
\ndh = arguments[8];
\n} else {
\nthrow "Invalid number of arguments";
\n}<\/p>\n
\n <\/p>\n
var d = this.Coords(dx, dy);<\/p>\n
\n <\/p>\n
var w2 = (sw \/ 2);
\nvar h2 = (sh \/ 2);<\/p>\n
\n <\/p>\n
var vmlStr = [];<\/p>\n
\n <\/p>\n
\/\/ For some reason that I’ve now forgotten, using divs didn’t work
\nvmlStr.push(‘ <g_vml_:group’,
\n‘ coordsize="100,100"’,
\n‘ coordorigin="0, 0"’ ,
\n‘ style="width:100px; height:100px; position:absolute; ‘);<\/p>\n
\n <\/p>\n
\/\/ If filters are necessary (rotation exists), create them
\n\/\/ filters are bog-slow, so only create them if abbsolutely necessary
\n\/\/ The following check doesn’t account for skews (which don’t exist
\n\/\/ in the canvas spec (yet) anyway.<\/p>\n
\n <\/p>\n
if (this.m[0][0] != 1 || this.m[0][1]) {
\nvar filter = [];<\/p>\n
\n <\/p>\n
\/\/ Note the 12\/21 reversal
\nfilter.push("M11=’",this.m[0][0],"’,",
\n"M12=’",this.m[1][0],"’,",
\n"M21=’",this.m[0][1],"’,",
\n"M22=’",this.m[1][1],"’,",
\n"Dx=’",d.x,"’,",
\n"Dy=’",d.y,"’");<\/p>\n
\n <\/p>\n
\/\/ Bounding box calculation (need to minimize displayed area so that filters
\n\/\/ don’t waste time on unused pixels.
\nvar max = d;
\nvar c2 = this.Coords(dx+dw, dy);
\nvar c3 = this.Coords(dx, dy+dh);
\nvar c4 = this.Coords(dx+dw, dy+dh);<\/p>\n
\n <\/p>\n
max.x = Math.max(max.x, c2.x, c3.x, c4.x);
\nmax.y = Math.max(max.y, c2.y, c3.y, c4.y);<\/p>\n
\n <\/p>\n
vmlStr.push(‘ padding:0px ‘, Math.floor(max.x), ‘px ‘, Math.floor(max.y),
\n‘px 0px;filter:progid:DXImageTransform.Microsoft.Matrix(‘,
\nfilter.join(""), ‘, sizingmethod=\\’clip\\’);’)
\n} else {
\nvmlStr.push(‘ top:’,d.y,’px; left:’,d.x,’px;’)
\n}<\/p>\n
\n <\/p>\n
vmlStr.push(‘ ">’ ,
\n‘<g_vml_:image src="’, image.src, ‘"’,
\n‘ style="width:’, dw, ‘;’,
\n‘ height:’, dh, ‘;"’,
\n‘ cropleft="’, sx \/ w, ‘"’,
\n‘ croptop="’, sy \/ h, ‘"’,
\n‘ cropright="’, (w – sx – sw) \/ w, ‘"’,
\n‘ cropbottom="’, (h – sy – sh) \/ h, ‘"’,
\n‘ \/>’,
\n‘ <\/g_vml_:group>’);<\/p>\n
\n <\/p>\n
\/\/this.element.innerHTML += vmlStr.join("");
\nthis.element.insertAdjacentHTML("BeforeEnd",
\nvmlStr.join(""));
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.stroke = function(aFill) {
\nvar strokeColor, fillColor, opacity;
\nvar lineStr = [];
\nvar lineOpen = false;<\/p>\n
\n <\/p>\n
if (aFill) {
\nvar a = G_VmlCanvas.ProcessStyle(this.fillStyle);
\nfillColor = a[0];
\nopacity = a[1] * this.globalAlpha;
\n} else {
\nvar a = G_VmlCanvas.ProcessStyle(this.strokeStyle);
\nstrokeColor = a[0];
\nopacity = a[1] * this.globalAlpha;
\n}<\/p>\n
\n <\/p>\n
lineStr.push(‘<g_vml_:shape’,
\n‘ fillcolor="’, fillColor, ‘"’,
\n‘ filled="’,(aFill) ? "true" : "false",’"’,
\n‘ style="position:absolute; width:10; height:10;"’,
\n‘ coordorigin="0 0" coordsize="10 10"’,
\n‘ stroked="’,(aFill) ? "false" : "true",’"’,
\n‘ strokeweight="’, this.lineWidth, ‘"’,
\n‘ strokecolor="’, strokeColor, ‘"’,
\n‘ path="’);<\/p>\n
\n <\/p>\n
var newSeq = false;
\nvar min = {x:null, y:null};
\nvar max = {x:null, y:null};<\/p>\n
\n <\/p>\n
for (var i = 0; i < this.currentPath.length; i++) {
\nvar p = this.currentPath[i];<\/p>\n
\n <\/p>\n
if (p.type == ‘moveTo’) {
\nlineStr.push(‘ m ‘);
\nvar c = this.Coords(p.x, p.y);
\nlineStr.push(Math.floor(c.x), ‘,’, Math.floor(c.y));
\n} else if (p.type == ‘lineTo’) {
\nlineStr.push(‘ l ‘);
\nvar c = this.Coords(p.x, p.y);
\nlineStr.push(Math.floor(c.x), ‘,’, Math.floor(c.y));
\n} else if (p.type == ‘close’) {
\nlineStr.push(‘ x ‘);
\n} else if (p.type == ‘bezierCurveTo’) {
\nlineStr.push(‘ c ‘);
\nvar c = this.Coords(p.x, p.y);
\nvar c1 = this.Coords(p.cp1x, p.cp1y);
\nvar c2 = this.Coords(p.cp2x, p.cp2y);
\nlineStr.push(Math.floor(c1.x), ‘,’, Math.floor(c1.y), ‘,’,
\nMath.floor(c2.x), ‘,’, Math.floor(c2.y), ‘,’,
\nMath.floor(c.x), ‘,’, Math.floor(c.y));
\n} else if (p.type == ‘arc’) {
\nlineStr.push(‘ ar ‘);
\nvar c = this.Coords(p.x, p.y);
\nvar cStart = this.Coords(p.xStart, p.yStart);
\nvar cEnd = this.Coords(p.xEnd, p.yEnd);<\/p>\n
\n <\/p>\n
\/\/ TODO(glen): FIX (matricies (scale+rotation) now buggered this up)
\n\/\/ VML arc also doesn’t seem able to do rotated non-circular
\n\/\/ arcs without parent grouping.
\nvar absXScale = this.m[0][0];
\nvar absYScale = this.m[1][1];<\/p>\n
\n <\/p>\n
lineStr.push(Math.floor(c.x – absXScale * p.radius), ‘,’, Math.floor(c.y – absYScale * p.radius), ‘ ‘,
\nMath.floor(c.x + absXScale * p.radius), ‘,’, Math.floor(c.y + absYScale * p.radius), ‘ ‘,
\nMath.floor(cStart.x), ‘,’, Math.floor(cStart.y), ‘ ‘,
\nMath.floor(cEnd.x), ‘,’, Math.floor(cEnd.y));
\n}<\/p>\n
\n <\/p>\n
\n\/\/ TODO(glen): Following is broken for curves due to
\n\/\/ move to proper paths.<\/p>\n
\n <\/p>\n
\/\/ Figure out dimensions so we can do gradient fills
\n\/\/ properly
\nif (min.x == null || c.x < min.x) {
\nmin.x = c.x;
\n}
\nif (max.x == null || c.x > max.x) {
\nmax.x = c.x;
\n}
\nif (min.y == null || c.y < min.y) {
\nmin.y = c.y;
\n}
\nif (max.y == null || c.y > max.y) {
\nmax.y = c.y;
\n}
\n}
\nlineStr.push(‘ ">’);<\/p>\n
\n <\/p>\n
if (typeof this.fillStyle == ‘object’) {
\nvar focus = {x:"50%", y:"50%"};
\nvar width = (max.x – min.x);
\nvar height = (max.y – min.y);
\nvar dimension = (width > height) ? width : height;<\/p>\n
\n <\/p>\n
focus.x = Math.floor((this.fillStyle.focus.x \/ width) * 100 + 50) + ‘%’;
\nfocus.y = Math.floor((this.fillStyle.focus.y \/ height) * 100 + 50) + ‘%’;<\/p>\n
\n <\/p>\n
var colors = [];<\/p>\n
\n <\/p>\n
\/\/ inside radius (%)
\nif (this.fillStyle.type == ‘gradientradial’) {
\nvar inside = (this.fillStyle.radius1 \/ dimension * 100);<\/p>\n
\n <\/p>\n
\/\/ percentage that outside radius exceeds inside radius
\nvar expansion = (this.fillStyle.radius2 \/ dimension * 100) – inside;
\n} else {
\nvar inside = 0;
\nvar expansion = 100;
\n}<\/p>\n
\n <\/p>\n
var insidecolor = {offset:null, color:null};
\nvar outsidecolor = {offset:null, color:null};<\/p>\n
\n <\/p>\n
\/\/ We need to sort ‘colors’ by percentage, from 0 > 100 otherwise ie won’t
\n\/\/ interpret it correctly
\nthis.fillStyle.colors.sort(function (cs1, cs2) {
\nreturn cs1.offset – cs2.offset;
\n});<\/p>\n
\n <\/p>\n
for (var i = 0; i < this.fillStyle.colors.length; i++) {
\nvar fs = this.fillStyle.colors[i];<\/p>\n
\n <\/p>\n
colors.push( (fs.offset * expansion) + inside,’% ‘,fs.color,",");<\/p>\n
\n <\/p>\n
if (fs.offset > insidecolor.offset || insidecolor.offset == null) {
\ninsidecolor.offset = fs.offset;
\ninsidecolor.color = fs.color;
\n}<\/p>\n
\n <\/p>\n
if (fs.offset < outsidecolor.offset || outsidecolor.offset == null) {
\noutsidecolor.offset = fs.offset;
\noutsidecolor.color = fs.color;
\n}
\n}
\ncolors.pop();<\/p>\n
\n <\/p>\n
lineStr.push(‘<g_vml_:fill’,
\n‘ color="’,outsidecolor.color,’"’,
\n‘ color2="’,insidecolor.color,’"’,
\n‘ type="’, this.fillStyle.type, ‘"’,
\n‘ focusposition="’, focus.x, ‘, ‘, focus.y, ‘"’,
\n‘ colors="’, colors.join(”), ‘" \/>’);
\n}<\/p>\n
\n <\/p>\n
if (aFill) {
\nlineStr.push(‘<g_vml_:fill opacity="’, opacity, ‘" \/>’);
\n} else {
\nlineStr.push(‘<g_vml_:stroke opacity="’, opacity, ‘" joinstyle="’, this.lineJoin, ‘" miterlimit="’, this.miterLimit, ‘" endcap="’, G_VmlCanvas.ProcessLineCap(this.lineCap) ,’" \/>’);
\n}<\/p>\n
\n <\/p>\n
lineStr.push(‘<\/g_vml_:shape>’);<\/p>\n
\n <\/p>\n
this.element.insertAdjacentHTML("beforeEnd", lineStr.join(""));<\/p>\n
\n <\/p>\n
this.currentPath = [];
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.fill = function() {
\nthis.stroke(true);
\n}<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.closePath = function() {
\nthis.currentPath.push({type: ‘close’});
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.Coords = function(aX, aY) {
\nreturn {
\nx: (aX * this.m[0][0] + aY * this.m[1][0] + this.m[2][0]),
\ny: (aX * this.m[0][1] + aY * this.m[1][1] + this.m[2][1])
\n}
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.save = function() {
\nvar o = {};
\nG_VmlCanvas.CopyState(this, o);
\nthis.aStack.push(o);
\nthis.mStack.push(this.m);
\nthis.m = G_VmlCanvas.MatrixMultiply(G_VmlCanvas.MatrixIdentity(), this.m);\/\/new G_VmlCanvas.Matrix(this.m.x, this.m.y, this.m.rot, this.m.xScale, this.m.yScale);
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.restore = function() {
\nG_VmlCanvas.CopyState(this.aStack.pop(), this);
\nthis.m = this.mStack.pop();
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.translate = function(aX, aY) {
\nvar m1 = [
\n[1, 0, 0],
\n[0, 1, 0],
\n[aX, aY, 1]
\n];<\/p>\n
\n <\/p>\n
this.m = G_VmlCanvas.MatrixMultiply(m1, this.m);
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.rotate = function(aRot) {
\nvar c = Math.cos(aRot);
\nvar s = Math.sin(aRot);<\/p>\n
\n <\/p>\n
var m1 = [
\n[c, s, 0],
\n[-s, c, 0],
\n[0, 0, 1]
\n];<\/p>\n
\n <\/p>\n
this.m = G_VmlCanvas.MatrixMultiply(m1, this.m);
\n};<\/p>\n
\n <\/p>\n
G_VmlCanvas.prototype.scale = function(aX, aY) {
\nvar m1 = [
\n[aX, 0, 0],
\n[0, aY, 0],
\n[0, 0, 1]
\n];<\/p>\n
\n <\/p>\n
this.m = G_VmlCanvas.MatrixMultiply(m1, this.m);
\n};<\/p>\n
\n <\/p>\n
\n\/******** STUBS ********\/
\nG_VmlCanvas.prototype.clip = function() {;}
\nG_VmlCanvas.prototype.createPattern = function() {;}<\/p>\n
\n <\/p>\n
\n<\/SCRIPT>
\n<STYLE type="text\/css"><!–<\/p>\n
\n <\/p>\n
H1 {
\npadding: 5px;
\nfont-size: 14pt;
\nfont-style: italic;
\n}
\nBODY {
\nfont-family: arial;
\nfont-size: 10pt;
\nbackground-color: #000;
\ncolor: #CCC;
\n}
\n#holder {
\nposition: relative;
\nwidth: 400px;
\nheight:300px;
\ntop: 10px;
\nleft: 120px;
\nborder: 2px solid #333;
\n}
\n#sky {
\nposition: absolute;
\nleft: 0;
\ntop: 0;
\nheight: 150px;
\nwidth: 400px;
\nbackground-color: #CCD;
\nbackground-image: url(sky.jpg);<\/p>\n
\n <\/p>\n
}
\n#floor {
\nposition: absolute;
\nleft: 0;
\ntop: 150px;
\nheight: 150px;
\nwidth: 400px;
\nbackground-color: #565;
\nbackground-image: url(floor.png);<\/p>\n
\n <\/p>\n
}
\n#canvas {
\nposition: absolute;
\ntop: 0;
\nleft: 0;<\/p>\n
\n <\/p>\n
}
\n#overlay {
\nposition: absolute;
\ntop: 0;
\nleft: 0;
\nwidth: 400px;
\nheight: 300px;
\nbackground-image: url(overlay.gif);
\n}
\n#map, #underMap {
\ntop: 70px;
\nleft: 20px;
\nposition: absolute;
\n}
\n#copyright {
\nposition: absolute;
\ntop: 170px;
\nleft: 15px;
\n}
\nA {
\ncolor: #66AACC;
\n}
\nA:hover {
\ncolor: lime;
\n}<\/p>\n
\n <\/p>\n
–><\/STYLE>
\n<\/HEAD><\/p>\n
\n <\/p>\n
<BODY><\/p>\n
\n <\/p>\n
<H1>Canvascape – "3D Walker"<\/H1><\/p>\n
\n <\/p>\n
<CANVAS id="underMap" width="80" height="80"><\/CANVAS>
\n<CANVAS id="map" width="80" height="80"><\/CANVAS><\/p>\n
\n <\/p>\n
<DIV id="copyright">
\n© Benjamin Joffe<BR>
\n<A href="mailtCanvasGame@gmail.com" style="font-size:7pt;">canvasGame@gmail.com<\/A>
\n<\/DIV><\/p>\n
\n <\/p>\n
<DIV id="holder" style="clear:both;">
\n<DIV id="sky"><\/DIV>
\n<DIV id="floor"><\/DIV>
\n<CANVAS id="canvas" width="400" height="300"><\/CANVAS>
\n<DIV id="overlay"><\/DIV>
\n<\/DIV><\/p>\n
\n <\/p>\n
<P>Use the arrow keys to walk around the map. Space bar = jump.<\/P>
\n<P>What you are seeing is a test using the new Canvas tag to demonstrate its capabilities, Internet Explorer support has recently been added thanks to Google’s workaround code. See als <A href="textures.htm">textured version<\/A>.<\/P>
\n<P><A href="Web’>http:\/\/www.studiocoast.com.au\/">Web xiaoyebailong.coming provided by Studio Coast<\/A><\/P><\/p>\n
\n <\/p>\n
<SCRIPT type="text\/javascript"><!–
\n\/*
\nThis code is copyright by Benjamin Joffe.
\nYou may not reproduce or modify this without
\nwritten permission by the origional author.
\nEmail him: CanvasGame@gmail.com for suggestions.
\n*\/<\/p>\n
<\/p>\n
var map;
\nvar canvas;
\nvar overlay;
\n\/\/variables initiated at the bottom of the code…<\/p>\n
\n <\/p>\n
var pi=Math.PI;<\/p>\n
\n <\/p>\n
var total=0;<\/p>\n
\n <\/p>\n
Number.prototype.range=function(){
\nreturn (this+2*pi)%(2*pi);
\n}
\nNumber.prototype.roundC=function(){
\nreturn Math.round(this*100)\/100;
\n}<\/p>\n
\n <\/p>\n
var total=0;<\/p>\n
\n <\/p>\n
var samples=200;<\/p>\n
\n <\/p>\n
\nvar arena=[];
\narena[0]=[1,1,1,1,1,1,1,1,1,1]
\narena[1]=[1,0,0,0,0,0,0,0,0,1]
\narena[2]=[1,0,0,1,0,1,1,1,0,1]
\narena[3]=[1,0,1,0,0,0,0,1,0,1]
\narena[4]=[1,0,0,0,0,1,0,1,0,1]
\narena[5]=[1,0,1,1,0,0,0,0,0,1]
\narena[6]=[1,0,0,1,0,1,1,1,0,1]
\narena[7]=[1,1,0,1,0,0,0,1,0,1]
\narena[8]=[1,0,0,1,0,1,0,0,0,1]
\narena[9]=[1,1,1,1,1,1,1,1,1,1]<\/p>\n
\n <\/p>\n
\nvar playerPos=[4,4]; \/\/ x,y (from top left)
\nvar playerDir=0.4; \/\/ theta, facing right=0=2pi
\nvar playerPosZ=1;
\nvar key=[0,0,0,0,0]; \/\/ left, right, up, down<\/p>\n
\n <\/p>\n
var playerVelY=0;<\/p>\n
\n <\/p>\n
\nvar face=[];<\/p>\n
\n <\/p>\n
function wallDistance(theta){<\/p>\n
\n <\/p>\n
var data=[];
\nface=[];<\/p>\n
\n <\/p>\n
var x = playerPos[0], y = playerPos[1];
\nvar deltaX, deltaY;
\nvar distX, distY;
\nvar stepX, stepY;
\nvar mapX, mapY<\/p>\n
var atX=Math.floor(x), atY=Math.floor(y);<\/p>\n
\n <\/p>\n
var thisRow=-1;
\nvar thisSide=-1;<\/p>\n
\n <\/p>\n
var lastHeight=0;<\/p>\n
\n <\/p>\n
for (var i=0; i<samples; i++) {
\ntheta+=pi\/(3*samples)+2*pi;
\ntheta%=2*pi;<\/p>\n
\n <\/p>\n
mapX = atX, mapY = atY;<\/p>\n
\n <\/p>\n
deltaX=1\/Math.cos(theta);
\ndeltaY=1\/Math.sin(theta);<\/p>\n
\n <\/p>\n
if (deltaX>0) {
\nstepX = 1;
\ndistX = (mapX + 1 – x) * deltaX;
\n}
\nelse {
\nstepX = -1;
\ndistX = (x – mapX) * (deltaX*=-1);
\n}
\nif (deltaY>0) {
\nstepY = 1;
\ndistY = (mapY + 1 – y) * deltaY;
\n}
\nelse {
\nstepY = -1;
\ndistY = (y – mapY) * (deltaY*=-1);
\n}
\n <\/p>\n
\n <\/p>\n
for (var j=0; j<20; j++) {
\nif (distX < distY) {
\nmapX += stepX;
\nif (arena[mapX][mapY]) {
\nif (thisRow!=mapX || thisSide!=0) {
\nif (i>0) {
\ndata.push(i);
\ndata.push(lastHeight);
\n}
\ndata.push(i);
\ndata.push(distX);
\nthisSide=0;
\nthisRow=mapX;
\nface.push(1+stepX);
\n}
\nlastHeight=distX;
\nbreak;
\n}
\ndistX += deltaX;
\n}
\nelse {
\nmapY += stepY;
\nif (arena[mapX][mapY]) {
\nif (thisRow!=mapY || thisSide!=1) {
\nif (i>0) {
\ndata.push(i);
\ndata.push(lastHeight);
\n}
\ndata.push(i);
\ndata.push(distY);
\nthisSide=1;
\nthisRow=mapY;
\nface.push(2+stepY)
\n}
\nlastHeight=distY;
\nbreak;
\n}
\ndistY += deltaY;
\n}
\n}
\n}
\ndata.push(i);
\ndata.push(lastHeight);<\/p>\n
return data;
\n}<\/p>\n
\n <\/p>\n
\nfunction drawCanvas(){<\/p>\n
\n <\/p>\n
canvas.clearRect(0,0,400, 300);<\/p>\n
\n <\/p>\n
var theta = playerDir-pi\/6;<\/p>\n
\n <\/p>\n
var wall=wallDistance(theta);<\/p>\n
\n <\/p>\n
map.beginPath();
\nmap.clearRect(0,0,80,80);
\nmap.fillStyle="#3366CC";
\nmap.arc(playerPos[0]*8, playerPos[1]*8, 3, 0, 2*pi, true);
\nmap.fill();
\nmap.beginPath();
\nmap.moveTo(8*playerPos[0], 8*playerPos[1]);<\/p>\n
\n <\/p>\n
\nvar linGrad;<\/p>\n
var tl,tr,bl,br;<\/p>\n
var theta1,theta2,fix1,fix2;<\/p>\n
for (var i=0; i<wall.length; i+=4) {<\/p>\n
\n <\/p>\n
theta1=playerDir-pi\/6 + pi*wall[i]\/(3*samples);
\ntheta2=playerDir-pi\/6 + pi*wall[i+2]\/(3*samples);<\/p>\n
fix1 = Math.cos(theta1-playerDir);
\nfix2 = Math.cos(theta2-playerDir);<\/p>\n
\n <\/p>\n
var h=2-playerPosZ;<\/p>\n
\n <\/p>\n
var wallH1=100\/(wall[i+1]*fix1);
\nvar wallH2=100\/(wall[i+3]*fix2);<\/p>\n
\n <\/p>\n
tl=[wall[i]*2, 150-wallH1*h];
\ntr=[wall[i+2]*2, 150-wallH2*h]
\nbr=[wall[i+2]*2, tr[1]+wallH2*2];
\nbl=[wall[i]*2, tl[1]+wallH1*2]<\/p>\n
\n <\/p>\n
var shade1=Math.floor(wallH1*2+20); if (shade1>255) shade1=255;
\nvar shade2=Math.floor(wallH2*2+20); if (shade2>255) shade2=255;<\/p>\n
\n <\/p>\n
linGrad = canvas.createLinearGradient(tl[0],0,tr[0],0);
\nlinGrad.addColorStop(0, ‘rgba(‘+(face[i\/4]%2==0 ? shade1 : 0)+’,’+(face[i\/4]==1 ? shade1 : 0)+’,’+(face[i\/4]==2 ? 0 : shade1)+’,1.0)’);
\nlinGrad.addColorStop(1, ‘rgba(‘+(face[i\/4]%2==0 ? shade2 : 0)+’,’+(face[i\/4]==1 ? shade2 : 0)+’,’+(face[i\/4]==2 ? 0 : shade2)+’,1.0)’);<\/p>\n
\n <\/p>\n
canvas.beginPath();
\ncanvas.moveTo(tl[0], tl[1]);
\ncanvas.lineTo(tr[0], tr[1]);
\ncanvas.lineTo(br[0], br[1]);
\ncanvas.lineTo(bl[0], bl[1]);
\ncanvas.fillStyle = linGrad;
\ncanvas.fill();<\/p>\n
\n <\/p>\n
\nmap.lineTo(playerPos[0]*8+Math.cos(theta1)*(wall[i+1])*8, playerPos[1]*8+Math.sin(theta1)*(wall[i+1])*8);
\nmap.lineTo(playerPos[0]*8+Math.cos(theta2)*(wall[i+3])*8, playerPos[1]*8+Math.sin(theta2)*(wall[i+3])*8);<\/p>\n
\n <\/p>\n
\n}
\nmap.fillStyle="#FF0000"
\nmap.fill();<\/p>\n
}<\/p>\n
\n <\/p>\n
function nearWall(x,y){
\nvar xx,yy;
\nif (isNaN(x)) x=playerPos[0];
\nif (isNaN(y)) y=playerPos[1];
\nfor (var i=-0.1; i<=0.1; i+=0.2) {
\nxx=Math.floor(x+i)
\nfor (var j=-0.1; j<=0.1; j+=0.2) {
\nyy=Math.floor(y+j);
\nif (arena[xx][yy]) return true;
\n}
\n}
\nreturn false;
\n}<\/p>\n
\n <\/p>\n
function wobbleGun(){
\nvar mag=playerVelY;
\noverlay.style.backgroundPosition=(10+Math.cos(total\/6.23)*mag*90)+"px "+(10+Math.cos(total\/5)*mag*90)+"px";
\n}<\/p>\n
\n <\/p>\n
\nvar jumpCycle=0;<\/p>\n
\n <\/p>\n
\nfunction update(){<\/p>\n
\n <\/p>\n
total++;<\/p>\n
\n <\/p>\n
var change=false;<\/p>\n
\n <\/p>\n
if (jumpCycle) {
\njumpCycle–;
\nchange=true;
\nplayerPosZ = 1 + jumpCycle*(20-jumpCycle)\/110;
\n}
\nelse if (key[4]) jumpCycle=20;<\/p>\n
if (key[0]) {
\nif (!key[1]) {
\nplayerDir-=0.07; \/\/left
\nchange=true;
\n}
\n}
\nelse if (key[1]) {
\nplayerDir+=0.07; \/\/right
\nchange=true;
\n}<\/p>\n
\n <\/p>\n
if (change) {
\nplayerDir+=2*pi;
\nplayerDir%=2*pi;
\ndocument.getElementById("sky").style.backgroundPosition=Math.floor(1-playerDir\/(2*pi)*2400)+"px 0";
\n}<\/p>\n
\n <\/p>\n
if (key[2] && !key[3]) {
\nif (playerVelY<0.1) playerVelY += 0.02;
\n}
\nelse if (key[3] && !key[2]) {
\nif (playerVelY>-0.1) playerVelY -= 0.02;
\n}
\nelse {
\nif (playerVelY<-0.02) playerVelY += 0.015;
\nelse if (playerVelY>0.02) playerVelY -= 0.015;
\nelse playerVelY=0;
\n}<\/p>\n
\nif (playerVelY!=0) {<\/p>\n
\n <\/p>\n
var oldX=playerPos[0];;
\nvar oldY=playerPos[1];
\nvar newX=oldX+Math.cos(playerDir)*playerVelY;
\nvar newY=oldY+Math.sin(playerDir)*playerVelY;<\/p>\n
\n <\/p>\n
if (!nearWall(newX, oldY)) {
\nplayerPos[0]=newX;
\noldX=newX;
\nchange=true;
\n}
\nif (!nearWall(oldX, newY)) {
\nplayerPos[1]=newY;
\nchange=true;
\n}<\/p>\n
\n <\/p>\n
}<\/p>\n
if (playerVelY) wobbleGun();
\nif (change) drawCanvas();<\/p>\n
\n <\/p>\n
}<\/p>\n
\n <\/p>\n
\nfunction changeKey(which, to){
\nswitch (which){
\ncase 65:case 37: key[0]=to; break; \/\/ left
\ncase 87: case 38: key[2]=to; break; \/\/ up
\ncase 68: case 39: key[1]=to; break; \/\/ right
\ncase 83: case 40: key[3]=to; break;\/\/ down
\ncase 32: key[4]=to; break; \/\/ space bar;
\ncase 17: key[5]=to; break; \/\/ ctrl
\n}
\n}
\ndocument.onkeydown=function(e){changeKey((e||window.event).keyCode, 1);}
\ndocument.onkeyup=function(e){changeKey((e||window.event).keyCode, 0);}<\/p>\n
\n <\/p>\n
\nfunction initUnderMap(){
\nvar underMap=document.getElementById("underMap").getContext("2d");
\nunderMap.fillStyle="#FFF";
\nunderMap.fillRect(0,0, 200, 200);
\nunderMap.fillStyle="#444";
\nfor (var i=0; i<arena.length; i++) {
\nfor (var j=0; j<arena[i].length; j++) {
\nif (arena[i][j]) underMap.fillRect(i*8, j*8, 8, 8);
\n}
\n}
\n}<\/p>\n
\n <\/p>\n
window.onerror=function(){
\nalert(‘An error has occured, the most likely reason is because you are using an incompatible browser.\\nYou must be using one of the following browsers or a newer version:\\n\\n- Internet Explorer 6\\n- Firefox 1.5\\n- Safari 1.3\\n- Opera 9’);
\nwindow.onerror=function(){};
\nreturn true;
\n}<\/p>\n
\n <\/p>\n
window.onload=function(){
\nmap=document.getElementById("map").getContext("2d");
\ncanvas=document.getElementById("canvas").getContext("2d");
\noverlay=document.getElementById("overlay");
\ndocument.getElementById("sky").style.backgroundPosition=Math.floor(-playerDir\/(2*pi)*2400)+"px 0";
\ndrawCanvas();
\ninitUnderMap();
\nsetInterval(update, 35);
\n}<\/p>\n
\n <\/p>\n
\n\/\/–><\/SCRIPT><\/p>\n
<\/p>\n
<!– Start of StatCounter Code –>
\n<script type="text\/javascript" language="javascript">
\nvar sc_project=1082313;
\nvar sc_invisible=1;
\nvar sc_partition=9;
\nvar sc_security="adb52a92";
\n<\/script><\/p>\n
\n <\/p>\n
\n<!– End of StatCounter Code –><\/p>\n
<\/p>\n
<\/BODY>
\n<\/HTML><\/p>\n","protected":false},"excerpt":{"rendered":"
<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/strict.dtd"> <…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"topic":[],"class_list":["post-691","post","type-post","status-publish","format-standard","hentry","category-technology"],"_links":{"self":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":1,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"predecessor-version":[{"id":66551,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/posts\/691\/revisions\/66551"}],"wp:attachment":[{"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/tags?post=691"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/www.xiaoyebailong.com\/index.php\/wp-json\/wp\/v2\/topic?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}