diff --git a/README.md b/README.md index f612b37..672049a 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ Simple JS platformer to modify and extend. - [x] Die properties werden als Array exportiert. Da brauche ich in der setup Funktion noch eine Function um die zu Konviertieren. - [x] Globales Objekt bauen mit einem einzigen Wert ("life = 3" z.B.), den ich immer Anzeige und der über die Level hinaus bestehen bleibt. -- [ ] fix Frame Rate on Mobile () +- [ ] fix Frame Rate on Mobile (). Das ist möglicherweise nur mit WebGL möglich. - [ ] Gravity Variable für verschiedene Umgebungen (Land, Wasser, Space) - [ ] Verschiedene Biomes @@ -48,6 +48,7 @@ Simple JS platformer to modify and extend. - [ ] Forest World - [ ] Techno World +- [ ] Getters und Setters auswerfen und entsprechend umbauen (siehe ) - [ ] Fix Scaling bei verschiedenen Level-Größen (protrait ist broken) ### Welche Assets nutze ich diff --git a/docs/roadmap.md b/docs/roadmap.md index 16d8ad3..41ab537 100644 --- a/docs/roadmap.md +++ b/docs/roadmap.md @@ -20,7 +20,7 @@ - Swimming with depleting oxygen - 1 vehicle -- Winning condition +- Winning condition (Item X einsammeln und zu Punkt Y bringen. Damit kann ich auch alle möglichen anderen conditions abbilden, z.B. verschlossene Türen öffnen, Raumschiff mit Ersatzteilen reparieren etc.) ## Biomes & Levelsetups diff --git a/fpsmeter.min.js b/fpsmeter.min.js index 481da37..f0b454b 100644 --- a/fpsmeter.min.js +++ b/fpsmeter.min.js @@ -1,15 +1,443 @@ /*! FPSMeter 0.3.1 - 9th May 2013 | https://github.com/Darsain/fpsmeter */ -(function(m,j){function s(a,e){for(var g in e)try{a.style[g]=e[g]}catch(j){}return a}function H(a){return null==a?String(a):"object"===typeof a||"function"===typeof a?Object.prototype.toString.call(a).match(/\s([a-z]+)/i)[1].toLowerCase()||"object":typeof a}function R(a,e){if("array"!==H(e))return-1;if(e.indexOf)return e.indexOf(a);for(var g=0,j=e.length;gd.interval?(x=M(k),m()):(x=setTimeout(k,d.interval),P=M(m))}function G(a){a=a||window.event;a.preventDefault?(a.preventDefault(),a.stopPropagation()):(a.returnValue= -!1,a.cancelBubble=!0);b.toggle()}function U(){d.toggleOn&&S(f.container,d.toggleOn,G,1);a.removeChild(f.container)}function V(){f.container&&U();h=D.theme[d.theme];y=h.compiledHeatmaps||[];if(!y.length&&h.heatmaps.length){for(p=0;p=m?m*(1+j):m+j-m*j;0===l?g="#000":(t=2*m-l,k=(l-t)/l,g*=6,n=Math.floor(g), -v=g-n,v*=l*k,0===n||6===n?(n=l,k=t+v,l=t):1===n?(n=l-v,k=l,l=t):2===n?(n=t,k=l,l=t+v):3===n?(n=t,k=l-v):4===n?(n=t+v,k=t):(n=l,k=t,l-=v),g="#"+N(n)+N(k)+N(l));b[e]=g}}h.compiledHeatmaps=y}f.container=s(document.createElement("div"),h.container);f.count=f.container.appendChild(s(document.createElement("div"),h.count));f.legend=f.container.appendChild(s(document.createElement("div"),h.legend));f.graph=d.graph?f.container.appendChild(s(document.createElement("div"),h.graph)):0;w.length=0;for(var q in f)f[q]&& -h[q].heatOn&&w.push({name:q,el:f[q]});u.length=0;if(f.graph){f.graph.style.width=d.history*h.column.width+(d.history-1)*h.column.spacing+"px";for(c=0;c d.interval + ? ((x = M(k)), m()) + : ((x = setTimeout(k, d.interval)), (P = M(m))) + } + function G(a) { + a = a || window.event + a.preventDefault + ? (a.preventDefault(), a.stopPropagation()) + : ((a.returnValue = !1), (a.cancelBubble = !0)) + b.toggle() + } + function U() { + d.toggleOn && S(f.container, d.toggleOn, G, 1) + a.removeChild(f.container) + } + function V() { + f.container && U() + h = D.theme[d.theme] + y = h.compiledHeatmaps || [] + if (!y.length && h.heatmaps.length) { + for (p = 0; p < h.heatmaps.length; p++) { + y[p] = [] + for (c = 0; c <= J; c++) { + var b = y[p], + e = c, + g + g = (0.33 / J) * c + var j = h.heatmaps[p].saturation, + m = h.heatmaps[p].lightness, + n = void 0, + k = void 0, + l = void 0, + t = (l = void 0), + v = (n = k = void 0), + v = void 0, + l = 0.5 >= m ? m * (1 + j) : m + j - m * j + 0 === l + ? (g = '#000') + : ((t = 2 * m - l), + (k = (l - t) / l), + (g *= 6), + (n = Math.floor(g)), + (v = g - n), + (v *= l * k), + 0 === n || 6 === n + ? ((n = l), (k = t + v), (l = t)) + : 1 === n + ? ((n = l - v), (k = l), (l = t)) + : 2 === n + ? ((n = t), (k = l), (l = t + v)) + : 3 === n + ? ((n = t), (k = l - v)) + : 4 === n + ? ((n = t + v), (k = t)) + : ((n = l), (k = t), (l -= v)), + (g = '#' + N(n) + N(k) + N(l))) + b[e] = g + } + } + h.compiledHeatmaps = y + } + f.container = s(document.createElement('div'), h.container) + f.count = f.container.appendChild( + s(document.createElement('div'), h.count) + ) + f.legend = f.container.appendChild( + s(document.createElement('div'), h.legend) + ) + f.graph = d.graph + ? f.container.appendChild(s(document.createElement('div'), h.graph)) + : 0 + w.length = 0 + for (var q in f) f[q] && h[q].heatOn && w.push({ name: q, el: f[q] }) + u.length = 0 + if (f.graph) { + f.graph.style.width = + d.history * h.column.width + (d.history - 1) * h.column.spacing + 'px' + for (c = 0; c < d.history; c++) + (u[c] = f.graph.appendChild( + s(document.createElement('div'), h.column) + )), + (u[c].style.position = 'absolute'), + (u[c].style.bottom = 0), + (u[c].style.right = + c * h.column.width + c * h.column.spacing + 'px'), + (u[c].style.width = h.column.width + 'px'), + (u[c].style.height = '0px') + } + s(f.container, d) + r() + a.appendChild(f.container) + f.graph && (O = f.graph.clientHeight) + d.toggleOn && + ('click' === d.toggleOn && (f.container.style.cursor = 'pointer'), + S(f.container, d.toggleOn, G)) + } + 'object' === H(a) && a.nodeType === j && ((e = a), (a = document.body)) + a || (a = document.body) + var b = this, + d = I({}, D.defaults, e || {}), + f = {}, + u = [], + h, + y, + J = 100, + w = [], + W = 0, + B = d.threshold, + Q = 0, + L = A() - B, + z, + E = [], + F = [], + x, + P, + q = 'fps' === d.show, + O, + K, + c, + p + b.options = d + b.fps = 0 + b.duration = 0 + b.isPaused = 0 + b.tickStart = function () { + Q = A() + } + b.tick = function () { + z = A() + W = z - L + B += (W - B) / d.smoothing + b.fps = 1e3 / B + b.duration = Q < L ? B : z - Q + L = z + } + b.pause = function () { + x && ((b.isPaused = 1), clearTimeout(x), C(x), C(P), (x = P = 0)) + return b + } + b.resume = function () { + x || ((b.isPaused = 0), k()) + return b + } + b.set = function (a, c) { + d[a] = c + q = 'fps' === d.show + ;-1 !== R(a, X) && V() + ;-1 !== R(a, Y) && s(f.container, d) + return b + } + b.showDuration = function () { + b.set('show', 'ms') + return b + } + b.showFps = function () { + b.set('show', 'fps') + return b + } + b.toggle = function () { + b.set('show', q ? 'ms' : 'fps') + return b + } + b.hide = function () { + b.pause() + f.container.style.display = 'none' + return b + } + b.show = function () { + b.resume() + f.container.style.display = 'block' + return b + } + b.destroy = function () { + b.pause() + U() + b.tick = b.tickStart = function () {} + } + V() + k() + } + var A, + r = m.performance + A = + r && (r.now || r.webkitNow) + ? r[r.now ? 'now' : 'webkitNow'].bind(r) + : function () { + return +new Date() + } + for ( + var C = m.cancelAnimationFrame || m.cancelRequestAnimationFrame, + M = m.requestAnimationFrame, + r = ['moz', 'webkit', 'o'], + G = 0, + k = 0, + Z = r.length; + k < Z && !C; + ++k + ) + M = + (C = + m[r[k] + 'CancelAnimationFrame'] || + m[r[k] + 'CancelRequestAnimationFrame']) && + m[r[k] + 'RequestAnimationFrame'] + C || + ((M = function (a) { + var e = A(), + g = Math.max(0, 16 - (e - G)) + G = e + g + return m.setTimeout(function () { + a(e + g) + }, g) + }), + (C = function (a) { + clearTimeout(a) + })) + var T = + 'string' === H(document.createElement('div').textContent) + ? 'textContent' + : 'innerText' + D.extend = I + window.FPSMeter = D + D.defaults = { + interval: 100, + smoothing: 10, + show: 'fps', + toggleOn: 'click', + decimals: 1, + maxFps: 60, + threshold: 100, + position: 'absolute', + zIndex: 10, + left: '5px', + top: '5px', + right: 'auto', + bottom: 'auto', + margin: '0 0 0 0', + theme: 'dark', + heat: 0, + graph: 0, + history: 20, + } + var X = ['toggleOn', 'theme', 'heat', 'graph', 'history'], + Y = 'position zIndex left top right bottom margin'.split(' ') +})(window) +;(function (m, j) { + j.theme = {} + var s = (j.theme.base = { + heatmaps: [], + container: { + heatOn: null, + heatmap: null, + padding: '5px', + minWidth: '95px', + height: '30px', + lineHeight: '30px', + textAlign: 'right', + textShadow: 'none', + }, + count: { + heatOn: null, + heatmap: null, + position: 'absolute', + top: 0, + right: 0, + padding: '5px 10px', + height: '30px', + fontSize: '24px', + fontFamily: 'Consolas, Andale Mono, monospace', + zIndex: 2, + }, + legend: { + heatOn: null, + heatmap: null, + position: 'absolute', + top: 0, + left: 0, + padding: '5px 10px', + height: '30px', + fontSize: '12px', + lineHeight: '32px', + fontFamily: 'sans-serif', + textAlign: 'left', + zIndex: 2, + }, + graph: { + heatOn: null, + heatmap: null, + position: 'relative', + boxSizing: 'padding-box', + MozBoxSizing: 'padding-box', + height: '100%', + zIndex: 1, + }, + column: { width: 4, spacing: 1, heatOn: null, heatmap: null }, + }) + j.theme.dark = j.extend({}, s, { + heatmaps: [{ saturation: 0.8, lightness: 0.8 }], + container: { + background: '#222', + color: '#fff', + border: '1px solid #1a1a1a', + textShadow: '1px 1px 0 #222', + }, + count: { heatOn: 'color' }, + column: { background: '#3f3f3f' }, + }) + j.theme.light = j.extend({}, s, { + heatmaps: [{ saturation: 0.5, lightness: 0.5 }], + container: { + color: '#666', + background: '#fff', + textShadow: + '1px 1px 0 rgba(255,255,255,.5), -1px -1px 0 rgba(255,255,255,.5)', + boxShadow: '0 0 0 1px rgba(0,0,0,.1)', + }, + count: { heatOn: 'color' }, + column: { background: '#eaeaea' }, + }) + j.theme.colorful = j.extend({}, s, { + heatmaps: [{ saturation: 0.5, lightness: 0.6 }], + container: { + heatOn: 'backgroundColor', + background: '#888', + color: '#fff', + textShadow: '1px 1px 0 rgba(0,0,0,.2)', + boxShadow: '0 0 0 1px rgba(0,0,0,.1)', + }, + column: { background: '#777', backgroundColor: 'rgba(0,0,0,.2)' }, + }) + j.theme.transparent = j.extend({}, s, { + heatmaps: [{ saturation: 0.8, lightness: 0.5 }], + container: { + padding: 0, + color: '#fff', + textShadow: '1px 1px 0 rgba(0,0,0,.5)', + }, + count: { padding: '0 5px', height: '40px', lineHeight: '40px' }, + legend: { padding: '0 5px', height: '40px', lineHeight: '42px' }, + graph: { height: '40px' }, + column: { + width: 5, + background: '#999', + heatOn: 'backgroundColor', + opacity: 0.5, + }, + }) +})(window, FPSMeter) diff --git a/js/input.js b/js/input.js index c6976fd..74e59c1 100644 --- a/js/input.js +++ b/js/input.js @@ -16,34 +16,28 @@ function onkey(ev, key, down) { return false case KEY.X: player.jump = down - // console.log('log Key X') shouldPanCameraDown({ canvas, cameraWithBox }) ev.preventDefault() return false case KEY.Y: - console.log('log shoot') // player.shooting = down shoot(player) ev.preventDefault() return false case KEY.UP: - console.log('log Key Up') player.up = down shouldPanCameraDown({ canvas, cameraWithBox }) ev.preventDefault() return false case KEY.DOWN: - console.log('log Key Down') player.down = down ev.preventDefault() return false case KEY.ENTER: - console.log('log Key Enter') player.interact = down ev.preventDefault() return false case KEY.SPACE: - console.log('log Key Space') ev.preventDefault() return false } diff --git a/js/main.js b/js/main.js index 00f33ee..c5fd224 100644 --- a/js/main.js +++ b/js/main.js @@ -193,7 +193,7 @@ function main() { // ! Vielleicht kann ich statt des setup() an dieser Stelle auch eine gameStart() Funktion erstellen, die beim erstmaligen Start alles erledigt. Später wird dann ja immer die _initLevel() aufgerufen. setup(currentLevel.levelData) // ! Was brauche ich hier, damit das variabel alle Level laden kann? - console.log('log monsters ', monsters) + //console.log('log monsters ', monsters) frame() } diff --git a/js/render.js b/js/render.js index 8c1d881..0f42330 100644 --- a/js/render.js +++ b/js/render.js @@ -367,7 +367,7 @@ function renderBullets(ctx, spriteAtlas, dt, frame) { ctx.fillRect(bullet.x, bullet.y, ammoType.width, ammoType.height) } if (bullet.sprites !== undefined) { - console.log('log bullet entity ', bullet) + // console.log('log bullet entity ', bullet) drawSprite(bullet, spriteAtlas, dt, frame) } } diff --git a/js/setup.js b/js/setup.js index 44178b1..396fc6f 100644 --- a/js/setup.js +++ b/js/setup.js @@ -107,7 +107,7 @@ function setupEntity(obj, entityType, entityProperties, entityName) { ? entityTemplate?.currentHitpoints : 1 - console.log('log entity ', player) + // console.log('log entity ', player) var entity = {} entity.x = obj.x diff --git a/js/update.js b/js/update.js index eb1b764..fc1c1ee 100644 --- a/js/update.js +++ b/js/update.js @@ -27,7 +27,7 @@ function updateMonsters(dt) { } function updateMonster(monster, dt) { - monster.slimeMonster && console.log('log monster ', monster) + // monster.slimeMonster && console.log('log monster ', monster) if (!monster.dead) { updateEntity(monster, dt) if ( @@ -305,7 +305,7 @@ function reduceHitpoints(entity, damage, timeout) { } function killEntity(entity) { - console.log('killEntity: ', entity) + // console.log('killEntity: ', entity) if (entity.player === true) { killPlayer(entity) } @@ -322,7 +322,7 @@ function killPlayer(player) { globalObject.hitpoints = player.maxHitpoints globalObject.oxygen = globalObject.maxOxygen globalObject.lifes-- - console.log('log globalObject: ', globalObject.lifes) + // console.log('log globalObject: ', globalObject.lifes) } function collectTreasure(t) { diff --git a/js/utils.js b/js/utils.js index 4460b72..2e0d288 100644 --- a/js/utils.js +++ b/js/utils.js @@ -67,7 +67,7 @@ function music(src, volume) { // * Pause function function togglePause() { - console.log('log togglePause', paused) + // console.log('log togglePause', paused) if (!paused) { paused = true } else if (paused) {