Spaceship Battle

Developer
Eprouver
Size
5,012 Kb
Views
36,432
  1. Spaceship Battle Previews
  2. Spaceship Battle HTML Codes
  3. Spaceship Battle CSS Codes
  4. Spaceship Battle JS Codes

How do I make an spaceship battle?

Space triangles fight on canvas.. What is a spaceship battle? How do you make a spaceship battle? This script and codes were developed by Eprouver on 15 September 2022, Thursday.

Spaceship Battle Previews
IQ Test

Spaceship Battle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spaceship Battle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="info"> <button class="more" onclick="spawn()">War!</button> <br/> <p><b>KILLS</b></p> <p onclick="spawn(false, 0)">+ Magenta: <span id="redships">0</span></p> <p onclick="spawn(false, 1)">+ Green: <span id="blueships">0</span></p> <p onclick="spawn(false, 2)">+ Cyan: <span id="greenships">0</span></p> <br/><br/> <label>Speed:</label> <input type="range" min="0" max="5" step="0.001" val="0.2" onchange="setdelta(this)" oninput="setdelta(this)"/> <br/><br/> <button class="more" onclick="randomize()">New</button>
</div>
<div class="holder" onclick=" var el = document.documentElement , rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen ; rfs.call(el);
"> <canvas id="spaceFlightRoot" width="2400" height="2400"></canvas>
</div>
<div class="hide">
<canvas id="ship1" height="40" width="40"></canvas>
<canvas id="ship2" height="40" width="40"></canvas>
<canvas id="ship3" height="40" width="40"></canvas>
</div> <script src="js/index.js"></script>
</body>
</html>

Spaceship Battle - Script Codes CSS Codes

body { background: black;
}
canvas { max-width: 100%; max-height: 85vh; display: inline-block;
}
.holder { background: black; width: 70vw; margin: 0 auto; text-align: center;
}
.hide { display: none;
}
p { font-family: Arial, sans-serif; color: white;
}
.info { position: absolute; top: 1em; right: 1em; width: 8em; text-align: center;
}
.info p { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}
.info label { color: white;
}
.info .more { cursor: pointer; background: black; color: white; border: 1px solid white; border-radius: 2em; padding: 0.25em 1em;
}
.info .more input { pointer-events: none; max-width: 100%;
}

Spaceship Battle - Script Codes JS Codes

