create-template-html-css 1.8.1 → 2.0.0

package/templates/pong/script.js

@@ -0,0 +1,364 @@
+// Canvas setup
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = 800;
+canvas.height = 500;
+
+// Game state
+let gameState = {
+    running: false,
+    paused: false,
+    gameMode: 'pvc', // 'pvc' or 'pvp'
+    difficulty: 'medium',
+    score1: 0,
+    score2: 0,
+    winningScore: 10
+};
+
+// Paddle properties
+const paddleWidth = 12;
+const paddleHeight = 80;
+const paddleSpeed = 6;
+
+const paddle1 = {
+    x: 20,
+    y: canvas.height / 2 - paddleHeight / 2,
+    width: paddleWidth,
+    height: paddleHeight,
+    dy: 0
+};
+
+const paddle2 = {
+    x: canvas.width - 20 - paddleWidth,
+    y: canvas.height / 2 - paddleHeight / 2,
+    width: paddleWidth,
+    height: paddleHeight,
+    dy: 0
+};
+
+// Ball properties
+const ball = {
+    x: canvas.width / 2,
+    y: canvas.height / 2,
+    radius: 8,
+    dx: 5,
+    dy: 5,
+    speed: 5
+};
+
+// AI settings
+const aiSettings = {
+    easy: { speed: 0.5, accuracy: 0.6 },
+    medium: { speed: 0.7, accuracy: 0.8 },
+    hard: { speed: 0.9, accuracy: 0.95 },
+    impossible: { speed: 1.2, accuracy: 1 }
+};
+
+// Keyboard state
+const keys = {
+    w: false,
+    s: false,
+    ArrowUp: false,
+    ArrowDown: false
+};
+
+// Event listeners
+document.addEventListener('keydown', (e) => {
+    if (e.key in keys) {
+        keys[e.key] = true;
+    }
+    if (e.key === ' ' && gameState.running && !gameState.paused) {
+        pauseGame();
+    }
+});
+
+document.addEventListener('keyup', (e) => {
+    if (e.key in keys) {
+        keys[e.key] = false;
+    }
+});
+
+// Game mode selection
+document.querySelectorAll('.mode-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+        document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        
+        gameState.gameMode = btn.dataset.mode;
+        
+        // Update player 2 name
+        if (gameState.gameMode === 'pvc') {
+            document.getElementById('player2Name').textContent = '🤖 מחשב';
+            document.querySelector('.difficulty-selector').style.display = 'flex';
+        } else {
+            document.getElementById('player2Name').textContent = '👤 שחקן 2';
+            document.querySelector('.difficulty-selector').style.display = 'none';
+        }
+    });
+});
+
+// Difficulty selection
+document.getElementById('difficulty').addEventListener('change', (e) => {
+    gameState.difficulty = e.target.value;
+});
+
+// Reset ball
+function resetBall() {
+    ball.x = canvas.width / 2;
+    ball.y = canvas.height / 2;
+    
+    // Random direction
+    const angle = (Math.random() * Math.PI / 4) - Math.PI / 8;
+    const direction = Math.random() < 0.5 ? 1 : -1;
+    
+    ball.dx = Math.cos(angle) * ball.speed * direction;
+    ball.dy = Math.sin(angle) * ball.speed;
+}
+
+// Update paddles
+function updatePaddles() {
+    // Player 1
+    if (keys.w && paddle1.y > 0) {
+        paddle1.y -= paddleSpeed;
+    }
+    if (keys.s && paddle1.y < canvas.height - paddle1.height) {
+        paddle1.y += paddleSpeed;
+    }
+    
+    // Player 2 / AI
+    if (gameState.gameMode === 'pvc') {
+        updateAI();
+    } else {
+        if (keys.ArrowUp && paddle2.y > 0) {
+            paddle2.y -= paddleSpeed;
+        }
+        if (keys.ArrowDown && paddle2.y < canvas.height - paddle2.height) {
+            paddle2.y += paddleSpeed;
+        }
+    }
+}
+
+// AI logic
+function updateAI() {
+    const ai = aiSettings[gameState.difficulty];
+    const paddleCenter = paddle2.y + paddle2.height / 2;
+    const targetY = ball.y;
+    
+    // Add some randomness for realism
+    const errorMargin = (1 - ai.accuracy) * paddle2.height;
+    const target = targetY + (Math.random() - 0.5) * errorMargin;
+    
+    if (paddleCenter < target - 10) {
+        paddle2.y += paddleSpeed * ai.speed;
+    } else if (paddleCenter > target + 10) {
+        paddle2.y -= paddleSpeed * ai.speed;
+    }
+    
+    // Keep in bounds
+    paddle2.y = Math.max(0, Math.min(canvas.height - paddle2.height, paddle2.y));
+}
+
+// Update ball
+function updateBall() {
+    ball.x += ball.dx;
+    ball.y += ball.dy;
+    
+    // Top and bottom collision
+    if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
+        ball.dy = -ball.dy;
+    }
+    
+    // Paddle 1 collision
+    if (ball.x - ball.radius < paddle1.x + paddle1.width &&
+        ball.x + ball.radius > paddle1.x &&
+        ball.y > paddle1.y &&
+        ball.y < paddle1.y + paddle1.height) {
+        
+        // Calculate hit position
+        const hitPos = (ball.y - paddle1.y) / paddle1.height - 0.5;
+        ball.dy = hitPos * ball.speed * 2;
+        ball.dx = Math.abs(ball.dx) * 1.05; // Speed up
+        ball.speed *= 1.02;
+    }
+    
+    // Paddle 2 collision
+    if (ball.x + ball.radius > paddle2.x &&
+        ball.x - ball.radius < paddle2.x + paddle2.width &&
+        ball.y > paddle2.y &&
+        ball.y < paddle2.y + paddle2.height) {
+        
+        const hitPos = (ball.y - paddle2.y) / paddle2.height - 0.5;
+        ball.dy = hitPos * ball.speed * 2;
+        ball.dx = -Math.abs(ball.dx) * 1.05;
+        ball.speed *= 1.02;
+    }
+    
+    // Score
+    if (ball.x - ball.radius < 0) {
+        gameState.score2++;
+        updateScore();
+        checkWin();
+        resetBall();
+    }
+    
+    if (ball.x + ball.radius > canvas.width) {
+        gameState.score1++;
+        updateScore();
+        checkWin();
+        resetBall();
+    }
+}
+
+// Draw everything
+function draw() {
+    // Clear canvas
+    ctx.fillStyle = '#1a202c';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Draw center line
+    ctx.setLineDash([10, 10]);
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(canvas.width / 2, 0);
+    ctx.lineTo(canvas.width / 2, canvas.height);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    
+    // Draw paddles
+    ctx.fillStyle = '#667EEA';
+    ctx.shadowBlur = 15;
+    ctx.shadowColor = '#667EEA';
+    ctx.fillRect(paddle1.x, paddle1.y, paddle1.width, paddle1.height);
+    
+    ctx.fillStyle = '#F56565';
+    ctx.shadowColor = '#F56565';
+    ctx.fillRect(paddle2.x, paddle2.y, paddle2.width, paddle2.height);
+    
+    // Draw ball
+    ctx.fillStyle = '#F6E05E';
+    ctx.shadowColor = '#F6E05E';
+    ctx.beginPath();
+    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.shadowBlur = 0;
+    
+    // Draw pause overlay
+    if (gameState.paused) {
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = '#FFFFFF';
+        ctx.font = 'bold 36px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText('משחק מושהה', canvas.width / 2, canvas.height / 2);
+    }
+}
+
+// Game loop
+function gameLoop() {
+    if (!gameState.running) return;
+    
+    if (!gameState.paused) {
+        updatePaddles();
+        updateBall();
+    }
+    
+    draw();
+    requestAnimationFrame(gameLoop);
+}
+
+// Update score display
+function updateScore() {
+    document.getElementById('player1Score').textContent = gameState.score1;
+    document.getElementById('player2Score').textContent = gameState.score2;
+}
+
+// Check win
+function checkWin() {
+    if (gameState.score1 >= gameState.winningScore) {
+        endGame(1);
+    } else if (gameState.score2 >= gameState.winningScore) {
+        endGame(2);
+    }
+}
+
+// End game
+function endGame(winner) {
+    gameState.running = false;
+    
+    const winnerName = winner === 1 ? 
+        'שחקן 1' : 
+        (gameState.gameMode === 'pvc' ? 'המחשב' : 'שחקן 2');
+    
+    showMessage(`🎉 ${winnerName} ניצח ${gameState.winningScore} - ${winner === 1 ? gameState.score2 : gameState.score1}!`, 'success');
+    
+    document.getElementById('startBtn').disabled = false;
+    document.getElementById('pauseBtn').disabled = true;
+}
+
+// Start game
+document.getElementById('startBtn').addEventListener('click', startGame);
+
+function startGame() {
+    gameState.running = true;
+    gameState.paused = false;
+    gameState.score1 = 0;
+    gameState.score2 = 0;
+    ball.speed = 5;
+    
+    paddle1.y = canvas.height / 2 - paddleHeight / 2;
+    paddle2.y = canvas.height / 2 - paddleHeight / 2;
+    
+    resetBall();
+    updateScore();
+    
+    document.getElementById('startBtn').disabled = true;
+    document.getElementById('pauseBtn').disabled = false;
+    document.getElementById('resultMessage').textContent = '';
+    
+    gameLoop();
+}
+
+// Pause game
+document.getElementById('pauseBtn').addEventListener('click', pauseGame);
+
+function pauseGame() {
+    gameState.paused = !gameState.paused;
+    document.getElementById('pauseBtn').textContent = gameState.paused ? 'המשך' : 'השהה';
+}
+
+// Reset game
+document.getElementById('resetBtn').addEventListener('click', resetGame);
+
+function resetGame() {
+    gameState.running = false;
+    gameState.paused = false;
+    gameState.score1 = 0;
+    gameState.score2 = 0;
+    ball.speed = 5;
+    
+    paddle1.y = canvas.height / 2 - paddleHeight / 2;
+    paddle2.y = canvas.height / 2 - paddleHeight / 2;
+    
+    resetBall();
+    updateScore();
+    draw();
+    
+    document.getElementById('startBtn').disabled = false;
+    document.getElementById('pauseBtn').disabled = true;
+    document.getElementById('pauseBtn').textContent = 'השהה';
+    document.getElementById('resultMessage').textContent = '';
+}
+
+// Show message
+function showMessage(text, type = 'info') {
+    const messageEl = document.getElementById('resultMessage');
+    messageEl.textContent = text;
+    messageEl.className = `result-message ${type}`;
+    messageEl.style.display = 'block';
+}
+
+// Initialize
+updateScore();
+draw();

package/templates/pong/style.css

@@ -0,0 +1,371 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 20px;
+    padding: 30px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 900px;
+    width: 100%;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.header h1 {
+    color: #2d3748;
+    font-size: 2.5rem;
+    margin-bottom: 5px;
+}
+
+.subtitle {
+    color: #718096;
+    font-size: 1.1rem;
+}
+
+.game-mode {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.mode-btn {
+    padding: 12px 30px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: 3px solid #e2e8f0;
+    background: white;
+    color: #4a5568;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.mode-btn:hover {
+    border-color: #667eea;
+    color: #667eea;
+}
+
+.mode-btn.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-color: #667eea;
+}
+
+.difficulty-selector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.difficulty-selector label {
+    font-weight: 600;
+    color: #2d3748;
+}
+
+.difficulty-selector select {
+    padding: 8px 15px;
+    border: 2px solid #e2e8f0;
+    border-radius: 8px;
+    background: white;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: border-color 0.3s ease;
+}
+
+.difficulty-selector select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.score-board {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 20px;
+    padding: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.player-score {
+    text-align: center;
+}
+
+.player-score h3 {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    margin-bottom: 8px;
+}
+
+.score {
+    color: white;
+    font-size: 3rem;
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+}
+
+.divider {
+    color: white;
+    font-size: 3rem;
+    font-weight: bold;
+}
+
+#gameCanvas {
+    display: block;
+    width: 100%;
+    max-width: 800px;
+    height: auto;
+    aspect-ratio: 8/5;
+    margin: 0 auto 20px;
+    border-radius: 10px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+}
+
+.controls {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+}
+
+.btn {
+    padding: 12px 30px;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    min-width: 120px;
+}
+
+.btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+.btn:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-secondary {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+}
+
+.btn-danger {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+    color: white;
+}
+
+.result-message {
+    text-align: center;
+    padding: 15px;
+    border-radius: 10px;
+    font-size: 1.3rem;
+    font-weight: bold;
+    margin-bottom: 20px;
+    display: none;
+}
+
+.result-message.success {
+    background: #c6f6d5;
+    color: #22543d;
+    border: 2px solid #9ae6b4;
+}
+
+.result-message.error {
+    background: #fed7d7;
+    color: #742a2a;
+    border: 2px solid #fc8181;
+}
+
+.result-message.info {
+    background: #bee3f8;
+    color: #2c5282;
+    border: 2px solid #90cdf4;
+}
+
+.instructions {
+    background: #f7fafc;
+    padding: 20px;
+    border-radius: 10px;
+    border: 2px solid #e2e8f0;
+}
+
+.instructions h3 {
+    color: #2d3748;
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+.controls-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 15px;
+}
+
+.control-item {
+    text-align: center;
+}
+
+.control-item strong {
+    display: block;
+    margin-bottom: 10px;
+    color: #2d3748;
+}
+
+.keys {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.key {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-weight: bold;
+    min-width: 40px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+.keys span:last-child {
+    color: #4a5568;
+    font-size: 0.9rem;
+}
+
+.rules {
+    list-style: none;
+    padding-right: 0;
+    margin-top: 15px;
+}
+
+.rules li {
+    color: #4a5568;
+    margin-bottom: 8px;
+    padding-right: 20px;
+    position: relative;
+    line-height: 1.6;
+}
+
+.rules li:before {
+    content: "•";
+    color: #667eea;
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    font-size: 1.2rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+
+    .header h1 {
+        font-size: 2rem;
+    }
+
+    .score {
+        font-size: 2.5rem;
+    }
+
+    .divider {
+        font-size: 2.5rem;
+    }
+
+    .controls-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .game-mode {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .mode-btn {
+        width: 100%;
+    }
+
+    .controls {
+        gap: 10px;
+    }
+
+    .btn {
+        padding: 10px 20px;
+        min-width: 100px;
+        font-size: 0.9rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.5rem;
+    }
+
+    .subtitle {
+        font-size: 0.95rem;
+    }
+
+    .score-board {
+        padding: 15px;
+        gap: 15px;
+    }
+
+    .score {
+        font-size: 2rem;
+    }
+
+    .divider {
+        font-size: 2rem;
+    }
+
+    .key {
+        padding: 6px 10px;
+        min-width: 35px;
+        font-size: 0.9rem;
+    }
+}