Launch with right click menu
Version au
// ==UserScript==
// @name Katamari! userscript port
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Launch with right click menu
// @author Alex Leone, David Nufer, and David Truong (userscript port by Charlie Burnham)
// @match *
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
// @grant none
// @run-at context-menu
// ==/UserScript==
(function() {
/*
Copyright Alex Leone, David Nufer, David Truong, 2011-03-11. kathack.com
javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);
*/
var BORDER_STYLE = "1px solid #bbb",
CSS_TRANSFORM = null,
CSS_TRANSFORM_ORIGIN = null,
POSSIBLE_TRANSFORM_PREFIXES = ['-webkit-', '-moz-', '-o-', '-ms-', ''],
khFirst = false;
/* When running twice on one page, update pick-uppable nodes instead of
* creating more.
*/
if (!window.khNodes) {
khFirst = true;
window.khNodes = new StickyNodes();
}
function getCssTransform() {
var i, d = document.createElement('div'), pre;
for (i = 0; i < POSSIBLE_TRANSFORM_PREFIXES.length; i++) {
pre = POSSIBLE_TRANSFORM_PREFIXES[i];
d.style.setProperty(pre + 'transform', 'rotate(1rad) scaleX(2)', null);
if (d.style.getPropertyValue(pre + 'transform')) {
CSS_TRANSFORM = pre + 'transform';
CSS_TRANSFORM_ORIGIN = pre + 'transform-origin';
return;
}
}
alert("Your browser doesn't support CSS tranforms!");
throw "Your browser doesn't support CSS tranforms!";
}
getCssTransform();
/**
* Returns true if the circle intersects the element rectangle.
* 0 | 1 | 2
* ------------------
* 3 | 4 | 5
* ------------------
* 6 | 7 | 9
*/
function circleGridObjInt(cx, cy, cr, cr2, go) {
var dx, dy;
if (cx < go.left) {
dx = go.left - cx;
if (cy < go.top) { /* zone 0. */
dy = go.top - cy;
return ((dx * dx + dy * dy) <= cr2);
} else if (cy <= go.bottom) { /* zone 3. */
return (dx <= cr);
} else { /* zone 6. */
dy = cy - go.bottom;
return ((dx * dx + dy * dy) <= cr2);
}
} else if (cx <= go.right) {
if (cy < go.top) { /* zone 1. */
return ((go.top - cy) <= cr);
} else if (cy <= go.bottom) { /* zone 4. */
return true;
} else { /* zone 7. */
return ((cy - go.bottom) <= cr);
}
} else {
dx = cx - go.right;
if (cy < go.top) { /* zone 2. */
dy = go.top - cy;
return ((dx * dx + dy * dy) <= cr2);
} else if (cy <= go.bottom) { /* zone 5. */
return (dx <= cr);
} else { /* zone 9. */
dy = cy - go.bottom;
return ((dx * dx + dy * dy) <= cr2);
}
}
}
/**
* Returns [x,y] where the rectangle is closest to (cx, cy).
* 0 | 1 | 2
* ------------------
* 3 | 4 | 5
* ------------------
* 6 | 7 | 9
*/
function getClosestPoint(cx, cy, go) {
var dx, dy;
if (cx < go.left) {
dx = go.left - cx;
if (cy < go.top) { /* zone 0. */
return [go.left, go.top];
} else if (cy <= go.bottom) { /* zone 3. */
return [go.left, cy];
} else { /* zone 6. */
return [go.left, go.bottom];
}
} else if (cx <= go.right) {
if (cy < go.top) { /* zone 1. */
return [cx, go.top];
} else if (cy <= go.bottom) { /* zone 4. */
return [cx, cy];
} else { /* zone 7. */
return [cx, go.bottom];
}
} else {
dx = cx - go.right;
if (cy < go.top) { /* zone 2. */
return [go.right, go.top];
} else if (cy <= go.bottom) { /* zone 5. */
return [go.right, cy];
} else { /* zone 9. */
return [go.right, go.bottom];
}
}
}
/**
* Returns the "volume" of the grid object.
*/
function gridObjVol(go) {
return go.w * go.h * Math.min(go.w, go.h);
}
function StickyNodes() {
var domNodes = [],
grid = [],
GRIDX = 100,
GRIDY = 100,
REPLACE_WORDS_IN = {
a: 1, b: 1, big: 1, body: 1, cite:1, code: 1, dd: 1, div: 1,
dt: 1, em: 1, font: 1, h1: 1, h2: 1, h3: 1, h4: 1, h5: 1, h6: 1,
i: 1, label: 1, legend: 1, li: 1, p: 1, pre: 1, small: 1,
span: 1, strong: 1, sub: 1, sup: 1, td: 1, th: 1, tt: 1
};
function addDomNode(el) {
if (el !== undefined && el !== null) {
el.khIgnore = true;
el.style.border = BORDER_STYLE;
domNodes.push(el);
}
}
this.addDomNode = addDomNode;
this.addWords = function (el) {
var textEls = [];
function shouldAddChildren(el) {
return el.tagName && REPLACE_WORDS_IN[el.tagName.toLowerCase()];
}
function buildTextEls(el, shouldAdd) {
var i, len;
if (shouldAdd && el.nodeType === Node.TEXT_NODE &&
el.nodeValue.trim().length > 0) {
textEls.push(el);
return;
}
if (!el.childNodes || el.khIgnore) {
return;
}
shouldAdd = shouldAddChildren(el);
for (i = 0, len = el.childNodes.length; i < len; i++) {
buildTextEls(el.childNodes[i], shouldAdd);
}
}
function wordsToSpans(textEl) {
var p = textEl.parentNode,
words = textEl.nodeValue.split(/\s+/),
ws = textEl.nodeValue.split(/\S+/),
i, n, len = Math.max(words.length, ws.length);
/* preserve whitespace for pre tags. */
if (ws.length > 0 && ws[0].length === 0) {
ws.shift();
}
for (i = 0; i < len; i++) {
if (i < words.length && words[i].length > 0) {
n = document.createElement('span');
n.innerHTML = words[i];
p.insertBefore(n, textEl);
addDomNode(n);
}
if (i < ws.length && ws[i].length > 0) {
n = document.createTextNode(ws[i]);
p.insertBefore(n, textEl);
}
}
p.removeChild(textEl);
}
buildTextEls(el, shouldAddChildren(el));
textEls.map(wordsToSpans);
};
/* includes el. */
this.addTagNames = function (el, tagNames) {
var tname = el.tagName && el.tagName.toLowerCase(),
i, j, els, len;
if (el.khIgnore) {
return;
}
if (tagNames.indexOf(tname) !== -1) {
addDomNode(el);
}
if (!el.getElementsByTagName) {
return;
}
for (i = 0; i < tagNames.length; i++) {
els = el.getElementsByTagName(tagNames[i]);
for (j = 0, len = els.length; j < len; j++) {
if (!els[j].khIgnore) {
addDomNode(els[j]);
}
}
}
};
this.finalize = function (docW, docH) {
var xi, yi, i, len, startXI, startYI, el, go, off, w, h,
endXI = Math.floor(docW / GRIDX) + 1,
endYI = Math.floor(docH / GRIDY) + 1;
/* initialize grid. */
grid = new Array(endXI);
for (xi = 0; xi < endXI; xi++) {
grid[xi] = new Array(endYI);
}
/* add nodes into grid. */
for (i = 0, len = domNodes.length; i < len; i++) {
el = domNodes[i];
if (el.khPicked) {
continue;
}
off = jQuery(el).offset();
w = jQuery(el).width();
h = jQuery(el).height();
go = {
el: domNodes[i], /* dom element. */
left: off.left,
right: off.left + w,
top: off.top,
bottom: off.top + h,
w: w,
h: h,
x: off.left + (w / 2), /* center x. */
y: off.top + (h / 2), /* center y. */
diag: Math.sqrt(((w * w) + (h * h)) / 4), /* center to corner */
/* these are for removing ourselves from the grid. */
arrs: [], /* which arrays we're in (grid[x][y]). */
idxs: [] /* what indexes. */
};
startXI = Math.floor(go.left / GRIDX);
startYI = Math.floor(go.top / GRIDY);
endXI = Math.floor((go.left + go.w) / GRIDX) + 1;
endYI = Math.floor((go.top + go.h) / GRIDY) + 1;
for (xi = startXI; xi < endXI; xi++) {
for (yi = startYI; yi < endYI; yi++) {
if (grid[xi] === undefined) {
grid[xi] = [];
}
if (grid[xi][yi] === undefined) {
grid[xi][yi] = [go];
} else {
grid[xi][yi].push(go);
}
go.arrs.push(grid[xi][yi]);
go.idxs.push(grid[xi][yi].length - 1);
}
}
}
};
function removeGridObj(go) {
var i;
for (i = 0; i < go.arrs.length; i++) {
go.arrs[i][go.idxs[i]] = undefined;
}
go.el.style.visibility = "hidden";
go.el.khPicked = true;
delete go.arrs;
delete go.idxs;
}
/**
* cb(gridObj) -> boolean true if the object should be removed.
*/
this.removeIntersecting = function (x, y, r, cb) {
var xi, yi, arr, i, r2 = r * r, go,
startXI = Math.floor((x - r) / GRIDX),
startYI = Math.floor((y - r) / GRIDY),
endXI = Math.floor((x + r) / GRIDX) + 1,
endYI = Math.floor((y + r) / GRIDY) + 1;
for (xi = startXI; xi < endXI; xi++) {
if (grid[xi] === undefined) {
continue;
}
for (yi = startYI; yi < endYI; yi++) {
arr = grid[xi][yi];
if (arr === undefined) {
continue;
}
for (i = 0; i < arr.length; i++) {
go = arr[i];
if (go !== undefined &&
circleGridObjInt(x, y, r, r2, go) &&
cb(go)) {
removeGridObj(go);
}
}
}
}
};
}
function PlayerBall(parentNode, stickyNodes, ballOpts, sounds) {
var x = 300, y = 300,
vx = 0, vy = 0,
radius = 20,
lastR = 0, /**< optimization: only resize when necessary. */
docW = 10000, docH = 10000,
attached = [],
attachedDiv, /* div to put attached nodes into. */
canvas_el,
canvas_ctx,
color = ballOpts.color,
accelTargetX = 0, accelTargetY = 0,
accel = false,
VOL_MULT = ballOpts.VOL_MULT,
MAX_ATTACHED_VISIBLE = ballOpts.MAX_ATTACHED_VISIBLE,
CHECK_VOLS = ballOpts.CHECK_VOLS,
/**
* which direction the ball is facing in the xy axis, in radians.
* th: 0 is facing dead East
* th: 1/2 PI is facing dead South
* note that this is like regular th on a graph with y inverted.
* Same rotation as css transform.
*/
th = 0,
/**
* Ball angle in the rotation axis / z plane, in radians.
* phi: 0 is pointing in the direction the ball is rolling.
* phi: 1/2 PI is pointing straight up (out of the page).
* note that forward rotation means phi -= 0.1.
*/
phi = 0;
this.init = function () {
canvas_el = document.createElement('canvas');
canvas_el.width = radius * 2;
canvas_el.height = radius * 2;
canvas_el.style.cssText = 'position: absolute; z-index: 500;';
parentNode.appendChild(canvas_el);
canvas_ctx = canvas_el.getContext('2d');
attachedDiv = document.createElement('div');
parentNode.appendChild(attachedDiv);
};
this.setRadius = function (r) {
radius = r;
};
this.getState = function () {
return {
x: x,
y: y,
vx: vx,
vy: vy,
radius: radius,
th: th,
phi: phi,
};
};
this.setState = function (s) {
x = s.x;
y = s.y;
vx = s.vx;
vy = s.vy;
radius = s.radius;
th = s.th;
phi = s.phi;
};
this.setXY = function (sx, sy) {
x = sx;
y = sy;
};
this.setTh = function (sth) {
th = sth;
};
this.setPhi = function (sphi) {
phi = sphi;
};
this.setColor = function (c) {
color = c;
};
this.setDocSize = function (w, h) {
docW = w;
docH = h;
};
this.setAccel = function (bool) {
accel = bool;
};
this.setAccelTarget = function (tx, ty) {
accelTargetX = tx;
accelTargetY = ty;
};
function getVol() {
return (4 * Math.PI * radius * radius * radius / 3);
}
function grow(go) {
var newVol = getVol() + gridObjVol(go) * VOL_MULT;
radius = Math.pow(newVol * 3 / (4 * Math.PI), 1 / 3);
}
function attachGridObj(go) {
var attXY = getClosestPoint(x, y, go),
dx = attXY[0] - x,
dy = attXY[1] - y,
r = Math.sqrt(dx * dx + dy * dy),
attTh = 0 - th,
offLeft = attXY[0] - go.left,
offTop = attXY[1] - go.top,
offTh = Math.atan2(dy, dx) - th,
attX = r * Math.cos(offTh),
attY = r * Math.sin(offTh),
el = go.el.cloneNode(true),
go_jel = jQuery(go.el),
newAtt = {
el: el,
attX: attX,
attY: attY,
attT: 'translate(' + Math.round(attX) + 'px,' +
Math.round(attY) + 'px) ' +
'rotate(' + attTh + 'rad)',
r: r,
offTh: offTh,
offPhi: 0 - phi,
diag: go.diag,
removeR: r + go.diag,
visible: false,
display: go_jel.css('display')
};
attached.push(newAtt);
grow(go);
el.style.position = 'absolute';
el.style.left = (-offLeft) + 'px';
el.style.top = (-offTop) + 'px';
el.style.setProperty(CSS_TRANSFORM_ORIGIN,
offLeft + 'px ' + offTop + 'px', null);
el.style.display = 'none';
/* copy computed styles from old object. */
el.style.color = go_jel.css('color');
el.style.textDecoration = go_jel.css('text-decoration');
el.style.fontSize = go_jel.css('font-size');
el.style.fontWeight = go_jel.css('font-weight');
el.khIgnore = true;
attachedDiv.appendChild(el);
if (sounds) {
sounds.play_pop();
}
}
/**
* @return true if the object should be removed from stickyNodes.
*/
function removeIntCb(go) {
if (CHECK_VOLS && gridObjVol(go) > getVol()) {
return false;
}
attachGridObj(go);
return true;
}
this.updatePhysics = function () {
var oldX = x, oldY = y, dx, dy,
bounce = false,
accelTh;
if (accel) {
accelTh = Math.atan2(accelTargetY - y, accelTargetX - x);
vx += Math.cos(accelTh) * 0.5;
vy += Math.sin(accelTh) * 0.5;
} else {
vx *= 0.95;
vy *= 0.95;
}
x += vx;
y += vy;
/* bounce ball on edges of document. */
if (x - radius < 0) {
bounce = true;
x = radius + 1;
vx = -vx;
} else if (x + radius > docW) {
bounce = true;
x = docW - radius - 1;
vx = -vx;
}
if (y - radius < 0) {
bounce = true;
y = radius + 1;
vy = -vy;
} else if (y + radius > docH) {
bounce = true;
y = docH - radius - 1;
vy = -vy;
}
if (vx !== 0 || vy !== 0) {
th = Math.atan2(vy, vx);
dx = x - oldX;
dy = y - oldY;
/* arclen = th * r, so th = arclen / r. */
phi -= Math.sqrt(dx * dx + dy * dy) / radius;
}
stickyNodes.removeIntersecting(x, y, radius, removeIntCb);
this.draw();
if (bounce && sounds) {
sounds.play_bounce();
}
};
function drawBall() {
var sx1, sy1, sx2, sy2, dx, dy, i, pct1, pct2, z1, z2;
/* move/resize canvas element. */
canvas_el.style.left = (x - radius) + 'px';
canvas_el.style.top = (y - radius) + 'px';
if (radius != lastR) {
canvas_el.width = 2 * radius + 1;
canvas_el.height = 2 * radius + 1;
lastR = radius;
}
/* draw white circle. */
canvas_ctx.clearRect(0, 0, 2 * radius, 2 * radius);
canvas_ctx.fillStyle = "#fff";
canvas_ctx.beginPath();
canvas_ctx.arc(radius, radius, radius - 1, 0, Math.PI * 2, true);
canvas_ctx.fill();
/* draw outer border. */
canvas_ctx.strokeStyle = color;
canvas_ctx.beginPath();
canvas_ctx.arc(radius, radius, radius - 1, 0, Math.PI * 2, true);
canvas_ctx.stroke();
/* draw stripes. */
canvas_ctx.fillStyle = color;
sx1 = radius + radius * Math.cos(th + Math.PI / 16);
sy1 = radius + radius * Math.sin(th + Math.PI / 16);
sx2 = radius + radius * Math.cos(th - Math.PI / 16);
sy2 = radius + radius * Math.sin(th - Math.PI / 16);
dx = (radius + radius * Math.cos(th + Math.PI * 15 / 16)) - sx1;
dy = (radius + radius * Math.sin(th + Math.PI * 15 / 16)) - sy1;
for (i = 0; i < Math.PI * 2; i += Math.PI / 7) {
pct1 = (-Math.cos(phi + i) + 1) / 2;
pct2 = (-Math.cos(phi + i + Math.PI / 32) + 1) / 2;
z1 = Math.sin(phi + i);
z2 = Math.sin(phi + i + Math.PI / 32);
if (z1 > 0 && z2 > 0) {
canvas_ctx.beginPath();
canvas_ctx.moveTo(sx1 + pct1 * dx, sy1 + pct1 * dy);
canvas_ctx.lineTo(sx1 + pct2 * dx, sy1 + pct2 * dy);
canvas_ctx.lineTo(sx2 + pct2 * dx, sy2 + pct2 * dy);
canvas_ctx.lineTo(sx2 + pct1 * dx, sy2 + pct1 * dy);
canvas_ctx.fill();
}
}
}
/**
* @return true if the attached object is roughly visible.
*/
function drawAttached(att) {
var oth = th + att.offTh,
ophi = phi + att.offPhi,
ox = att.r * Math.cos(oth),
oy = att.r * Math.sin(oth),
dx = (att.r * Math.cos((th - att.offTh) + Math.PI)) - ox,
dy = (att.r * Math.sin((th - att.offTh) + Math.PI)) - oy,
pct = (-Math.cos(ophi) + 1) / 2,
cx = ox + pct * dx,
cy = oy + pct * dy,
oz = att.r * Math.sin(ophi);
if (oz < 0 && Math.sqrt(cx * cx + cy * cy) + att.diag < radius) {
/* hidden behind circle. */
if (att.visible) {
att.visible = false;
att.el.style.display = "none";
}
return false;
}
/* attached node is visible. */
if (!att.visible) {
att.visible = true;
att.el.style.display = att.display;
}
//att.el.style.zIndex = 500 + Math.round(oz);
att.el.style.zIndex = (oz > 0)? 501 : 499;
att.el.style.setProperty(
CSS_TRANSFORM,
'translate(' + x + 'px,' + y + 'px) ' +
'rotate(' + th + 'rad) ' +
'scaleX(' + Math.cos(ophi) + ') ' +
att.attT, null);
return true;
}
function onAttachedRemoved(att) {
attachedDiv.removeChild(att.el);
delete att.el;
}
this.draw = function () {
var i, att, numAttachedVisible = 0;
drawBall();
for (i = attached.length; --i >= 0;) {
att = attached[i];
if (att.removeR < radius) {
attached.splice(i, 1).map(onAttachedRemoved);
} else if (drawAttached(att)) {
if (++numAttachedVisible > MAX_ATTACHED_VISIBLE) {
/* remove older items and stop. */
attached.splice(0, i).map(onAttachedRemoved);
break;
}
}
}
};
}
function preventDefault(event) {
event.preventDefault();
event.returnValue = false;
return false;
}
function Game(gameDiv, stickyNodes, ballOpts) {
var stickyNodes, player1, physicsInterval, resizeInterval, listeners = [];
player1 = new PlayerBall(gameDiv, stickyNodes, ballOpts, false);
player1.init();
player1.setXY(300, 300);
window.scrollTo(0, 200);
function on_resize() {
player1.setDocSize(jQuery(document).width() - 5,
jQuery(document).height() - 5);
}
on_resize();
/* touch events - always on? */
document.addEventListener('touchstart', function (event) {
if (event.touches.length === 1) {
player1.setAccel(true);
return preventDefault(event);
}
}, true);
document.addEventListener('touchmove', function (event) {
player1.setAccelTarget(event.touches[0].pageX,
event.touches[0].pageY);
}, true);
document.addEventListener('touchend', function (event) {
if (event.touches.length === 0) {
player1.setAccel(false);
return preventDefault(event);
}
}, true);
if (ballOpts.MOUSEB !== -5) {
/* mouse buttons */
document.addEventListener('mousemove', function (event) {
player1.setAccelTarget(event.pageX, event.pageY);
}, true);
document.addEventListener('mousedown', function (event) {
if (event.button === ballOpts.MOUSEB) {
player1.setAccel(true);
return preventDefault(event);
}
}, true);
document.addEventListener('mouseup', function (event) {
if (event.button === ballOpts.MOUSEB) {
player1.setAccel(false);
return preventDefault(event);
}
}, true);
if (ballOpts.MOUSEB === 0) {
/* block click events. */
document.addEventListener('click', function (event) {
if (event.button === 0) {
return preventDefault(event);
}
}, true);
} else if (ballOpts.MOUSEB === 2) {
/* block right-click context menu. */
document.addEventListener('contextmenu', preventDefault, true);
}
}
physicsInterval = setInterval(function () {
player1.updatePhysics();
}, 25);
resizeInterval = setInterval(on_resize, 1000);
}
function whenAllLoaded(gameDiv, popup, stickyNodes) {
stickyNodes.finalize(jQuery(document).width(), jQuery(document).height());
jQuery('#loadingp').empty();
jQuery('<button>Start!</button>').click(function () {
var game, bgmusic, ballOpts;
if (jQuery('#bgmusicc').attr('checked')) {
if (!(bgmusic = document.getElementById('khbgmusic'))) {
bgmusic = document.createElement('audio');
bgmusic.id = 'khbgmusic';
bgmusic.loop = 'loop';
bgmusic.src = 'http://kathack.com/js/katamari.mp3';
gameDiv.appendChild(bgmusic);
}
bgmusic.play();
}
ballOpts = {
color: jQuery('#khcolor').val(),
VOL_MULT: parseFloat(jQuery('#vol_mult').val()),
MAX_ATTACHED_VISIBLE: parseInt(jQuery('#maxAtt').val(), 10),
CHECK_VOLS: (jQuery('#checkv').attr('checked'))? true : false,
MOUSEB: parseInt(jQuery('#mouseb').val(), 10)
};
gameDiv.removeChild(popup);
game = new Game(gameDiv, stickyNodes, ballOpts);
}).appendTo('#loadingp');
}
function buildPopup(gameDiv) {
var d = document.createElement('div'), b;
d.style.cssText = '\
position: fixed;\
left: 50%;\
top: 50%;\
width: 400px;\
margin-left:-200px;\
margin-top:-150px;\
border:1px solid black;\
background-color:white;\
color:black;\
padding:20px;\
font-size:13px;\
text-align:left;\
z-index:501;';
d.innerHTML = '<h1 style="font-size:16pt">\
<a href="http://kathack.com/" style="color:blue;text-decoration:none;">\
Katamari!</a></h1>\
<button style="position:absolute;top:0;right:0;">X</button>\
<p>Controls: Hold down <b><select id="mouseb">\
<option value="0">Left-Click</option>\
<option value="2" selected="selected">Right-Click</option>\
<option value="-5">Touch</option>\
</select></b> to control the ball!</p>\
<div><label>Background Music? \
<input id="bgmusicc" type="checkbox" checked="checked" /></label></div>\
<div style="text-align:right; color:gray;">\
<label>Katamari Color: <select id="khcolor">\
<option value="#ff0000" style="background-color:#ff0000;color:#ff0000"> r </option>\
<option value="#00ff00" style="background-color:#00ff00;color:#00ff00"> g </option>\
<option value="#0000ff" style="background-color:#0000ff;color:#0000ff"> b </option>\
<option selected="selected" value="#7D26CD" style="background-color:#7D26CD;color:#7D26CD"> p \
</option></select></label><br />\
<label title="Lower this if the game gets slow.">\
Max Attached Objects: <select id="maxAtt">\
<option>25</option>\
<option>50</option>\
<option selected="selected">75</option>\
<option>100</option>\
<option>9000</option></select></label><br />\
<label title="How much to grow when an object is picked up.">\
Growth Speed: <input id="vol_mult" type="text" size="6" value="1.0" />\
</label><br />\
<label title="Bigger objects require a bigger katamari to pick up.">\
Realistic Pickups? <input id="checkv" type="checkbox" checked="checked" />\
</label></div>\
<p id="loadingp">Loading!</p>';
gameDiv.appendChild(d);
d.getElementsByTagName('button')[0].addEventListener('click', function () {
gameDiv.removeChild(d);
}, true);
return d;
}
function main() {
var gameDiv, checkInterval, stickyNodes, popup;
gameDiv = document.createElement('div');
gameDiv.khIgnore = true;
document.body.appendChild(gameDiv);
popup = buildPopup(gameDiv);
/* setTimeout so that the popup displays before we freeze. */
setTimeout(function () {
var i, len, el;
window.khNodes.addWords(document.body);
for (i = 0, len = document.body.childNodes.length; i < len; i++) {
el = document.body.childNodes[i];
window.khNodes.addTagNames(el, [
'button', 'canvas', 'iframe', 'img', 'input', 'select',
'textarea'
]);
}
checkInterval = setInterval(function () {
if (window.jQuery) {
clearInterval(checkInterval);
whenAllLoaded(gameDiv, popup, window.khNodes);
}
}, 100);
}, 0);
}
if (!window.noMain) {
main();
}
})();