Starship shield controls

Developer
Size
4,171 Kb
Views
42,504

How do I make an starship shield controls?

Spaceship shield control panel created with CreateJS. Demo of a game control in the style of Star Trek.. What is a starship shield controls? How do you make a starship shield controls? This script and codes were developed by Jay W Johnson on 03 October 2022, Monday.

Starship shield controls Previews

Starship shield controls - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Starship shield controls</title>
</head>
<body>
<script src="https://code.createjs.com/createjs-2013.05.14.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<body bgcolor="#000" onload="init()">
<canvas id="canvas" width=700 height=640 style="display:block;"></canvas> <script src="js/index.js"></script>
</body>
</html>

Starship shield controls - Script Codes JS Codes

// Always `use strict` to receive useful warnings.
"use strict";
// Get and modify the canvas element as needed.
var canvas = document.getElementById("canvas");
//canvas.width = window.innerWidth;
//canvas.height = window.innerWidth;
// Create stage and global references to stage objects.
var stage = new createjs.Stage(canvas);
createjs.Touch.enable(stage);
var mtext, display, powerControl;
var color = "#fd0";
// **Initialization**
// -----
// `init()` sets up and runs the animation.
function init(){ // Declare the method to run for each `tick`. createjs.Ticker.addEventListener("tick", tick); // Create a `Text` object. (string, formatting, color) mtext = new createjs.Text("SHIELD OPERATIONS", "83px Audiowide", color); // Use `set` method to change default properties and add new ones. mtext.set({ x: 100, // default is zero y: 20, scaleX: 0.38, }) var textBracket = new createjs.Shape(); textBracket.graphics.f("#AAF") .arc(0,0,30,Math.PI/2,Math.PI/2+Math.PI) .r(0,-30,80,60) .f("#F96") .r(880,-30,600,60); textBracket.set({x:50,y:73,scaleX:.5}); stage.addChild(textBracket); // Add object to stage to be drawn for each `stage.update`. stage.addChild(mtext); // Create an instance of a graphics object and add to the stage. display = new ShipDisplay(); stage.addChild(display); //display.addEventListener("click",display); powerControl = new PowerControl(); stage.addChild(powerControl); powerControl.addEventListener("click",powerControl); powerControl.addEventListener("tick",powerControl); powerControl.addEventListener("mousedown",powerControl);
}
// **`tick` function**
// -----
function tick(event){ // _ticks_ all descendants of the stage and draws to canvas. // Parameters passed to `update` will be passed to descendants. stage.update(event);
}
// **ShipDisplay Class**
// -----
// Create a `Player` class that inherits from `createjs.Shape`.
function ShipDisplay() { // This example object will display a circle with a transparency gradient // The center is transparent and becomes solid blue at edges. var ship = new createjs.Bitmap("https://dl.dropboxusercontent.com/u/49722688/images/enterprise_schematic_top.png"); ship.regX = 125; ship.regY = 125/2; ship.scaleX = .50; ship.scaleY = .50; stage.addChild(ship); for (var i = 0; i < 4; i++){ var s = new createjs.Shape(); s.graphics.setStrokeStyle(50) .s("#223").arc(0,0,130, Math.PI/4+i*Math.PI/2+0.01,Math.PI/4+(i+1)*Math.PI/2)-0.01; s.scaleX = 1.5; s.scaleY = 1.25; this.addChild(s); } var shieldBoundary = []; for (var i = 0; i < 4; i++){ shieldBoundary.push( new createjs.Shape() ); shieldBoundary[i].graphics.setStrokeStyle(50) .s(color).arc(0,0,130, Math.PI/4+i*Math.PI/2+0.01,Math.PI/4+(i+1)*Math.PI/2)-0.01; shieldBoundary[i].scaleX = 1.5; shieldBoundary[i].scaleY = 1.25; shieldBoundary[i].alpha = 0; this.addChild(shieldBoundary[i]); } var shieldText = []; for (var i = 0; i < 4; i++){ shieldText.push( new createjs.Text("0%","30px Audiowide",color) ); this.addChild(shieldText[i].set({rotation:-90,textAlign:"center",textBaseline:"bottom"}) ); } shieldText[3].set({x:150,y:0}); shieldText[0].set({x:20,y:80}); shieldText[1].set({x:-110,y:0}); shieldText[2].set({x:20,y:-80}); this.setShields = function (power){ shieldBoundary[0].alpha = power*2*this.distributionX; shieldBoundary[1].alpha = power*2*this.distributionY; shieldBoundary[2].alpha = power*2*(1-this.distributionX); shieldBoundary[3].alpha = power*2*(1-this.distributionY); for (var i = 0; i < 4; i++){ shieldText[i].text = Math.ceil(shieldBoundary[i].alpha*100) + "%"; } if (power <= 0){ this.distributionX = .5; this.distributionY = .5; } } shieldBoundary[0].addEventListener("click", xUp); shieldBoundary[1].addEventListener("click", yUp); shieldBoundary[2].addEventListener("click", xDown); shieldBoundary[3].addEventListener("click", yDown); function xUp(){ display.distributionX += 0.05; if (display.distributionX >= 1.) display.distributionX = 0.95; } function xDown(){ display.distributionX -= 0.05; if (display.distributionX <= 0.) display.distributionX = 0.05; } function yUp(){ display.distributionY += 0.05; if (display.distributionY >= 1.) display.distributionY = 0.95; } function yDown(){ display.distributionY -= 0.05; if (display.distributionY <= 0.) display.distributionY = 0.05; } // Track power distribution this.distributionX = .5; this.distributionY = .5; // Overwrite initial position. Default is (0,0). this.x = ship.x = 230; this.y = ship.y = 390; this.rotation = ship.rotation = 90;
};
// Inherit from createjs.Shape
ShipDisplay.prototype = new createjs.Container();
ShipDisplay.prototype.constructor = ShipDisplay;
// **PowerControl Class**
// -----
function PowerControl() { // Power off image (dark slider) var powerOff = new createjs.Shape(); powerOff.graphics .beginLinearGradientFill(["#990","#910"], [.79,.81], 0,0,0,500) .r(0,0,160,450) .dc(50,450,50) .r(50,470,200,30) //Panhandle .r(70,440,120,50) //Curve fill .f("#000") .arc(190,440,30,0,Math.PI) //Curve cutout // Power on image (bright slider) var powerOn = new createjs.Shape(); powerOn.graphics .beginLinearGradientFill(["#ff0","#f10"], [.78,.85], 0,0,0,500) .r(0,-20,160,470) .dc(50,450,50) .r(50,470,200,30) //Panhandle .r(70,440,120,50) //Curve fill .f("#000") .arc(190,440,30,0,Math.PI) //Curve cutout // Mask for power on image this.leveler = new createjs.Shape(); this.leveler.graphics .r(0,0,250,400) powerOn.mask = this.leveler; this.leveler.scaleY = 0.0; this.powerText = new createjs.Text("0%", "30px Audiowide", "#000"); this.powerText.set({rotation:180,x:230,y:504,scaleX:.45}); this.divertText = new createjs.Text("DIVERTING POWER FROM LIFE SUPPORT", "30px Audiowide", "#f00"); this.divertText.set({rotation:180,x:575,y:504,scaleX:.45,alpha:0}); this.blink = function() { new createjs.Tween.get(this.divertText) .to({alpha:1.0},200,createjs.Ease.sineInOut) .wait(400).to({alpha:0.5},80,createjs.Ease.sineInOut) .loop = true; } function onComplete(){ this.parent.blink() } this.addChild(powerOff); this.addChild(powerOn); this.addChild(this.leveler); this.addChild(this.divertText); this.addChild(this.powerText); // Overwrite initial position. Default is (0,0). this.set({x:630,y:620,rotation:180}); this.powerLevel = 0; this.update = false;
};
// Inherit from createjs.Shape
PowerControl.prototype = new createjs.Container();
// Event handlers.
PowerControl.prototype.handleEvent = function (e) { this[e.type](e) };
PowerControl.prototype.tick = function (e) { if (this.update){ display.setShields(this.leveler.scaleY); } this.powerText.text = Math.ceil(this.leveler.scaleY*100) + "%"; if (this.powerLevel > 1.25) {this.powerLevel = 1.25}; if (this.powerLevel > 1. && !createjs.Tween.hasActiveTweens(this.divertText)){ // Activate looping tween (blinking alert) this.blink(); } if (this.powerLevel <= 1. && createjs.Tween.hasActiveTweens(this.divertText)){ // Remove the looping tween (blinking alert) createjs.Tween.removeTweens(this.divertText); // Fade out new createjs.Tween.get(this.divertText).to({alpha:0},500); }
};
PowerControl.prototype.click = function (e) { var pos = this.globalToLocal(e.stageX,e.stageY); this.powerLevel = Math.max(pos.y/400, 0); new createjs.Tween.get(this.leveler).to({scaleY:this.powerLevel},500) .call(display.setShields(this.leveler.scaleY)); this.update = true;
};
PowerControl.prototype.mousedown = function (e) { var pos = this.globalToLocal(e.stageX,e.stageY); this.leveler.scaleY = this.powerLevel; e.addEventListener("mousemove", function(event) { var pos = event.target.globalToLocal(event.stageX,event.stageY); event.target.powerLevel = Math.min(Math.max(pos.y/400, 0),1.25); event.target.leveler.scaleY = event.target.powerLevel; display.setShields(event.target.leveler.scaleY); event.target.update = true; });
};
Starship shield controls - Script Codes
Starship shield controls - Script Codes
Home Page Home
Developer Jay W Johnson
Username Ripley6811
Uploaded October 03, 2022
Rating 3
Size 4,171 Kb
Views 42,504
Do you need developer help for Starship shield controls?

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!

Jay W Johnson (Ripley6811) Script Codes
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!