Bolloxim/index.html

## index.html
<body>
  		<canvas id="texteffect"></canvas>
</body>

## script.js
// blinky cursor text scroller
var ranks = ["GARBAGE SCOW CAPTAIN",-100,"GALACTIC COOK",0,"ROOKIE",48,"NOVICE",80,"ENSIGN",112,"PILOT",144,"ACE",176,"LIEUTENANT",192,"WARRIOR",208,"CAPTAIN",224,"COMMANDER",240,"STAR COMMANDER",272];

var msgs = ["star fleet to all units star cruiser 7 destroyed by zlyon fire posthumous rank : ", "star fleet to all units star cruiser 7 depleted energy mission aborted rank : ", "star fleet to all units star cruiser 7 all enemy units destroyed rank :", "in orbit around starbase: transfering","transfer complete", "docking aborted", "starbase destroyed"];

var startDisplayTime;
var stringToDisplay;
var stringDisplayPos;
var frameCount;
var repeatTime = 0;

const speed = 120;

// initialization
function init()
{
  // setup canvas and context
	canvas = document.getElementById('texteffect');
	context = canvas.getContext('2d');

  // set canvas to be window dimensions
  resize();

  // create event listeners
  canvas.addEventListener('mousemove', mouseMove);
  canvas.addEventListener('click', mouseClick);
  window.addEventListener('resize', resize);

  // initialze variables
  randomText();

}


// input functions

function mouseMove(event)
{
	var rect = canvas.getBoundingClientRect();

	mouseX = event.clientX - rect.left,
	mouseY = event.clientY - rect.top
}

function mouseClick()
{
  randomText();
}

function resize()
{
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
    // compute centre of screen
  centreX = canvas.width/2;
  centreY = canvas.height/2;
}


function blinky(x, t)
{
  if ((t%(speed<<3))<speed<<2) return;
  context.globalAlpha = 1;
  context.fillStyle = 'rgb(0,255,0)';
  context.fillRect(x, stringDisplayPos.y-50, 30, 50);
}

function rank(score)
{
  if (score<0) return msgs[0];
  if (score<48) return msgs[2];

  var r = (score - 48) >>4;
  var quality = (((score-48) - (r<<4)) >>2) + 1;

  if (r<8)
  {
    r>>=1;
    quality = ( ((score-48) - (r<<5)) >>3) + 1;
  }
  else r-=8;
	if (r>8) r = 8;

  return  ranks[2+r+r] + ' class ' + quality;

}

function randomText()
{
   var item = Math.floor(Math.random() * msgs.length);
   var msg = msgs[item];
  if (item<3) msg = msg + rank(Math.random()*400-80);
	startText(msg, 50, 50);
}

function startText(string, x, y)
{
  var d = new Date();
  startDisplayTime = d.getTime();
  stringToDisplay = string;
  stringDisplayPos = {x:x,y:y}
  repeatTime = 0;
}

function displayText()
{
	var d = new Date();
	var t = d.getTime();
  if (repeatTime!=0 && t> repeatTime)
    {
      startDisplayTime = t;
      repeatTime = 0;
    }
  var current = t - startDisplayTime;
  var frame = current%speed;
  var stringRenderedLength = current/speed;

  context.globalAlpha = 1.0;
  context.font = '40pt Calibri';
  context.fillStyle = 'rgb(0,255,0)';
  context.textAlign = "left";
  var cursorPos;
	if (stringRenderedLength>stringToDisplay.length)
  {
    context.fillText(stringToDisplay, stringDisplayPos.x, stringDisplayPos.y);
	 cursorPos = context.measureText(stringToDisplay);
    if (repeatTime<t) repeatTime = t + 5000;
  }
  else
  {
		context.fillText(stringToDisplay.substr(0, stringRenderedLength), stringDisplayPos.x, stringDisplayPos.y);

    for (var i=0; i<5; i++)
    {
	   cursorPos = context.measureText(stringToDisplay.substr(0, stringRenderedLength+i));
      context.globalAlpha = (1.0 - (i*0.2)) + ((frame/speed) * 0.2);
      context.fillText(stringToDisplay.substr(stringRenderedLength+i, 1), stringDisplayPos.x+cursorPos.width, stringDisplayPos.y);
    }
  }
	blinky(stringDisplayPos.x + cursorPos.width, t);

}

// rendering functions

function render()
{
  context.fillStyle = 'black';
  context.clearRect(0, 0, canvas.width, canvas.height);

	displayText();

  context.globalAlpha = 1;
  context.font = '14pt Calibri';
  context.fillStyle = 'rgb(255,255,255)';
  context.textAlign = "center";
  context.fillText("oldschool ticker text with carat.", canvas.width/2, 100);
  context.fillText("(mouse click to randomize text)", canvas.width/2, 130);

}

// movement functions

function update()
{

}

// per frame tick functions

function animate()
{
  frameCount++;
  // movement update
  update();
  // render update
  render();
  // trigger next frame
  requestAnimationFrame(animate);
}


// entry point

init();
animate();
animate();

## status-messsages.markdown

      
    Raw
  

              status-messsages.markdown
            
          
    status messsages

