|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #1a1a1a; } |
|
.controls { position: fixed; top: 10px; left: 10px; color: white; } |
|
button { margin: 5px; padding: 5px 10px; } |
|
#gameArea { cursor: crosshair; } |
|
.info-panel { |
|
position: fixed; |
|
top: 10px; |
|
right: 10px; |
|
color: white; |
|
background: rgba(0,0,0,0.7); |
|
padding: 15px; |
|
border-radius: 5px; |
|
font-family: Arial, sans-serif; |
|
} |
|
.score { |
|
font-size: 24px; |
|
font-weight: bold; |
|
margin-bottom: 10px; |
|
} |
|
.points-popup { |
|
position: absolute; |
|
color: #4CAF50; |
|
font-weight: bold; |
|
font-family: Arial, sans-serif; |
|
pointer-events: none; |
|
animation: floatUp 1s ease-out forwards; |
|
} |
|
@keyframes floatUp { |
|
0% { transform: translateY(0); opacity: 1; } |
|
100% { transform: translateY(-50px); opacity: 0; } |
|
} |
|
.drawing-guide { |
|
position: fixed; |
|
bottom: 10px; |
|
left: 10px; |
|
color: white; |
|
background: rgba(0,0,0,0.7); |
|
padding: 10px; |
|
border-radius: 5px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="controls"> |
|
<button onclick="addRobot()">Add Random Robot (+5 pts)</button> |
|
<button onclick="togglePause()">Pause/Play</button> |
|
</div> |
|
<div class="info-panel"> |
|
<div class="score">Score: <span id="scoreDisplay">0</span></div> |
|
<div>Robots: <span id="robotCount">0</span></div> |
|
</div> |
|
<div class="drawing-guide"> |
|
Click and drag to draw new robots (+5 pts). Collisions give +5 pts and growth! |
|
</div> |
|
<svg id="gameArea" width="800" height="600" style="background: #000;"> |
|
<rect width="800" height="600" fill="none" stroke="#333" stroke-width="4"/> |
|
<line id="drawingLine" stroke="white" stroke-width="2" stroke-dasharray="5,5" visibility="hidden"/> |
|
</svg> |
|
|
|
<script> |
|
const svg = document.getElementById('gameArea'); |
|
const drawingLine = document.getElementById('drawingLine'); |
|
const robots = []; |
|
let paused = false; |
|
let isDrawing = false; |
|
let startX, startY; |
|
let score = 0; |
|
|
|
function updateScore(points, x, y) { |
|
score += points; |
|
document.getElementById('scoreDisplay').textContent = score; |
|
document.getElementById('robotCount').textContent = robots.length; |
|
|
|
|
|
const popup = document.createElement('div'); |
|
popup.className = 'points-popup'; |
|
popup.textContent = `+${points}`; |
|
popup.style.left = `${x}px`; |
|
popup.style.top = `${y}px`; |
|
document.body.appendChild(popup); |
|
|
|
|
|
setTimeout(() => popup.remove(), 1000); |
|
} |
|
|
|
class Robot { |
|
constructor(x, y, speed, direction, length) { |
|
this.segments = []; |
|
this.speed = speed || 2 + Math.random() * 2; |
|
this.direction = direction || Math.random() * Math.PI * 2; |
|
this.length = length || 5 + Math.floor(Math.random() * 5); |
|
this.color = `hsl(${Math.random() * 360}, 80%, 50%)`; |
|
this.x = x || Math.random() * 700 + 50; |
|
this.y = y || Math.random() * 500 + 50; |
|
|
|
this.createSegments(); |
|
} |
|
|
|
createSegments() { |
|
|
|
this.segments.forEach(seg => seg.element.remove()); |
|
this.segments = []; |
|
|
|
|
|
for (let i = 0; i < this.length; i++) { |
|
const segment = document.createElementNS("http://www.w3.org/2000/svg", "circle"); |
|
segment.setAttribute("r", "8"); |
|
segment.setAttribute("fill", this.color); |
|
svg.appendChild(segment); |
|
this.segments.push({ |
|
element: segment, |
|
x: this.x, |
|
y: this.y |
|
}); |
|
} |
|
} |
|
|
|
grow() { |
|
this.length += 1; |
|
this.createSegments(); |
|
} |
|
|
|
update() { |
|
|
|
this.x += Math.cos(this.direction) * this.speed; |
|
this.y += Math.sin(this.direction) * this.speed; |
|
|
|
|
|
if (this.x < 10 || this.x > 790) { |
|
this.direction = Math.PI - this.direction; |
|
this.mutate(); |
|
} |
|
if (this.y < 10 || this.y > 590) { |
|
this.direction = -this.direction; |
|
this.mutate(); |
|
} |
|
|
|
|
|
for (let i = this.segments.length - 1; i > 0; i--) { |
|
this.segments[i].x = this.segments[i - 1].x; |
|
this.segments[i].y = this.segments[i - 1].y; |
|
} |
|
this.segments[0].x = this.x; |
|
this.segments[0].y = this.y; |
|
|
|
|
|
this.segments.forEach(segment => { |
|
segment.element.setAttribute("cx", segment.x); |
|
segment.element.setAttribute("cy", segment.y); |
|
}); |
|
} |
|
|
|
mutate() { |
|
|
|
this.speed = Math.max(1, Math.min(6, this.speed + (Math.random() - 0.5))); |
|
this.color = `hsl(${Math.random() * 360}, 80%, 50%)`; |
|
this.segments.forEach(segment => { |
|
segment.element.setAttribute("fill", this.color); |
|
}); |
|
} |
|
|
|
checkCollision(other) { |
|
const dx = this.x - other.x; |
|
const dy = this.y - other.y; |
|
const distance = Math.sqrt(dx * dx + dy * dy); |
|
|
|
if (distance < 16) { |
|
|
|
const angle = Math.atan2(dy, dx); |
|
this.direction = angle + Math.PI / 2; |
|
other.direction = angle - Math.PI / 2; |
|
|
|
|
|
this.grow(); |
|
other.grow(); |
|
this.mutate(); |
|
other.mutate(); |
|
|
|
|
|
const svgRect = svg.getBoundingClientRect(); |
|
const popupX = svgRect.left + this.x; |
|
const popupY = svgRect.top + this.y; |
|
updateScore(5, popupX, popupY); |
|
} |
|
} |
|
} |
|
|
|
|
|
svg.addEventListener('mousedown', (e) => { |
|
const rect = svg.getBoundingClientRect(); |
|
startX = e.clientX - rect.left; |
|
startY = e.clientY - rect.top; |
|
isDrawing = true; |
|
|
|
drawingLine.setAttribute('x1', startX); |
|
drawingLine.setAttribute('y1', startY); |
|
drawingLine.setAttribute('x2', startX); |
|
drawingLine.setAttribute('y2', startY); |
|
drawingLine.setAttribute('visibility', 'visible'); |
|
}); |
|
|
|
svg.addEventListener('mousemove', (e) => { |
|
if (isDrawing) { |
|
const rect = svg.getBoundingClientRect(); |
|
const currentX = e.clientX - rect.left; |
|
const currentY = e.clientY - rect.top; |
|
|
|
drawingLine.setAttribute('x2', currentX); |
|
drawingLine.setAttribute('y2', currentY); |
|
} |
|
}); |
|
|
|
svg.addEventListener('mouseup', (e) => { |
|
if (isDrawing) { |
|
const rect = svg.getBoundingClientRect(); |
|
const endX = e.clientX - rect.left; |
|
const endY = e.clientY - rect.top; |
|
|
|
const dx = endX - startX; |
|
const dy = endY - startY; |
|
const distance = Math.sqrt(dx * dx + dy * dy); |
|
const direction = Math.atan2(dy, dx); |
|
|
|
const speed = Math.min(6, distance / 50); |
|
const length = Math.max(3, Math.min(12, Math.floor(distance / 30))); |
|
robots.push(new Robot(startX, startY, speed, direction, length)); |
|
|
|
|
|
updateScore(5, e.clientX, e.clientY); |
|
|
|
drawingLine.setAttribute('visibility', 'hidden'); |
|
isDrawing = false; |
|
} |
|
}); |
|
|
|
svg.addEventListener('mouseleave', () => { |
|
if (isDrawing) { |
|
drawingLine.setAttribute('visibility', 'hidden'); |
|
isDrawing = false; |
|
} |
|
}); |
|
|
|
function addRobot() { |
|
const robot = new Robot(); |
|
robots.push(robot); |
|
|
|
const svgRect = svg.getBoundingClientRect(); |
|
updateScore(5, svgRect.left + robot.x, svgRect.top + robot.y); |
|
} |
|
|
|
function togglePause() { |
|
paused = !paused; |
|
} |
|
|
|
function update() { |
|
if (!paused) { |
|
robots.forEach(robot => robot.update()); |
|
|
|
for (let i = 0; i < robots.length; i++) { |
|
for (let j = i + 1; j < robots.length; j++) { |
|
robots[i].checkCollision(robots[j]); |
|
} |
|
} |
|
} |
|
requestAnimationFrame(update); |
|
} |
|
|
|
|
|
for (let i = 0; i < 3; i++) { |
|
addRobot(); |
|
} |
|
|
|
update(); |
|
</script> |
|
</body> |
|
</html> |
