Status messsages

Developer
Andi Smithers
Size
4,231 Kb
Views
14,168
  1. Status messsages Previews
  2. Status messsages HTML Codes
  3. Status messsages CSS Codes
  4. Status messsages JS Codes

How do I make an status messsages?

Another part to the game. status messages old school style with green text with a subtle fade in and blinky carat. What is a status messsages? How do you make a status messsages? This script and codes were developed by Andi Smithers on 21 November 2022, Monday.

Status messsages Previews
IQ Test

Status messsages - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>status messsages</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<canvas id="texteffect"></canvas> <!-- link to google fonts --> <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
</body> <script src="js/index.js"></script>
</body>
</html>

Status messsages - Script Codes CSS Codes

body { background:#000000; margin: 0px; padding: 0px;
}

Status messsages - Script Codes JS Codes

/*****************************************************************************
The MIT License (MIT)
Copyright (c) 2014 Andi Smithers
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*****************************************************************************/
// conceptualized and written by andi smithers
// 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\nstar cruiser 7 destroyed by zlyon fire\nposthumous rank : ", "star fleet to all units\nstar cruiser 7 depleted energy, mission aborted\nrank : ", "star fleet to all units\nstar cruiser 7 all enemy units destroyed\nrank :", "in orbit around starbase:\ntransfering energy", "transfer complete", "docking aborted", "starbase destroyed", "starbase under attack", ];
var startDisplayTime;
var stringToDisplay;
var stringDisplayPos;
var frameCount;
var currentMessage = 0;
var repeatTime = 0;
const speed = 120;
var messageList = [];
// 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()
{ messageList = []; 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, 150);
}
function startText(string, x, y)
{ var d = new Date(); startDisplayTime = d.getTime(); stringToDisplay = string; stringDisplayPos = {x:x,y:y} repeatTime = 0; var strings = string.split('\n'); messageList.push.apply(messageList, strings); currentMessage = 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.globalCompositeOperation = 'lighter'; context.globalAlpha = 1.0; context.font = '40pt Orbitron'; context.fillStyle = 'rgb(0,255,0)'; context.strokeStyle = 'rgb(192, 255,192)'; context.lineWidth = 1; context.textAlign = "left"; var cursorPos; for (var i=0; i<currentMessage; i++) { var y = stringDisplayPos.y-(currentMessage-i)*50; context.fillText(messageList[i], stringDisplayPos.x, y); context.strokeText(messageList[i], stringDisplayPos.x, y); } stringToDisplay = messageList[currentMessage]; if (stringRenderedLength>stringToDisplay.length) { var y = stringDisplayPos.y; context.fillText(messageList[i], stringDisplayPos.x, y); context.strokeText(messageList[i], stringDisplayPos.x, y); cursorPos = context.measureText(stringToDisplay);
// if (repeatTime<t) repeatTime = t + 5000; if (currentMessage+1<messageList.length) { currentMessage++; var d = new Date(); startDisplayTime = d.getTime(); } } else {	context.fillText(stringToDisplay.substr(0, stringRenderedLength), stringDisplayPos.x, stringDisplayPos.y);	context.strokeText(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); context.strokeText(stringToDisplay.substr(stringRenderedLength+i, 1), stringDisplayPos.x+cursorPos.width, stringDisplayPos.y); } }	blinky(stringDisplayPos.x + cursorPos.width, t); context.globalCompositeOperation = 'source-over';
}
// 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();
Status messsages - Script Codes
Status messsages - Script Codes
Home Page Home
Developer Andi Smithers
Username Bolloxim
Uploaded November 21, 2022
Rating 3
Size 4,231 Kb
Views 14,168
Do you need developer help for Status messsages?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andi Smithers (Bolloxim) Script Codes
Name
Cutaway hemisphere - js canvas 2D
Icosahedron - rendered in 2D
Zylon Fighter, Fake 3d
Empty framework
Old school rotation and projection
A Pen by Andi Smithers
Atari Pokey Chip Emulator
Random Normal
Asteriod Field
Starfield old school style
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!