diff options
| author | Michele Bini <michele.bini@gmail.com> | 2014-09-28 13:19:37 (GMT) |
|---|---|---|
| committer | Michele Bini <michele.bini@gmail.com> | 2014-09-28 13:19:37 (GMT) |
| commit | fbf12028d60458773cbc821bd781c22973ae9208 (patch) | |
| tree | 9fa49600e587c81510bf0a6ecb88bdf7e43d57cc | |
| parent | b1ece8d650f13bf3f350ba9ccc6f37c6e31ebb92 (diff) | |
Added debugging version of page
| -rw-r--r-- | game-debug.html | 269 | ||||
| -rw-r--r-- | game-debug.html.coffee | 314 |
2 files changed, 583 insertions, 0 deletions
diff --git a/game-debug.html b/game-debug.html new file mode 100644 index 0000000..b470996 --- /dev/null +++ b/game-debug.html @@ -0,0 +1,269 @@ +<!DOCTYPE 5> +<html><head><meta charset="utf-8"><link rel="shortcut icon" href="data:image/x-icon;base64,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zNPUy9LUydPUys3PxMXIv7zHvLTBtq+8sKO0r5SfoW9+gDpOUDNBRDpFST1HTMnJvNHUwszRxMzPxc/Nxc7Kxc/NxNHTwNTVwtnSytnUzNLVy9LUytLTytHSydHSyM/Rx8zPxczNw8rNw8THvr3EurS+s6+8sJmtpIOckniJhl1zcDNQVjdLU0pTVlBYW9DCvdLHws3Iwc3HwMrGv8rFvsbFvcbJtsfKuMfMwcfMwsrPxc3Rx87Rx8nNw8fMwr7Jv7zHvcPHvcLGvLrAtbm+tbm8t6O1qo6lmnuWinmOhlx1ZzdcVjhVU01dW1pmZse8tsq+uL6/t7y/tr6/t8C9tLu9tbnCtbvEtrzEuL7GvMPIv8XKwMbJwb3FwbzHvbfGu7rDuMPFv8LJv8fPwsTKwsPJxMDJvbG/tJu1qqi+sLvKvsPRxDNXTVFsaWh5eMK1r8G0rru2rrW3rrS1rbaurbCxrLG1rrG2rrW6tLjAtsXKwMzQxdDUz8bY0cjczcXXztHU0sbGyb7Fw7fEv7O+urW+u7i+vsLHxczU0tXg3eTs4s3Vy1Rxam+FgYeUkbqvqbWqpbetprOqpaqmnqujnpyemp2gnaKmpKqwsL7Ev97g1fb17v/7+f////j499Ha2rO/v6y2uq+3u6u0tqmxtKSrrp6jppKbmYqXlY6bmJKfnI2bmIKRjomZlaStq6ylnqihmZ+blKCXlpOPiHx8dG50dH2Bg5KcnKOursPJxuDn2+317PHw8NnS07y4u6Kkp5+ipqCprJ2prKGtr6+wtLGwtKenrKClpJObmY+VlYqUk4uVk5GamKyvrt/Y2KGhmZGRkJOOjXFubFxaVVpVU1ddX3t8fpqgoL25usTBwbnBwLG4t6SfpJWQlZKLkY2LkI6PlJSanZymqaaqrayssKSrrqClqJmfnpGdmI+fmZSgm6Glo7m8uNrU0uDY15yUk4uIhnp1dENCQUpDRFdKUFJXV35+gJqZm6CfoZ2dnoCHiYGBhoJ9gn56gHt4fXN5fXN+goCJipWanLCusr26tra8tqywsqyusLW0sby6tsC/u8zGxMnNx8bKx8bMyJWKiIl3eFdPTjc1NEE4OUk/Q0Y+RGBbYnh7gXd8gHmChHd+gnh3fHBxdWNnaWBiZl5iZmRoanZ0eYiDjJyVnqulpaahoJ6WoaGZpK2iq7WorcK0tsS8u8DAvrq7uru8upOAgHZkZjMtLS8rKzYxMj03OjkxOE1CSm5vcm1zeGh0d2lxdWptcGNmalhcYFFWWVBVWFVaXmdobHh0foaFj5OOl5KPloqHkI2IkpWPmKCUnqmepKympq6trKqurKuwrY96e2RYVyMiISooJzQvMTUwNDEtMTcvN0RBR2hsb2hzdWhwdGZrbWBkaFFZWkhSVEVPUkpQUlNYXWJkbXV3gIKCioKBiYKAiYCAiIWEjY2KlJaTmJyamaOhoKKfpaSiqIR1dmRYWCIiIjk1NEpCQ0lCREA6PjkzOjEsMkA/RHZ5fG12eWtwcl9kaFJbXkdRU0RPUEdNT0VOVlhdZm5weX58hYF+hn18hIB9hYOCioiGj4+LlZGOlpWRmpuTnZmSm3ZxcnFrbC8mKEU2Ol9NVGdXX2FYW1BUVjlDRzhESG13emp5enF4e291d25ucGNmaVJYWlJNVkdKUk9WXmJkbHNye317gnt5gXx5goB8hIeDjIuGj5CKk5GKkomEjIF9hXNvcXdvcDQoKzMjKk1AR2JVW3BiaG5rbm5wdGhxdGx2eXh7fYeDhZGDh2ZTWDgsMTYvNVVPV01KVE5RWFVbZGdqcHNze3h3fnt6gX58g4J+hoOAh4aCiYF9hXd1fHZ0fHNvcH1ydTw0NiIaHzsvNlRIT2FYXWxnanBvcW9ydXZ2ent7fXVvcjQzNhULEAoAAA4IBzEtMlBOVktPVlFYX2Jka21tdW5wdnV0fHZ1fHV0e3d2fnV0e3Nzem5vdm5udnFucHlwcVFERhsTGCkgJTs1O0RCR1FPU1pVWGFbX21kaHVqbkNCRiInKRAOEQUEBAYHBhwjI05GUElETlBOVltXYHdud3htd3FpcXFpcXVxeXNzenNyeXBxeW5vdmxtdW1rbHBubl5XWA8PEhgVFiUfIy4sMTk3Oz47P0hBRldPVHVqbm9naiUrLRUUGRMRFRQUHTA0O0lBSz48RERFTVhWX2dhamZeZ11ZYmxkbXFudWttdGxtdGlrcWRpbmZqb2ppaHBubnNubg8bGxAPDBUPEh4XHSQiJy8lKjcrLzo2OlBJTWxiZnBnaVhUWEVBSkRGTk5GTz43QTk0PT4+R0tJUVtUXVNKU1FNVGZdZGpiam1kbW1mbmpkbGlja2dkbG1rbG1sbHNycjs8PgoMDRALDxINEhQSGBsUGxgVHR4cICwpLUA5PUpDSFBGTlNIU0Y+STgxPDAsNTAsNjw4QUtFTUlASj49RkNDS1RSWlhXXl1aYl9bY2BcZF9cZFxcZG9tbWtqanRwcXFnaQ8RFgsJDhALDg8LEwsOGg0PGhYTGh8UHyUVIiUcJiEhKickLSEgKSMhKickLSwpMzUwOjw3PzYzOzc1PTo7QkRHTlBQV1FSWFRUWlVUW1hXXlpWYHZydHBtbnFucH10dltVWgANDwYMDwgMFAkLGAgQGhQTGx0THR8QHB4WIBoaIxscJRwdJh0dJh8gKCgmLy4rNCUlLSUoMDAsNTEvODQ7QUBDS0NGTkZIUEZIT0hKUU1KU3ZzdHBtbnBubnFwb3NxcUdHTA4SFggOEQgPEQgOEgsQFg8RHBESHBMWIBcaIxgaIxsbIxwcJR4eJyMjKyknMCAgKSAhKCgmLysqMicuNC42Ozg4Pz0+RD4+RkNCTkJBT3t3eHRwcnBub3FwbnNxcXRxclJVWA8XGggOEggOEQ0QFg8SHBETHRETHRQWIBQWIBgcIxwdJBwdJB4fJx4fJhscIx0fJh0eJiAgKCUjKy8rNDYxOjk0PTg0OzM4PjM3PoJ3eXx4eHZycnNwcHNwb3Nwb3NxcGBiYhEgHgcVFgsTGRASHRIUHRMVIBcYIhocIxsdJRweJRweJRsdJBseJSAfKCAgKB0eJh0eJiAfJyMhKDEtNjk0PDcxOjMxOS4tNoN5en57fHl0enZxdHRxcXRxcHRycHl1dm1qbi04OBEaHg8SHBETHRQWIBocIxwdJBweJhwfJh0gJx4gKB8gKB8gKB8gKB8gKB8gJx4fJh8gKCkoMDEuNzAuNiIsMiErMYV7fIN9foR9fnx4eXh1dndzdHZzcnl1dHhzdnZzclRUVxseJxMWIBYYIhgcIxwdJR0eJR0gJx8gKCAhKSEiKSEiKSEiKCEiKCEiKSEiKSEiKSEiKicmLycnLyAoLR8oLX10dn55e4N9fXp1dnh0dXh0dXdzcXVycnVxcnRubnBqcmFgaUFETSImLRocIxweJhwfJR4fKB4gKBwdJhweJh0fJyIkKyIkKiEjKiEjKh8hKCAiKCMkKiIkKiQlLCQlLGpkZW5tbHVycXRxcW9tbXBubm1samlpaGtpamxnaWtjbWZjbGFgaVxVXkI8RCQkLB8gKB8gKR8hKBweJh0eJx0fJxweJh8hKCEiKh8hKRwdJRwdJh8gKB4gKCIjKiIjKgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"><title>Vilma the Vaquita</title><style type="text/css">body { + /* background:pink; */ + /* background: #69B2FF; */ + /* background: #21AFF8; */ + /* background: #0286E8; */ + /* background: #1096EE; */ + background:black; + text-align: center; + font-size: 22px; + font-family: Helvetica; +} +.banner { + border: 5px solid white; + border: 5px solid white rgba(255,255,255,0.9); + box-shadow: 0 2px 4px blue; + margin: 1em; +} +p { + color:white; + color:rgba(255,255,255,0.9); + margin-top:0.418em; + margin-bottom:0.418em; + margin-left:auto; + margin-right:auto; + width:22em; + max-width:100%; + text-shadow: 0 1px 1px blue; +} +a { + /* + color:rgb(200,255,255); + color:rgba(200,255,255,0.9); + */ + color:white; + color:rgba(255,255,255,0.9); + text-decoration:none; + display: inline-block; + border: 1px solid white; + padding: 0 0.2em; + border-radius: 0.2em; + -moz-border-radius: 0.2em; + -webkit-border-radius: 0.2em; + -ie-border-radius: 0.2em; +} +a:hover { + background-color:rgba(20,70,180,1.0); +} +.petition { + margin:0.418em; + padding:0.618em; +} +.petition a { + font-size:127.2%; + box-shadow: 0 2px 4px blue; + margin:0.3em; +} +.page { + width: 100%; + height: 100%; + margin: 0; + border: 0; +} +.centering { + display: table; + padding: 0; +} +.centered { + display: table-cell; + vertical-align: middle; + text-align: center; +} +.inline-block { + display: inline-block; +} +.dynamic-section { + display: inline-block; + vertical-align:middle; + max-width:100%; +} +.flip-lr { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; +} +image, .pixelart { + image-rendering:optimizeSpeed; /* Legal fallback */ + image-rendering:-moz-crisp-edges; /* Firefox */ + image-rendering:-o-crisp-edges; /* Opera */ + image-rendering:-webkit-optimize-contrast; /* Safari */ + image-rendering:optimize-contrast; /* CSS3 Proposed */ + image-rendering:crisp-edges; /* CSS4 Proposed */ + image-rendering:pixelated; /* CSS4 Proposed */ + -ms-interpolation-mode:nearest-neighbor; /* IE8+ */ +} +/* +.pixelart { + image-rendering: -moz-crisp-edges; + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; + image-rendering: crisp-edges; +} +*/ +g.flipped { + transform:scale(-1,1); +} +.support-vaquitas { + opacity: 0.2; +} +.support-vaquitas:hover { + opacity: 1; +}</style></head><body><div class="centering page"><div class="centered"><svg id="sea-svgroot" width="960" height="720"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop><stop offset="25%" style="stop-color:rgb(100,200,250);stop-opacity:1"></stop><stop offset="50%" style="stop-color:rgb(0,80,240);stop-opacity:1"></stop><stop offset="75%" style="stop-color:rgb(0,0,180);stop-opacity:1"></stop><stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1"></stop></linearGradient><g id="_"><g transform="translate(-18,-15)"><image width="50" height="30" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAFWElEQVRYw+2WX0gcVxTGv7l3Zmd2drs6aHaNW7Jd88cYDaQYI1jsQ5GSh1BCAhUsNQ/JWxT6lLKExISCQkBECoW+6IMJEknaIEKQbKXJ5iFY6mKsEhOkk6qbRTe67szs7M7szvQhydKWhibEbQn1B/M2557z3e/ecy6wxRZbbLHFFv8hZ86ccYVCIe/rxkUiEXckEnFvVh3M6wZMTk7un56eHkkkEnsJIdA0DZRSuFwumKbZqSjKRHd399zL4sfHx9l4PL7TMIw5AGR4eLh0YmJi402FkFf9cXZ2tv7SpUv2zZs378fj8b2WZcE0TRDybAnTNKHr+tcOh2N2ZGTk4Iu4vr6+P22Wqqo1uVzuQSwWI4uLi5AkqfJlOdva2pj+/v7tFy5cIJviiKIort7eXlUURei6DgAwDAMOhwPZbBZPnz5FSUkJBEGAruvgOA48z8Plcj14/Pjx516vVxcEQVlZWflsx44d3clkEplMBrZtI5PJHPR4PFlK6dK5c+eSf8z76NGjytHR0eXa2tomlmUftLS0rL+RkBs3bhycn5//CQCSySSOHDkCv98Py7JAKYWu68hkMlhYWMDDhw8Rj8fhcrlg2zYMw/hZkiSNYRhKCPlAVdWCYJZlQSlFPp/v4jhOIYT8ePbs2WgikRB7enp2+ny++06nE36/v/7YsWNTb+RIOByWotHoGsuyiMViOH36NAAgn8+jo6MDtm2jv78fDMNA0zRYloV79+4hlUpBUZRnSRgGhmGgpKQEAGDbNhiGQT6fRz6fh2VZ4DgOlFIQQpDNZpFOpwEAHo8HlmXBtm2Iong1n89fDYVC3/+1TvYV7saHuVwO2WwW5eXlAACHw4HW1lbcuXMHPM/j1KlTGBoawp49exCNRtHc3AyPx4PBwUGkUinkcjmwLItkMlkQJkkSqqurwTAM5ubmkMlkYJomTNOEYRiglKK6uhqGYUCSJDyvoRXARwC+f+3LnkqlPgUAXddx9OhRiKIIlmVhWRbKysrgdrsLDk1PT0MQBFBKwXEcgsEgGOaZ6S922TAMAEB9fT14nocoimhsbIQoiuB5HoIgYNu2bdi1a1e/0+n8ZPfu3R9TSn1ra2s+TdPe6+jo+NtW/4+OpNNpORaLoaurC6ZpYnBwEMePH8fly5fR3t4OALh+/ToAgFIKy7KgqipUVUVjYyMURcHU1FTh6NTW1sLr9SKdToNhmMJXUVGBRCIBp9MJSmnHtWvXvr1y5Qr8fn9uU+ZIZ2enPT4+DgCQZRkcx2FmZgYcxxXa7vLyMu7evVvoZsFgEA0NDSCEYGNjA4QQyLIM27YLR0sQhMIMMgwDhJBveJ7/cnJy0urp6Ulv+kA8fPjwFwsLC30Mw2BoaAiBQAC6rmN0dBTr6+sQRRGlpaU4cOAATNPErVu3CgUTQlBTUwOv1wtKKTRNW2ZZNg7gt1QqtSxJ0jwh5LtcLsd7vd4Vl8uVraqqyhVlssuyLLa3t2vz8/M4f/48kskkDMMAx3EIBAJwOp3w+XyFbmOaJm7fvo2ysjJwHAfTNFFXVwdd139YXV39KhgMZgkhv3IcpzY3N2v/+hPl4sWL72ua1pvNZgcAlFNK4Xa76wghw5ZlCYqirFZWVpY8efLEcfLkybFIJAJVVV9M/4YTJ078UlFRkSnWm48pxqLhcHg/y7L3l5aWsLi4CAAIhUIMiggpxqItLS0zPp8PoiiC4zgYhoGBgQHurRMCADzPv7tv3z4cOnQI8Xh8ezgctt9KIVVVVctjY2PvpFKpMlmW12VZLqqQouP3+5m2tjbS1NREi5mHLbaQQCCA52683Y5s8X/ld5pkXmGj97LmAAAAAElFTkSuQmCC"></image></g></g><g id="_v105"><g transform="translate(-18,-15)"><image width="50" height="30" xlink:href="data:image/png;base64,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"></image></g></g><g id="twistleft"><g transform="translate(-18,-15)"><image width="50" height="30" xlink:href="data:image/png;base64,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"></image></g></g></defs><rect x="0" y="0" width="960" height="720" fill="url(#grad1)"></rect><g transform="scale(2)"><g id="sea" transform="translate(240,180)"><use xlink:href="#_"></use></g></g></svg><div><a class="support-vaquitas" target="_blank" href="index.html">Learn about Vaquitas</a></div></div></div><script type="text/javascript">gameObjects=null;</script><script type="text/javascript">(function () { + var addVaquita, downKey, getTransformMatrix, k, keyDownActions, leftKey, pressedKeys, reportErrors, rightKey, screen_x1, screen_y1, sea, svgroot, upKey, usedKeys, v, vaquitaObj, vaquitas, _j, _len1; + svgroot = document.getElementById("sea-svgroot"); + reportErrors = function(x) { + var error, error2; + try { + return x(); + } catch (_error) { + error = _error; + try { + return alert(error.toString()); + } catch (_error) { + error2 = _error; + return alert(error); + } + } + }; + screen_x1 = 240; + screen_y1 = 180; + vaquitas = []; + vaquitaObj = { + update: function(x, y) { + var m, rx, ry, s, vx, vy; + if (!window.abcd) { + window.abcd = 1; + } + vx = this.vx + Math.floor(Math.random() * 3) - 1; + vy = this.vy + Math.floor(Math.random() * 3) - 1; + x = this.x; + y = this.y; + rx = 0.5 * x / screen_x1; + ry = 0.5 * y / screen_y1; + if ((s = vx * vx + vy * vy * 2) > 6) { + vx = Math.round(vx * 0.9 + rx); + vy = Math.round(vy * 0.9 + ry); + } + this.x = x -= this.vx = vx; + this.y = y -= this.vy = vy; + if (vx > 0) { + this.scaleX = 1; + } else if (vx < 0) { + this.scaleX = -1; + } + m = this.m; + m.e = x; + m.f = y; + return m.a = this.scaleX; + } + }; + sea = document.getElementById("sea"); + v = sea.firstChild; + getTransformMatrix = function(el) { + var transformListXX, transformMatrixXX, transformXX; + transformListXX = el.transform.baseVal; + transformMatrixXX = svgroot.createSVGMatrix(); + transformXX = svgroot.createSVGTransform(); + transformXX.setMatrix(transformMatrixXX); + transformListXX.initialize(transformXX); + return transformXX.matrix; + }; + addVaquita = function() { + var angle, n, vaquita; + n = v.cloneNode(); + n.setAttribute("opacity", "0.5"); + if (Math.random(0) > 0.5) { + n.href.baseVal = "#_v105"; + } + sea.appendChild(n); + angle = Math.random() * 6.28; + vaquita = { + m: getTransformMatrix(n), + x: Math.sin(angle) * 300, + y: Math.cos(angle) * 300, + vx: 0, + vy: 0, + scaleX: 1, + __proto__: vaquitaObj + }; + vaquita.update(); + return vaquitas.push(vaquita); + }; + leftKey = 37; + upKey = 38; + rightKey = 39; + downKey = 40; + usedKeys = [leftKey, upKey, rightKey, downKey]; + keyDownActions = { + 32: addVaquita + }; + pressedKeys = {}; + for (_j = 0, _len1 = usedKeys.length; _j < _len1; _j++) { + k = usedKeys[_j]; + pressedKeys[k] = 0; + } + window.addEventListener('keydown', function(event) { + var code; + code = event.keyCode; + if (typeof keyDownActions[code] === "function") { + keyDownActions[code](event); + } + return pressedKeys[code] = 1; + }); + window.addEventListener('keyup', function(event) { + return pressedKeys[event.keyCode] = 0; + }); + return (function(x, y) { + return reportErrors(function() { + var ax, ay, currentFrame, gameFrame, scaleX, scaleY, time, transformMatrix, vx, vy; + time = 0; + vx = 0; + vy = 0; + ax = 0; + ay = 0; + scaleX = 1; + scaleY = 1; + window.cf = currentFrame = v.href; + transformMatrix = getTransformMatrix(v); + transformMatrix.a = scaleX; + transformMatrix.e = x; + transformMatrix.f = y; + gameFrame = function() { + return reportErrors(function() { + var vq, _k, _len2; + if ((time & 0xff) === 0x00 && vaquitas.length < 4) { + addVaquita(); + } + x -= vx = pressedKeys[leftKey] - pressedKeys[rightKey]; + y -= pressedKeys[upKey] - pressedKeys[downKey]; + if (vx > 0) { + scaleX = 1; + } else if (vx < 0) { + scaleX = -1; + } + transformMatrix.a = scaleX; + transformMatrix.e = x; + transformMatrix.f = y; + if ((time % 3) === 0) { + if (currentFrame.baseVal === "#twistleft") { + currentFrame.baseVal = "#_"; + } else if (vx !== 0) { + currentFrame.baseVal = "#twistleft"; + } + } + for (_k = 0, _len2 = vaquitas.length; _k < _len2; _k++) { + vq = vaquitas[_k]; + vq.update(); + } + return time++; + }); + }; + return setInterval(gameFrame, 40); + }); + })(0, 0); + })(); +</script></body></html>
\ No newline at end of file diff --git a/game-debug.html.coffee b/game-debug.html.coffee new file mode 100644 index 0000000..eb3ad07 --- /dev/null +++ b/game-debug.html.coffee @@ -0,0 +1,314 @@ +# Copyright (c) 2013, 2014 Michele Bini + +# This program is free software: you can redistribute it and/or modify +# it under the terms of the version 3 of the GNU General Public License +# as published by the Free Software Foundation. + +# This program is distributed in the hope that it will be useful, but +# WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +# General Public License for more details. + +# You should have received a copy of the GNU General Public License +# along with this program. If not, see <http://www.gnu.org/licenses/>. + +{ htmlcup } = require 'htmlcup' + +htmlcup[x] = htmlcup.compileTag x for x in [ "svg", "rect", "g", "ellipse", "polygon", "line", "image", "defs", "linearGradient", "stop", "use" ] + +title = "Vilma the Vaquita" + +fs = require 'fs' + +datauri = (t, x)-> "data:#{t};base64,#{new Buffer(fs.readFileSync(x)).toString("base64")}" +datauripng = (x)-> datauri "image/png", x +datauriicon = (x)-> datauri "image/x-icon", x + +icon = datauriicon "vaquita.ico" +pixyvaquita = datauripng "pixyvaquita_v2.png" +pixyvaquita_v105 = datauripng "pixyvaquita_v105_v.png" +frames = + _: pixyvaquita + _v105: pixyvaquita_v105 + twistleft: datauripng "pixyvaquita_v2_twistleft.png" + +useSvg = true + +genPage = -> + htmlcup.html5Page -> + @head -> + @meta charset:"utf-8" + @link rel:"shortcut icon", href:icon + @title title + @style type: "text/css", + """ + body { + /* background:pink; */ + /* background: #69B2FF; */ + /* background: #21AFF8; */ + /* background: #0286E8; */ + /* background: #1096EE; */ + background:black; + text-align: center; + font-size: 22px; + font-family: Helvetica; + } + .banner { + border: 5px solid white; + border: 5px solid white rgba(255,255,255,0.9); + box-shadow: 0 2px 4px blue; + margin: 1em; + } + p { + color:white; + color:rgba(255,255,255,0.9); + margin-top:0.418em; + margin-bottom:0.418em; + margin-left:auto; + margin-right:auto; + width:22em; + max-width:100%; + text-shadow: 0 1px 1px blue; + } + a { + /* + color:rgb(200,255,255); + color:rgba(200,255,255,0.9); + */ + color:white; + color:rgba(255,255,255,0.9); + text-decoration:none; + display: inline-block; + border: 1px solid white; + padding: 0 0.2em; + border-radius: 0.2em; + -moz-border-radius: 0.2em; + -webkit-border-radius: 0.2em; + -ie-border-radius: 0.2em; + } + a:hover { + background-color:rgba(20,70,180,1.0); + } + .petition { + margin:0.418em; + padding:0.618em; + } + .petition a { + font-size:127.2%; + box-shadow: 0 2px 4px blue; + margin:0.3em; + } + .page { + width: 100%; + height: 100%; + margin: 0; + border: 0; + } + .centering { + display: table; + padding: 0; + } + .centered { + display: table-cell; + vertical-align: middle; + text-align: center; + } + .inline-block { + display: inline-block; + } + .dynamic-section { + display: inline-block; + vertical-align:middle; + max-width:100%; + } + .flip-lr { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; + } + image, .pixelart { + image-rendering:optimizeSpeed; /* Legal fallback */ + image-rendering:-moz-crisp-edges; /* Firefox */ + image-rendering:-o-crisp-edges; /* Opera */ + image-rendering:-webkit-optimize-contrast; /* Safari */ + image-rendering:optimize-contrast; /* CSS3 Proposed */ + image-rendering:crisp-edges; /* CSS4 Proposed */ + image-rendering:pixelated; /* CSS4 Proposed */ + -ms-interpolation-mode:nearest-neighbor; /* IE8+ */ + } + /* + .pixelart { + image-rendering: -moz-crisp-edges; + -ms-interpolation-mode: nearest-neighbor; + image-rendering: pixelated; + image-rendering: crisp-edges; + } + */ + g.flipped { + transform:scale(-1,1); + } + .support-vaquitas { + opacity: 0.2; + } + .support-vaquitas:hover { + opacity: 1; + } + """ + @body -> + @div class:"centering page", -> + @div class:"centered", -> + if useSvg + @svg id:"sea-svgroot", width:"960", height:"720", -> + @defs -> + @linearGradient id:"grad1", x1:"0%", y1:"0%", x2:"0%", y2:"100%", -> + @stop offset:"0%", style:"stop-color:rgb(255,255,255);stop-opacity:1" + @stop offset:"25%", style:"stop-color:rgb(100,200,250);stop-opacity:1" + @stop offset:"50%", style:"stop-color:rgb(0,80,240);stop-opacity:1" + @stop offset:"75%", style:"stop-color:rgb(0,0,180);stop-opacity:1" + @stop offset:"100%", style:"stop-color:rgb(0,0,0);stop-opacity:1" + for k,v of frames + @g id:k, -> + @g transform:"translate(-18,-15)", -> + @image width:"50", height:"30", "xlink:href":v + @rect x:"0", y:"0", width:"960", height:"720", fill:"url(#grad1)" + @g transform:"scale(2)", -> + @g id:"sea", transform:"translate(240,180)", -> + @use "xlink:href":"#_" + else + @canvas width:"960", height:"720", -> + @div -> @a class:"support-vaquitas", target:"_blank", href:"index.html", "Learn about Vaquitas" + gameObjects = null + @script type:"text/javascript", "gameObjects=#{JSON.stringify(gameObjects)};" + @coffeeScript -> + svgroot = document.getElementById("sea-svgroot") + + reportErrors = (x)-> + try + x() + catch error + try + alert error.toString() + catch error2 + alert error + + screen_x1 = 240 + screen_y1 = 180 + vaquitas = [ ] + vaquitaObj = + update: (x, y)-> + if !window.abcd + window.abcd = 1 + vx = @vx + Math.floor(Math.random()*3) - 1 + vy = @vy + Math.floor(Math.random()*3) - 1 + x = @x + y = @y + rx = 0.5 * x / screen_x1 + ry = 0.5 * y / screen_y1 + if (s = vx * vx + vy * vy * 2) > 6 + vx = Math.round(vx * 0.9 + rx) + vy = Math.round(vy * 0.9 + ry) + @x = x -= @vx = vx + @y = y -= @vy = vy + if vx > 0 + @scaleX = 1 + else if vx < 0 + @scaleX = -1 + # @e.setAttribute "transform", "translate(#{x}, #{y}) scale(#{@scaleX}, 1)" + m = @m; m.e = x; m.f = y; m.a = @scaleX + sea = document.getElementById "sea" + v = sea.firstChild + + getTransformMatrix = (el)-> + transformListXX = el.transform.baseVal + transformMatrixXX = svgroot.createSVGMatrix() + transformXX = svgroot.createSVGTransform() + transformXX.setMatrix(transformMatrixXX) + transformListXX.initialize(transformXX) + transformXX.matrix + + addVaquita = -> + n = v.cloneNode() + n.setAttribute "opacity", "0.5" + n.href.baseVal = "#_v105" if Math.random(0) > 0.5 + # n.setAttribute "transform", "" + sea.appendChild n + angle = Math.random() * 6.28 + vaquita = + # e: n + m: getTransformMatrix(n) + x: Math.sin(angle) * 300 + y: Math.cos(angle) * 300 + vx: 0 + vy: 0 + scaleX: 1 + __proto__: vaquitaObj + vaquita.update() + vaquitas.push vaquita + + leftKey = 37 + upKey = 38 + rightKey = 39 + downKey = 40 + usedKeys = [ leftKey, upKey, rightKey, downKey ] + + keyDownActions = + 32: addVaquita + + pressedKeys = { } + pressedKeys[k] = 0 for k in usedKeys + + window.addEventListener 'keydown', (event)-> + code = event.keyCode + keyDownActions[ code ]?(event) + pressedKeys[ code ] = 1 + window.addEventListener 'keyup', (event)-> + pressedKeys[ event.keyCode ] = 0 + + do (x = 0, y = 0)-> reportErrors -> + time = 0 + vx = 0 + vy = 0 + ax = 0 + ay = 0 + # s = 1 + # x = 0 + # y = 0 + scaleX = 1 + scaleY = 1 + + window.cf = currentFrame = v.href + transformMatrix = getTransformMatrix(v) + transformMatrix.a = scaleX + transformMatrix.e = x + transformMatrix.f = y + + gameFrame = -> reportErrors -> + if (time & 0xff) is 0x00 and vaquitas.length < 4 + addVaquita() + # s += 0.001 + x -= vx = pressedKeys[leftKey] - pressedKeys[rightKey] + y -= pressedKeys[upKey] - pressedKeys[downKey] + if vx > 0 + scaleX = 1 + else if vx < 0 + scaleX = -1 + # v.setAttribute("transform", "translate(#{x}, #{y}) scale(#{scaleX}, #{scaleY})") + # transform = v.transform.baseVal.getItem(0) + transformMatrix.a = scaleX + transformMatrix.e = x + transformMatrix.f = y + if (time % 3) is 0 + if currentFrame.baseVal is "#twistleft" + currentFrame .baseVal = "#_" + else if vx isnt 0 + currentFrame.baseVal = "#twistleft" + # transformList.initialize(transform) + vq.update() for vq in vaquitas + time++ + + setInterval gameFrame, 40 + +genPage() |