ES6 Solitaire Win
https://mrdoob.com/lab/javascript/effects/solitaire/
by MegaScience
HTML
<div id="info">click and win!</div>
<canvas id="canvas"></canvas>
CSS
html {
height: 100%;
}
body {
background-color: #008000;
color: #ffffff;
margin: 0;
height: 100%;
cursor: pointer;
touch-action: none;
}
div#info {
position: absolute;
top: 10px;
width: 100%;
font-family: monospace;
text-align: center;
}
canvas#canvas {
position: absolute;
display: block;
image-rendering: pixelated;
width: 100%;
height: 100%;
}
JavaScript
class coreManagerClass {
static dpr = window.devicePixelRatio
static canvas = document.getElementById('canvas')
//static debug = true
setCanvasScale() {
//customLog.debug('Updating canvas height/width...')
this.constructor.canvas.width = window.innerWidth * this.constructor.dpr
this.constructor.canvas.height = window.innerHeight * this.constructor.dpr
}
throwCard(cardXCoord, cardYCoord) {
//customLog.debug('Placing card...')
new cardManagerClass(
cardXCoord,
cardYCoord,
// Number between 2 and 7 times 1 or -1 (so 2 through 7 or -7 through -2)
Math.min(7, Math.max(Math.floor(Math.random() * 6), 2)) * (Math.round(Math.random()) ? 1 : -1),
- Math.random() * 16
)
}
constructor() {
//customLog.log('Initializing...')
// Initialize the height and width values of the canvas
this.setCanvasScale()
// Have it update if the UI is resized.
window.addEventListener('resize', () => this.setCanvasScale())
// Using Pointer events instead of click allows this to work with mobile setups.
// Add a card if pointer pressed.
document.addEventListener('pointerdown', ({ clientX, clientY }) => this.throwCard(clientX * this.constructor.dpr, clientY * this.constructor.dpr))
// Add card if the cursor moves while pressed.
document.addEventListener('pointermove', ({ pressure, clientX, clientY }) => pressure !== 0 ? this.throwCard(clientX * this.constructor.dpr, clientY * this.constructor.dpr) : false)
//customLog.debug('Starting loop.')
// Begin cycle.
//requestAnimationFrame(() => cardManagerClass.updateCards())
/*if (this.constructor.debug) this.constructor.canvas.addEventListener('contextmenu', e => {
customLog.debug('Disabling due to Right-Click in debug mode:', e)
cardManagerClass.updateCards = () => { }
...