npm - create-template-html-css - Versions diffs - 1.9.0 → 2.0.1 - Mend

create-template-html-css 1.9.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/CHANGELOG.md +80 -0
package/COMPONENTS-GALLERY.html +735 -747
package/README.md +179 -2
package/bin/cli.js +15 -3
package/package.json +1 -1
package/templates/blackjack/index.html +97 -0
package/templates/blackjack/script.js +381 -0
package/templates/blackjack/style.css +452 -0
package/templates/breakout/index.html +56 -0
package/templates/breakout/script.js +387 -0
package/templates/breakout/style.css +239 -0
package/templates/connect-four/index.html +78 -0
package/templates/connect-four/script.js +413 -0
package/templates/connect-four/style.css +426 -0
package/templates/dice-game/index.html +99 -0
package/templates/dice-game/script.js +291 -0
package/templates/dice-game/style.css +403 -0
package/templates/flappy-bird/index.html +47 -0
package/templates/flappy-bird/script.js +394 -0
package/templates/flappy-bird/style.css +243 -0
package/templates/game-2048/index.html +59 -0
package/templates/game-2048/script.js +269 -0
package/templates/game-2048/style.css +281 -0
package/templates/pong/index.html +90 -0
package/templates/pong/script.js +364 -0
package/templates/pong/style.css +371 -0
package/templates/rock-paper-scissors/index.html +84 -0
package/templates/rock-paper-scissors/script.js +199 -0
package/templates/rock-paper-scissors/style.css +295 -0
package/templates/simon-says/index.html +64 -0
package/templates/simon-says/script.js +206 -0
package/templates/simon-says/style.css +250 -0
package/templates/slot-machine/index.html +112 -0
package/templates/slot-machine/script.js +238 -0
package/templates/slot-machine/style.css +464 -0
package/templates/tetris/index.html +84 -0
package/templates/tetris/script.js +447 -0
package/templates/tetris/style.css +286 -0
package/templates/whack-a-mole/index.html +85 -0
package/templates/whack-a-mole/script.js +172 -0
package/{demo-games/snake-game → templates/whack-a-mole}/style.css +114 -97
package/PUBLISH-GUIDE.md +0 -112
package/create-template-html-css-1.8.0.tgz +0 -0
package/demo-games/guess-number/index.html +0 -71
package/demo-games/guess-number/script.js +0 -216
package/demo-games/guess-number/style.css +0 -337
package/demo-games/memory-game/index.html +0 -50
package/demo-games/memory-game/script.js +0 -216
package/demo-games/memory-game/style.css +0 -288
package/demo-games/snake-game/index.html +0 -61
package/demo-games/snake-game/script.js +0 -360
package/demo-games/tic-tac-toe/index.html +0 -57
package/demo-games/tic-tac-toe/script.js +0 -156
package/demo-games/tic-tac-toe/style.css +0 -244

package/templates/flappy-bird/index.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flappy Bird</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🐦 Flappy Bird</h1>
+            <p class="subtitle">Flap between the pipes!</p>
+        </div>
+        <div class="game-info">
+            <div class="info-item">
+                <span class="label">Score:</span>
+                <span id="score" class="value">0</span>
+            </div>
+            <div class="info-item">
+                <span class="label">High Score:</span>
+                <span id="highScore" class="value">0</span>
+            </div>
+        </div>
+        <canvas id="gameCanvas"></canvas>
+        <div class="controls">
+            <button id="startBtn" class="btn btn-primary">Start Game</button>
+            <button id="resetBtn" class="btn btn-danger">Reset</button>
+        </div>
+        <div class="instructions">
+            <h3>🎮 How to Play?</h3>
+            <ul>
+                <li>Click on screen / spacebar / up arrow to jump</li>
+                <li>Pass between the pipes without crashing</li>
+                <li>Each pipe you pass scores a point</li>
+                <li>The game gets faster as you progress!</li>
+            </ul>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/flappy-bird/script.js ADDED Viewed

@@ -0,0 +1,394 @@
+// Game constants
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+canvas.width = 400;
+canvas.height = 600;
+// Game state
+let gameState = {
+    running: false,
+    score: 0,
+    highScore: parseInt(localStorage.getItem('flappyHighScore')) || 0,
+    gameSpeed: 2
+};
+// Bird
+const bird = {
+    x: 100,
+    y: canvas.height / 2,
+    width: 34,
+    height: 24,
+    velocity: 0,
+    gravity: 0.5,
+    jump: -9,
+    rotation: 0
+};
+// Pipes
+let pipes = [];
+const pipeConfig = {
+    width: 60,
+    gap: 180,
+    minHeight: 50,
+    maxHeight: canvas.height - 250,
+    distance: 250
+};
+let frameCount = 0;
+let lastPipeFrame = 0;
+// Background animation
+let bgX = 0;
+// Input handling
+function handleJump() {
+    if (!gameState.running) return;
+    bird.velocity = bird.jump;
+}
+// Mouse/Touch control
+canvas.addEventListener('click', handleJump);
+canvas.addEventListener('touchstart', (e) => {
+    e.preventDefault();
+    handleJump();
+});
+// Keyboard control
+document.addEventListener('keydown', (e) => {
+    if (e.key === ' ' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        handleJump();
+    }
+});
+// Create pipe
+function createPipe() {
+    const height = Math.floor(Math.random() * (pipeConfig.maxHeight - pipeConfig.minHeight)) + pipeConfig.minHeight;
+    pipes.push({
+        x: canvas.width,
+        topHeight: height,
+        bottomY: height + pipeConfig.gap,
+        passed: false
+    });
+}
+// Update bird
+function updateBird() {
+    bird.velocity += bird.gravity;
+    bird.y += bird.velocity;
+    // Rotation based on velocity
+    bird.rotation = Math.min(Math.max(bird.velocity * 3, -30), 90);
+    // Ground and ceiling collision
+    if (bird.y + bird.height > canvas.height || bird.y < 0) {
+        gameOver();
+    }
+}
+// Update pipes
+function updatePipes() {
+    // Create new pipe
+    if (frameCount - lastPipeFrame > pipeConfig.distance / gameState.gameSpeed) {
+        createPipe();
+        lastPipeFrame = frameCount;
+    }
+    // Update and remove pipes
+    for (let i = pipes.length - 1; i >= 0; i--) {
+        pipes[i].x -= gameState.gameSpeed;
+        // Check if passed
+        if (!pipes[i].passed && pipes[i].x + pipeConfig.width < bird.x) {
+            pipes[i].passed = true;
+            gameState.score++;
+            updateScore();
+            // Increase speed slightly
+            gameState.gameSpeed += 0.05;
+        }
+        // Remove off-screen pipes
+        if (pipes[i].x + pipeConfig.width < 0) {
+            pipes.splice(i, 1);
+        }
+    }
+}
+// Check collision
+function checkCollision() {
+    for (const pipe of pipes) {
+        // Check if bird is in pipe's x range
+        if (bird.x + bird.width > pipe.x && bird.x < pipe.x + pipeConfig.width) {
+            // Check collision with top pipe
+            if (bird.y < pipe.topHeight) {
+                gameOver();
+                return;
+            }
+            // Check collision with bottom pipe
+            if (bird.y + bird.height > pipe.bottomY) {
+                gameOver();
+                return;
+            }
+        }
+    }
+}
+// Draw background
+function drawBackground() {
+    // Sky gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+    gradient.addColorStop(0, '#87CEEB');
+    gradient.addColorStop(1, '#E0F6FF');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // Clouds
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
+    for (let i = 0; i < 3; i++) {
+        const x = (bgX + i * 200) % canvas.width;
+        drawCloud(x, 50 + i * 100);
+    }
+    // Ground
+    ctx.fillStyle = '#DEB887';
+    ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
+    // Grass
+    ctx.fillStyle = '#90EE90';
+    ctx.fillRect(0, canvas.height - 60, canvas.width, 10);
+    bgX -= 0.5;
+}
+// Draw cloud
+function drawCloud(x, y) {
+    ctx.beginPath();
+    ctx.arc(x, y, 20, 0, Math.PI * 2);
+    ctx.arc(x + 25, y, 25, 0, Math.PI * 2);
+    ctx.arc(x + 50, y, 20, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.closePath();
+}
+// Draw bird
+function drawBird() {
+    ctx.save();
+    ctx.translate(bird.x + bird.width / 2, bird.y + bird.height / 2);
+    ctx.rotate((bird.rotation * Math.PI) / 180);
+    // Bird body
+    ctx.fillStyle = '#FFD700';
+    ctx.beginPath();
+    ctx.ellipse(0, 0, bird.width / 2, bird.height / 2, 0, 0, Math.PI * 2);
+    ctx.fill();
+    // Bird eye
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.arc(10, -5, 6, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(12, -5, 3, 0, Math.PI * 2);
+    ctx.fill();
+    // Bird beak
+    ctx.fillStyle = '#FF6347';
+    ctx.beginPath();
+    ctx.moveTo(15, 0);
+    ctx.lineTo(25, -3);
+    ctx.lineTo(25, 3);
+    ctx.closePath();
+    ctx.fill();
+    // Bird wing
+    ctx.fillStyle = '#FFA500';
+    ctx.beginPath();
+    ctx.ellipse(-5, 5, 8, 12, Math.sin(frameCount * 0.2) * 0.3, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+}
+// Draw pipes
+function drawPipes() {
+    ctx.fillStyle = '#228B22';
+    ctx.strokeStyle = '#1a6b1a';
+    ctx.lineWidth = 3;
+    for (const pipe of pipes) {
+        // Top pipe
+        ctx.fillRect(pipe.x, 0, pipeConfig.width, pipe.topHeight);
+        ctx.strokeRect(pipe.x, 0, pipeConfig.width, pipe.topHeight);
+        // Top pipe cap
+        ctx.fillRect(pipe.x - 5, pipe.topHeight - 30, pipeConfig.width + 10, 30);
+        ctx.strokeRect(pipe.x - 5, pipe.topHeight - 30, pipeConfig.width + 10, 30);
+        // Bottom pipe
+        ctx.fillRect(pipe.x, pipe.bottomY, pipeConfig.width, canvas.height - pipe.bottomY);
+        ctx.strokeRect(pipe.x, pipe.bottomY, pipeConfig.width, canvas.height - pipe.bottomY);
+        // Bottom pipe cap
+        ctx.fillRect(pipe.x - 5, pipe.bottomY, pipeConfig.width + 10, 30);
+        ctx.strokeRect(pipe.x - 5, pipe.bottomY, pipeConfig.width + 10, 30);
+        // Add highlight
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+        ctx.fillRect(pipe.x, 0, pipeConfig.width / 3, pipe.topHeight);
+        ctx.fillRect(pipe.x, pipe.bottomY, pipeConfig.width / 3, canvas.height - pipe.bottomY);
+        ctx.fillStyle = '#228B22';
+    }
+}
+// Draw score
+function drawGameScore() {
+    ctx.fillStyle = 'white';
+    ctx.strokeStyle = 'black';
+    ctx.lineWidth = 3;
+    ctx.font = 'bold 48px Arial';
+    ctx.textAlign = 'center';
+    ctx.strokeText(gameState.score, canvas.width / 2, 80);
+    ctx.fillText(gameState.score, canvas.width / 2, 80);
+}
+// Game over
+function gameOver() {
+    gameState.running = false;
+    if (gameState.score > gameState.highScore) {
+        gameState.highScore = gameState.score;
+        localStorage.setItem('flappyHighScore', gameState.highScore);
+        updateHighScore();
+    }
+    // Draw game over screen
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = 'white';
+    ctx.strokeStyle = 'black';
+    ctx.lineWidth = 3;
+    ctx.font = 'bold 48px Arial';
+    ctx.textAlign = 'center';
+    ctx.strokeText('Game Over!', canvas.width / 2, canvas.height / 2 - 50);
+    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 50);
+    ctx.font = '24px Arial';
+    ctx.strokeText(`ניקוד: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
+    ctx.fillText(`ניקוד: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
+    ctx.strokeText(`שיא: ${gameState.highScore}`, canvas.width / 2, canvas.height / 2 + 50);
+    ctx.fillText(`שיא: ${gameState.highScore}`, canvas.width / 2, canvas.height / 2 + 50);
+    ctx.font = '18px Arial';
+    ctx.strokeText('לחץ "אתחל" להתחיל מחדש', canvas.width / 2, canvas.height / 2 + 100);
+    ctx.fillText('לחץ "אתחל" להתחיל מחדש', canvas.width / 2, canvas.height / 2 + 100);
+    document.getElementById('startBtn').disabled = false;
+}
+// Update UI
+function updateScore() {
+    document.getElementById('score').textContent = gameState.score;
+}
+function updateHighScore() {
+    document.getElementById('highScore').textContent = gameState.highScore;
+}
+// Draw start screen
+function drawStartScreen() {
+    drawBackground();
+    drawBird();
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = 'white';
+    ctx.strokeStyle = 'black';
+    ctx.lineWidth = 3;
+    ctx.font = 'bold 36px Arial';
+    ctx.textAlign = 'center';
+    ctx.strokeText('🐦 Flappy Bird', canvas.width / 2, canvas.height / 2 - 40);
+    ctx.fillText('🐦 Flappy Bird', canvas.width / 2, canvas.height / 2 - 40);
+    ctx.font = '20px Arial';
+    ctx.strokeText('לחץ "התחל משחק"', canvas.width / 2, canvas.height / 2 + 20);
+    ctx.fillText('לחץ "התחל משחק"', canvas.width / 2, canvas.height / 2 + 20);
+    ctx.strokeText('להתחיל!', canvas.width / 2, canvas.height / 2 + 50);
+    ctx.fillText('להתחיל!', canvas.width / 2, canvas.height / 2 + 50);
+}
+// Game loop
+function gameLoop() {
+    if (!gameState.running) return;
+    frameCount++;
+    updateBird();
+    updatePipes();
+    checkCollision();
+    drawBackground();
+    drawPipes();
+    drawBird();
+    drawGameScore();
+    requestAnimationFrame(gameLoop);
+}
+// Start game
+function startGame() {
+    gameState.running = true;
+    gameState.score = 0;
+    gameState.gameSpeed = 2;
+    bird.y = canvas.height / 2;
+    bird.velocity = 0;
+    bird.rotation = 0;
+    pipes = [];
+    frameCount = 0;
+    lastPipeFrame = 0;
+    updateScore();
+    document.getElementById('startBtn').disabled = true;
+    gameLoop();
+}
+// Reset game
+function resetGame() {
+    gameState.running = false;
+    gameState.score = 0;
+    gameState.gameSpeed = 2;
+    bird.y = canvas.height / 2;
+    bird.velocity = 0;
+    bird.rotation = 0;
+    pipes = [];
+    frameCount = 0;
+    lastPipeFrame = 0;
+    updateScore();
+    drawStartScreen();
+    document.getElementById('startBtn').disabled = false;
+}
+// Event listeners
+document.getElementById('startBtn').addEventListener('click', startGame);
+document.getElementById('resetBtn').addEventListener('click', resetGame);
+// Initialize
+updateHighScore();
+drawStartScreen();

package/templates/flappy-bird/style.css ADDED Viewed

@@ -0,0 +1,243 @@
+* {
+    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: 500px;
+    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-info {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+.info-item {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 12px 30px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 130px;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+.label {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+.value {
+    color: white;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+#gameCanvas {
+    display: block;
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    aspect-ratio: 2/3;
+    margin: 0 auto 20px;
+    border-radius: 10px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    touch-action: none;
+}
+.controls {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    margin-bottom: 25px;
+    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: 140px;
+}
+.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-danger {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+    color: white;
+}
+.instructions {
+    background: #f7fafc;
+    padding: 20px;
+    border-radius: 10px;
+    border: 2px solid #e2e8f0;
+}
+.instructions h3 {
+    color: #2d3748;
+    margin-bottom: 12px;
+    font-size: 1.1rem;
+}
+.instructions ul {
+    list-style: none;
+    padding-right: 0;
+}
+.instructions li {
+    color: #4a5568;
+    margin-bottom: 8px;
+    padding-right: 20px;
+    position: relative;
+    line-height: 1.6;
+}
+.instructions 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;
+    }
+    .game-info {
+        gap: 15px;
+    }
+    .info-item {
+        min-width: 110px;
+        padding: 10px 20px;
+    }
+    .value {
+        font-size: 1.5rem;
+    }
+    .controls {
+        gap: 10px;
+    }
+    .btn {
+        padding: 10px 20px;
+        min-width: 120px;
+        font-size: 0.9rem;
+    }
+    .instructions {
+        padding: 15px;
+    }
+    .instructions h3 {
+        font-size: 1rem;
+    }
+    .instructions li {
+        font-size: 0.9rem;
+    }
+}
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.5rem;
+    }
+    .subtitle {
+        font-size: 0.95rem;
+    }
+    .game-info {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .info-item {
+        flex-direction: row;
+        justify-content: space-between;
+        min-width: unset;
+    }
+    .value {
+        font-size: 1.3rem;
+    }
+    .controls {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .btn {
+        min-width: unset;
+    }
+}