Commit 14f5ce73 authored by Evan Hahn's avatar Evan Hahn

Initial work on spreadsheet idea

parent 63ef27ab
/*
* a = canvas
* b = body
* c = context
* d = document (?)
* e = array of entities (functions that are called)
* f = pressing Left?
* g = pressing Right?
* h = pressing Stop?
* i = used instead of `icon` in a function
* j = player speed
* k = player direction
* l = last tick time
* m = player X
* n = player Y
* q = tick function
* r = scalar relative to screen size
* s = ∆t
* u = item constructor
* y = stats
* z = scoreboard
* c = columns
* d = re-render
* r = rows
* t = <table>
* p = data types
*/
/* eslint-disable no-undef, no-return-assign, no-implied-eval */
/* eslint-disable no-undef */
// Initial setup
// Data types
c.textAlign = 'center'
c.textBaseline = 'middle'
c.font = b.style.font = '3vh sans-serif'
y = [
['#fd0', '$', 0, 1, 0],
['#8fd', '>', (r = Math.min(a.width, a.height) / 30) / 4, r / 5, 0],
['#f64', '+', 1, r / 100, 0],
['#8f0', '↺', 3, 0.5, 0],
['#ccc', '⧖', 60, 5, 60]
p = [
['text', String],
['number', parseFloat],
['int', parseInt]
]
// The stats element
// Initial data
b.appendChild(z = document.createElement('b'))
z.style.position = 'absolute'
z.style.margin = '1vh'
z.style.fontSize = '4vh'
// The player
m = a.width / 2
n = a.height / 2
j = k = f = g = h = z.style.top = 0
onkeydown = event => {
if (event.keyCode === 32) { h = 1 }
if (event.keyCode === 37) { f = 1 }
if (event.keyCode === 39) { g = 1 }
}
onkeyup = event => {
if (event.keyCode === 32) {
h = 0
j += r / 2
}
if (event.keyCode === 37) { f = 0 }
if (event.keyCode === 39) { g = 0 }
}
// Item
u = (type, itemX, itemY, me) => (
me = _ => {
[c.fillStyle, i] = y[type]
c.beginPath()
c.arc(itemX, itemY, r, 0, 7)
c.fill()
c.fillStyle = '#000'
c.fillText(i, itemX, itemY)
// This checks for distance to the player (taking its size into account)
if ((((itemX - m) ** 2) +
((itemY - n) ** 2)) <
((r * y[2][2]) ** 2)) {
y[type][2] += y[type][3]
y[type][4] += type === 4 ? y[type][3] : 1
e.splice(e.indexOf(me), 1)
}
}
)
// Define the list of entities, starting with a player and a powerup
e = [
_ => {
// y[3][2] === turn speed
k += ((g * y[3][2]) - (f * y[3][2])) * s
if (h) {
j = Math.max(0, j - 100 * s)
} else {
// y[1][2] === top speed
j = Math.min(y[1][2], j + 3 * s)
}
m = (m + (Math.cos(k) * j * r * s)) % a.width
n = (n + (Math.sin(k) * j * r * s)) % a.height
if (m < 0) { m += a.width }
if (n < 0) { n += a.height }
c.fillStyle = '#f19'
c.translate(m, n)
c.rotate(k)
c.beginPath()
// y[2][2] === size
c.moveTo(-r * y[2][2], -r * y[2][2])
c.lineTo(r * y[2][2], 0)
c.lineTo(-r * y[2][2], r * y[2][2])
c.fill()
c.setTransform(1, 0, 0, 1, 0, 0)
},
u(0, Math.random() * a.width, Math.random() * a.height)
c = [
['Minute', p[2]],
['Price', p[2]]
]
r = Array(10).fill(0).map((_, index) => ([
index + 1,
Math.random() * 1000
]))
// Tick function
// Initial render
l = 0
requestAnimationFrame(q = (currentTime) => {
s = (l ? currentTime - l : 0) / 1000
l = currentTime
document.head.innerHTML += '<style>td,th{padding:1em;border:1px solid #000}.b{cursor:pointer;background:#ddf}</style>'
if (Math.random() < 0.007) {
e.push(u(
new Date() % 5,
Math.random() * a.width,
Math.random() * a.height
))
}
b.innerHTML += '<table id=t style="font-family:sans-serif;border-collapse:collapse">'
c.fillStyle = '#000'
c.fillRect(0, 0, a.width, a.height)
// Re-render
e.map(entity => entity())
;(d = () => {
let head = document.createElement('tr')
c.map((column) => {
head.innerHTML += `<th>${column[0]} (${column[1][0]})`
})
head.innerHTML += '<th class=b>+'
if (y[4][2] < 0) {
z.innerHTML = `Game over! Score: ${y[0][2]}¢`
} else {
z.innerHTML = y.map(stat => (
`<font color=${stat[0]}>${stat[1]} ${stat[4]}`
)).join(' ')
t.innerHTML = ''
t.appendChild(head)
requestAnimationFrame(q)
}
})
// Less and less time
r.map((row, index) => {
let rowEl = document.createElement('tr')
row.map((cellValue, columnIndex) => {
rowEl.innerHTML += `<td>${c[columnIndex][1][1](cellValue)}`
})
if (!index) {
rowEl.innerHTML += `<td rowspan=${r.length}>`
}
t.appendChild(rowEl)
})
setInterval('y[4][2]--;y[4][4]--', 1000)
t.innerHTML += `<tr><th class=b colspan=${c.length}>+</th><td>`
})()
......@@ -117,7 +117,7 @@
// submission form configurables:
// enable canvas shim at all? (2d/3d). other settings are ignored if this is false.
var TOKEN_CANVAS_SHIM = true;
var TOKEN_CANVAS_SHIM = false;
// true enables webgl shim (exposes `g`), false enables canvas shim (exposes `c`)
var TOKEN_WEBGL = false;
// px, 0 means always 100%
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment