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.
Created
July 22, 2014 19:45
-
-
Save Bolloxim/27aa53bc7ef1de0f5075 to your computer and use it in GitHub Desktop.
A Pen by Andi Smithers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <canvas id="texteffect"></canvas> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #000000; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment