Mario Mini-game Concept

https://www.reddit.com/r/webdev/comments/54icci/resources_for_creating_a_picture_line_up_type/

by alexb

HTML

<canvas> </canvas>
<p>There's no interaction; don't bother clicking and pressing space to try and stop it.</p>

CSS

html {
  background: white;
}
canvas {
  height: 300px;
  width: 300px;
}
p {
  width: 300px;
}

Babel + JSX

// URLs to load as bitmap data
// Game will automatically adjust to no. of images
var images = [
	'http://www.cliparts101.com/files/635/EF43C164968834EA6A942053CF6FA651/apple.png',
	'http://cliparting.com/wp-content/uploads/2016/05/Basketball-clipart-free-clipart-images.png',
	'http://cliparting.com/wp-content/uploads/2016/07/Sunshine-animated-sun-clipart-clipart.gif',
];

var canvas;        // Canvas HTML element
var ctx;           // 2D context for canvas
var bitmaps;       // Array of BitmapImage data
var n;             // No. of bitmaps
var speed = 0.001; // Speed of row animation

// Returns Promise of an ImageBitmap
function loadImage(src) {
	return new Promise(function(resolve, reject) {
    var img = new Image();
    img.onerror = reject;
    img.onload = function() {
    	var bmp = createImageBitmap(img);
    	resolve(bmp);
    }
    img.src = src;
  });
}

// Called once
function init() {
  canvas = document.querySelector('canvas');
	ctx = canvas.getContext('2d');
  
  Promise
    .all(images.map(loadImage))
  	.then(function(bitmapImages) {
    	bitmaps = bitmapImages;
      n = bitmaps.length;
      
    	window.requestAnimationFrame(render);
    });
}

// Called every frame
function render(delta) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
	for (var i = 0; i < n; i++) {
		for (var j = 0; j < n; j++) {
      // +1 to scroll right or -1 to scroll left
    	var dir = Math.pow(-1, i);
      // Make lower rows spin a bit faster
      var rowSpeed = speed * (1 + 0.1*i);
      // This is a super lazy inner loop for a quick demo.
      // It's not necessary to call drawSlice 3 times here
      // at all; it can be done with just 1 call if the
      // math is correct.
    	drawSlice(j, i, (i + j + delta*rowSpeed*dir) % n - n);
    	drawSlice(j, i, (i + j + delta*rowSpeed*dir) % n);
    	drawSlice(j, i, (i + j + delta*rowSpeed*dir) % n + n);
    }
  }
  window.requestAnimationFrame(render);
}

// Draw a slice of an image at a specified...