Parameters for selected components will appear here
Paste this code inside the `switch` block of the `ShipRenderer` class from the setup code below.
Select components and adjust parameters to generate code.
To use your generated ship, you need to set up an HTML `
<!-- 1. Add this to your HTML <body> -->
<canvas id="my-game-canvas" style="background: #000;"></canvas>
<!-- 2. Add this script tag at the end of your <body> -->
<script>
class ShipRenderer {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.canvas.width = 400; // Set your desired size
this.canvas.height = 300; // Set your desired size
}
draw(shapeName) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// --- Set Neon Style ---
this.ctx.strokeStyle = '#0ff'; // Neon blue/cyan
this.ctx.lineWidth = 2;
this.ctx.shadowColor = '#0ff';
this.ctx.shadowBlur = 10;
this.ctx.save();
// Center the drawing
this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
this.ctx.beginPath();
switch (shapeName) {
// --- PASTE YOUR GENERATED CODE HERE ---
case 'MyGeneratedShip':
// Example: This block will be filled
// with your generated code.
let hullbodyLength = 100;
let hullbodyWidth = 40;
let hullcockpitSize = 15;
let hullnoseLength = 0.5;
let hulltaper = 0;
let hullnoseW = hullbodyWidth * (1 - hulltaper);
let hulltailW = hullbodyWidth * (1 + hulltaper);
this.ctx.moveTo(0, -hullbodyLength * hullnoseLength); // Nose
this.ctx.lineTo(hullnoseW / 2, hullbodyLength * 0.1);
this.ctx.lineTo(hulltailW / 2, hullbodyLength * 0.5); // Tail
this.ctx.lineTo(-hulltailW / 2, hullbodyLength * 0.5);
this.ctx.lineTo(-hullnoseW / 2, hullbodyLength * 0.1);
this.ctx.closePath();
this.ctx.rect(-hullcockpitSize / 2, -hullbodyLength * 0.2, hullcockpitSize, hullcockpitSize * 1.5);
break;
// ----------------------------------------
default:
console.warn(`Unknown shape: ${shapeName}`);
}
this.ctx.stroke(); // Draw the path
this.ctx.restore();
}
}
// 3. Create an instance and draw your ship
window.addEventListener('DOMContentLoaded', () => {
const renderer = new ShipRenderer('my-game-canvas');
renderer.draw('MyGeneratedShip'); // Use the shapeName 'MyGeneratedShip'
});
</script>