another part to the game.  status messages old school style with green text with a subtle fade in and blinky carat
A Pen by Andi Smithers on CodePen.
License.

  
## style.css
body {
  background: #000000;
}
	// blinky cursor text scroller
	var ranks = ["GARBAGE SCOW CAPTAIN",-100,"GALACTIC COOK",0,"ROOKIE",48,"NOVICE",80,"ENSIGN",112,"PILOT",144,"ACE",176,"LIEUTENANT",192,"WARRIOR",208,"CAPTAIN",224,"COMMANDER",240,"STAR COMMANDER",272];

	var msgs = ["star fleet to all units star cruiser 7 destroyed by zlyon fire posthumous rank : ", "star fleet to all units star cruiser 7 depleted energy mission aborted rank : ", "star fleet to all units star cruiser 7 all enemy units destroyed rank :", "in orbit around starbase: transfering","transfer complete", "docking aborted", "starbase destroyed"];

	var startDisplayTime;
	var stringToDisplay;
	var stringDisplayPos;
	var frameCount;
	var repeatTime = 0;

	const speed = 120;

	// initialization
	function init()
	{
	// setup canvas and context
	canvas = document.getElementById('texteffect');
	context = canvas.getContext('2d');

	// set canvas to be window dimensions
	resize();

	// create event listeners
	canvas.addEventListener('mousemove', mouseMove);
	canvas.addEventListener('click', mouseClick);
	window.addEventListener('resize', resize);

	// initialze variables
	randomText();

	}


	// input functions

	function mouseMove(event)
	{
	var rect = canvas.getBoundingClientRect();

	mouseX = event.clientX - rect.left,
	mouseY = event.clientY - rect.top
	}

	function mouseClick()
	{
	randomText();
	}

	function resize()
	{
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	// compute centre of screen
	centreX = canvas.width/2;
	centreY = canvas.height/2;
	}



	function blinky(x, t)
	{
	if ((t%(speed<<3))<speed<<2) return;
	context.globalAlpha = 1;
	context.fillStyle = 'rgb(0,255,0)';
	context.fillRect(x, stringDisplayPos.y-50, 30, 50);
	}

	function rank(score)
	{
	if (score<0) return msgs[0];
	if (score<48) return msgs[2];

	var r = (score - 48) >>4;
	var quality = (((score-48) - (r<<4)) >>2) + 1;

	if (r<8)
	{
	r>>=1;
	quality = ( ((score-48) - (r<<5)) >>3) + 1;
	}
	else r-=8;
	if (r>8) r = 8;

	return ranks[2+r+r] + ' class ' + quality;

	}

	function randomText()
	{
	var item = Math.floor(Math.random() * msgs.length);
	var msg = msgs[item];
	if (item<3) msg = msg + rank(Math.random()*400-80);
	startText(msg, 50, 50);
	}

	function startText(string, x, y)
	{
	var d = new Date();
	startDisplayTime = d.getTime();
	stringToDisplay = string;
	stringDisplayPos = {x:x,y:y}
	repeatTime = 0;
	}

	function displayText()
	{
	var d = new Date();
	var t = d.getTime();
	if (repeatTime!=0 && t> repeatTime)
	{
	startDisplayTime = t;
	repeatTime = 0;
	}
	var current = t - startDisplayTime;
	var frame = current%speed;
	var stringRenderedLength = current/speed;

	context.globalAlpha = 1.0;
	context.font = '40pt Calibri';
	context.fillStyle = 'rgb(0,255,0)';
	context.textAlign = "left";
	var cursorPos;
	if (stringRenderedLength>stringToDisplay.length)
	{
	context.fillText(stringToDisplay, stringDisplayPos.x, stringDisplayPos.y);
	cursorPos = context.measureText(stringToDisplay);
	if (repeatTime<t) repeatTime = t + 5000;
	}
	else
	{
	context.fillText(stringToDisplay.substr(0, stringRenderedLength), stringDisplayPos.x, stringDisplayPos.y);

	for (var i=0; i<5; i++)
	{
	cursorPos = context.measureText(stringToDisplay.substr(0, stringRenderedLength+i));
	context.globalAlpha = (1.0 - (i0.2)) + ((frame/speed) 0.2);
	context.fillText(stringToDisplay.substr(stringRenderedLength+i, 1), stringDisplayPos.x+cursorPos.width, stringDisplayPos.y);
	}
	}
	blinky(stringDisplayPos.x + cursorPos.width, t);

	}

	// rendering functions

	function render()
	{
	context.fillStyle = 'black';
	context.clearRect(0, 0, canvas.width, canvas.height);

	displayText();

	context.globalAlpha = 1;
	context.font = '14pt Calibri';
	context.fillStyle = 'rgb(255,255,255)';
	context.textAlign = "center";
	context.fillText("oldschool ticker text with carat.", canvas.width/2, 100);
	context.fillText("(mouse click to randomize text)", canvas.width/2, 130);

	}

	// movement functions

	function update()
	{

	}

	// per frame tick functions

	function animate()
	{
	frameCount++;
	// movement update
	update();
	// render update
	render();
	// trigger next frame
	requestAnimationFrame(animate);
	}



	// entry point

	init();
	animate();
	animate();