var requestFrame = window.requestAnimationFrame, teamScores = ['redships', 'blueships', 'greenships'], dead = [0, 0, 0], play = false;
var planets = [{ pos: [500, 1750], size: 140, fill: 'MediumVioletRed', stroke: 'fuchsia'
}, { pos: [2000, 1750], size: 140, fill: 'green', stroke: 'lime'
}, { pos: [1200, 400], size: 140, fill: 'teal', stroke: 'cyan'
}];
function renderBeam(v, dest, ctx, delta) { var z = Math.max(0.6, v.pos.z / 1400); ctx.save(); ctx.globalCompositeOperation = 'lighten'; ctx.lineWidth = z * 8; ctx.strokeStyle = planets[v.team].stroke; ctx.beginPath(); ctx.moveTo(v.pos.x - (v.size.x * z * 0.5), v.pos.y - (v.size.y * z * 0.5)); ctx.lineTo(dest.pos.x - (dest.size.x * z * 0.5), dest.pos.y - (dest.size.y * z * 0.5)); ctx.closePath(); ctx.shadowBlur=200; ctx.shadowColor=planets[v.team].stroke; ctx.stroke(); ctx.restore(); dest.life -= 1 * delta;
}
var objectManager = { objects: [], teams: [0, 0, 0], checkCollision: function() { this.objects.forEach(function(a) { this.objects.forEach(function(b) { if (a === b) return; }); }); }, update: function(delta, ctx) { var that = this; var coords = ['x', 'y', 'z']; this.objects.forEach(function(v, oi) { switch (v.type) { case 'beam': v.life -= 1; if (v.life <= 0) { that.objects.splice(oi, 1); } else { renderBeam(v.src, v.dest, ctx, delta); } break; case 'ship': v.lifetime += delta; var z = Math.max(0.6, v.pos.z / 1200); coords.forEach(function(c) { v.pos[c] += v.dir[c] * delta * z; if (v.size[c] + v.pos[c] + v.bounds[c] > ctx.canvas.width) { v.dir[c] -= Math.random() * delta; } else if (v.pos[c] - v.bounds[c] < 0) { v.dir[c] += Math.random() * delta; } else if (c !== 'z') { //v.dir[c] += ((Math.sin((Math.PI/2) *((((v.lifetime * 1000) %1000 / 1000))-0.5)))) * 0.5; } }); ctx.save(); ctx.translate(v.pos.x - (v.size.x * 0.5), v.pos.y - (v.size.y * 0.5)); ctx.rotate(Math.PI - Math.atan2(v.dir.x, v.dir.y)); ctx.scale(z, z); ctx.globalAlpha = z; ctx.drawImage(v.image, -v.size.x * 0.5, -v.size.y * 0.5); ctx.restore(); if(delta == 0) return; that.objects.filter(function(v) { return v.type === 'ship'; }).forEach(function(dest, i) { if (dest.lifetime < 100 || v.lifetime < 100) return; var distance = Math.sqrt(Math.pow((v.pos.x - dest.pos.x), 2) + Math.pow((v.pos.y - dest.pos.y), 2)); if (dest.team === v.team) { if (distance < 200) { var div = 100000; dest.dir.x += (v.dir.x - dest.dir.x) * (v.lifetime / div); dest.dir.y += (v.dir.y - dest.dir.y) * (v.lifetime / div); dest.dir.z += (v.dir.z - dest.dir.z) * (v.lifetime / div); v.dir.x += (dest.dir.x - v.dir.x) * (dest.lifetime / div); v.dir.y += (dest.dir.y - v.dir.y) * (dest.lifetime / div); v.dir.z += (dest.dir.z - v.dir.z) * (dest.lifetime / div); if(Math.abs(dest.dir.y) + Math.abs(dest.dir.x) < 3.5){ dest.dir.y *= 1.01; dest.dir.x *= 1.01; } if(Math.abs(v.dir.y) + Math.abs(v.dir.x) < 3.5){ v.dir.y *= 1.01; v.dir.x *= 1.01; } } return; } if (distance < 500 && Math.random() > 0.99) { renderBeam(v, dest, ctx, delta); if (dest.life <= 0) { that.objects.splice(that.objects.indexOf(dest), 1); that.teams[dest.team] -= 1; ctx.save(); ctx.shadowBlur=100; ctx.shadowColor="yellow"; ctx.beginPath(); ctx.arc(dest.pos.x - 20, dest.pos.y - 20, Math.max(1, 0.04 * dest.pos.z), 0, 2 * Math.PI, false); ctx.fillStyle = '#fff'; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = '#000'; ctx.stroke(); ctx.restore(); if (play) { audios[effect].play(); effect += 1; if (effect > audios.length - 1) effect = 0; } document.getElementById(teamScores[v.team]).innerHTML = dead[v.team] += 1; } else { if (Math.random() > 0.5) dest.dir.x += -dest.dir.x * Math.random(); if (Math.random() > 0.5) dest.dir.y += -dest.dir.y * Math.random(); that.objects.push({ type: 'beam', src: v, dest: dest, life: 10 }); } } }); break; } }); }
};
var stage = document.getElementById('spaceFlightRoot');
var ctx;
var images = {};
var elements = ['ship1', 'ship2', 'ship3'];
elements.forEach(function(v, i) { ctx = document.getElementById(v).getContext('2d'); ctx.fillStyle = planets[i].fill; ctx.strokeStyle = planets[i].stroke; ctx.lineWidth = 10; ctx.moveTo(20, 10); ctx.beginPath(); ctx.lineTo(30, 35); ctx.lineTo(10, 35); ctx.lineTo(20, 10); ctx.closePath(); ctx.stroke(); ctx.fill(); images[v] = ctx.canvas;
})
var ctx = stage.getContext('2d');
function create(type) { switch (type) { case 'ship1': return { type: 'ship', team: 0, lifetime: 0, pos: { x: planets[0].pos[0], y: planets[0].pos[1], z: Math.random() * 100 }, size: { x: 50, y: 50, z: 50 }, dir: { x: (Math.random() * 10) - 5, y: (Math.random() * 10) - 5, z: (Math.random() * 4) - 2 }, bounds: { x: 100, y: 100, z: 100 }, image: images.ship1, life: 5 }; break; case 'ship2': return { type: 'ship', team: 1, lifetime: 0, pos: { x: planets[1].pos[0], y: planets[1].pos[1], z: Math.random() * 100 }, size: { x: 50, y: 50, z: 50 }, dir: { x: (Math.random() * 10) - 5, y: (Math.random() * 10) - 5, z: (Math.random() * 4) - 2 }, bounds: { x: 100, y: 100, z: 100 }, image: images.ship2, life: 5 }; break; case 'ship3': return { type: 'ship', team: 2, lifetime: 0, pos: { x: planets[2].pos[0], y: planets[2].pos[1], z: Math.random() * 100 }, size: { x: 50, y: 50, z: 50 }, dir: { x: (Math.random() * 10) - 5, y: (Math.random() * 10) - 5, z: (Math.random() * 4) - 2 }, bounds: { x: 100, y: 100, z: 100 }, image: images.ship3, life: 5 }; break; }
}
var adder = 7;
var spawn = function(re, only) { var rand = Math.random(); switch (true) { case (rand < 0.33): ctx.canvas.style.webkitTransformOrigin = "50% 20%"; break; case (rand < 0.66): ctx.canvas.style.webkitTransformOrigin = "20% 80%"; break; default: ctx.canvas.style.webkitTransformOrigin = "90% 70%"; break; } objectManager.teams.forEach(function(v, t) { if (only !== undefined) { if (t !== only) return; } for (var i = 0; i < adder; i++) { objectManager.objects.push(create('ship' + (t + 1))); } objectManager.teams[t] += adder; }); if (re) { setTimeout(function() { spawn(re); }, 10000); }
};
var reset = function() { objectManager.objects = []; delta = 0.2;
};
var delta = 0.2;
function setdelta(input){ delta = parseFloat(input.value);
}
var update = function() { ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.save(); ctx.globalAlpha = 0.14 for (var i = 0; i < 3; i++) { ctx.beginPath(); ctx.arc(planets[i].pos[0] - (planets[i].size * 0.05), planets[i].pos[1] - (planets[i].size * 0.05), planets[i].size, 0, 2 * Math.PI, false); ctx.strokeStyle = planets[i].stroke; ctx.lineWidth = 5; ctx.stroke(); ctx.fillStyle = planets[i].fill; ctx.fill(); } ctx.restore(); objectManager.update(delta, ctx); requestFrame(function() { update(); });
};
function randomize() { planets.forEach(function(v) { v.pos[0] = 100 + Math.random() * 2200; v.pos[1] = 100 + Math.random() * 2200; }); objectManager.objects = []; spawn(); dead = [0, 0, 0]; teamScores.forEach(function(v) { document.getElementById(v).innerHTML = 0; })
}
spawn(true);
update();
Spaceship Battle - Script Codes
Spaceship Battle - Script Codes
Home Page Home
Developer Eprouver
Username eprouver
Uploaded September 15, 2022
Rating 3
Size 5,012 Kb
Views 36,432
Do you need developer help for Spaceship Battle?

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!

Eprouver (eprouver) Script Codes
Name
American Icons
Wave Transitions
Weather Map
TP Reader
Exploding Squares
Square Friends Dropping By
Google Speech
Incremental game
Sort the Knowlege
Spinning Cubes
Create amazing sales emails 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!