interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Add new game screen

Browse source 
- Add first person view screen
- Add HippieCrosshair class
- Controls for crosshair options
- Add styles to game module
This commit is contained in:
sthag 2026-03-21 14:49:10 +01:00
parent e7aaf257e3
commit ebed5a2d42
3 changed files with 328 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

230
source/code/game.js Normal file
View file

@ -0,0 +1,230 @@
class HippieCrosshair {
constructor(canvas, options = {}) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.debug = options.debug || false;
// Crosshair options
this.size = options.size || 16;
this.thickness = options.thickness || 2;
this.color = options.color || '#000';
this.gapSize = options.gapSize || 8;
this.style = options.style || 'cross';
// Line options
this.lineColor = options.lineColor || '#fff';
this.lineWidth = options.lineWidth || 1;
this.showConnector = options.showConnector !== false;
// Symbol options
this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol
this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols
this.symbolSize = options.symbolSize || 8;
this.symbolColor = options.symbolColor || '#000';
this.symbolStyle = options.symbolStyle || 'arrow';
this.mouseX = canvas.width / 2;
this.mouseY = canvas.height / 2;
this.setupEventListeners();
this.animate();
}
setupEventListeners() {
document.addEventListener('mousemove', (e) => {
this.mouseX = e.clientX;
this.mouseY = e.clientY;
});
}
animate() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.showConnector) {
if (this.debug) this.drawLine();
this.drawConnector();
}
// TODO: Autom. Zug zum Zentrum hin ermöglichen
this.drawCrosshair();
requestAnimationFrame(() => this.animate());
}
drawLine() {
const centerX = this.canvas.width / 2;
const centerY = this.canvas.height / 2;
this.ctx.strokeStyle = this.lineColor;
this.ctx.lineWidth = this.lineWidth;
this.ctx.beginPath();
this.ctx.moveTo(centerX, centerY);
this.ctx.lineTo(this.mouseX, this.mouseY);
this.ctx.stroke();
}
// TODO: Ausblenden nach Distanz
drawConnector() {
const centerX = this.canvas.width / 2;
const centerY = this.canvas.height / 2;
const dx = this.mouseX - centerX;
const dy = this.mouseY - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
// Only draw symbols if cursor is far enough from center
if (distance < this.symbolDistance) {
return;
}
const angle = Math.atan2(dy, dx);
// Calculate how many symbols to draw
const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing);
for (let i = 0; i < symbolCount; i++) {
const symbolDistance = this.symbolDistance + (i * this.symbolSpacing);
const symbolX = centerX + Math.cos(angle) * symbolDistance;
const symbolY = centerY + Math.sin(angle) * symbolDistance;
this.drawSymbol(symbolX, symbolY, angle);
}
}
drawSymbol(x, y, angle = 0) {
this.ctx.fillStyle = this.symbolColor;
this.ctx.strokeStyle = this.symbolColor;
this.ctx.lineWidth = 1;
switch (this.symbolStyle) {
case 'circle':
this.ctx.beginPath();
this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2);
this.ctx.fill();
break;
case 'diamond':
const size = this.symbolSize - (this.symbolSize / 4);
this.ctx.beginPath();
this.ctx.moveTo(x, y - size);
this.ctx.lineTo(x + size, y);
this.ctx.lineTo(x, y + size);
this.ctx.lineTo(x - size, y);
this.ctx.closePath();
this.ctx.fill();
break;
case 'square':
this.ctx.fillRect(
x - this.symbolSize / 2,
y - this.symbolSize / 2,
this.symbolSize,
this.symbolSize
);
break;
case 'arrow':
this.arrow(x, y, angle);
break;
}
}
arrow(x, y, angle) {
const size = this.symbolSize - (this.symbolSize / 4);
this.ctx.save();
this.ctx.translate(x, y);
this.ctx.rotate(angle);
// Arrow pointing right
this.ctx.beginPath();
this.ctx.moveTo(size, 0); // Tip
this.ctx.lineTo(-size, -size); // Back left
// this.ctx.lineTo(-size * 0.4, 0); // Middle
this.ctx.lineTo(-size, size); // Back right
this.ctx.closePath();
this.ctx.fill();
this.ctx.restore();
}
drawCrosshair() {
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = this.thickness;
this.ctx.lineCap = 'round';
switch (this.style) {
case 'cross':
this.cross();
break;
case 'circle':
this.circle();
break;
case 'dot':
this.dot();
break;
}
}
cross() {
// Horizontal line
this.ctx.beginPath();
this.ctx.moveTo(this.mouseX - this.size, this.mouseY);
this.ctx.lineTo(this.mouseX - this.gapSize, this.mouseY);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(this.mouseX + this.gapSize, this.mouseY);
this.ctx.lineTo(this.mouseX + this.size, this.mouseY);
this.ctx.stroke();
// Vertical line
this.ctx.beginPath();
this.ctx.moveTo(this.mouseX, this.mouseY - this.size);
this.ctx.lineTo(this.mouseX, this.mouseY - this.gapSize);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(this.mouseX, this.mouseY + this.gapSize);
this.ctx.lineTo(this.mouseX, this.mouseY + this.size);
this.ctx.stroke();
}
circle() {
// Outer circle
this.ctx.beginPath();
this.ctx.arc(this.mouseX, this.mouseY, this.size, 0, Math.PI * 2);
this.ctx.stroke();
// Inner dot
this.ctx.fillStyle = this.color;
this.ctx.beginPath();
this.ctx.arc(this.mouseX, this.mouseY, this.thickness * 1.5, 0, Math.PI * 2);
this.ctx.fill();
}
dot() {
this.ctx.fillStyle = this.color;
this.ctx.beginPath();
this.ctx.arc(this.mouseX, this.mouseY, this.size / 4, 0, Math.PI * 2);
this.ctx.fill();
}
setCrosshairStyle(style) {
this.style = style;
}
setColor(color) {
this.color = color;
}
setSymbolStyle(style) {
this.symbolStyle = style;
}
setSymbolColor(color) {
this.symbolColor = color;
}
setLineVisible(visible) {
this.showConnector = visible;
}
}