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

create-template-html-css 1.9.0 → 2.0.0

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/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/COMPONENTS-GALLERY.html +0 -773
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/tetris/index.html ADDED Viewed

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tetris</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎮 Tetris</h1>
+            <p class="subtitle">The classic game!</p>
+        </div>
+        <div class="game-container">
+            <div class="side-panel">
+                <div class="info-card">
+                    <h3>📊 Score</h3>
+                    <div class="score-value" id="score">0</div>
+                </div>
+                <div class="info-card">
+                    <h3>🏆 High Score</h3>
+                    <div class="score-value" id="highScore">0</div>
+                </div>
+                <div class="info-card">
+                    <h3>📈 Level</h3>
+                    <div class="score-value" id="level">1</div>
+                </div>
+                <div class="info-card">
+                    <h3>📏 Lines</h3>
+                    <div class="score-value" id="lines">0</div>
+                </div>
+                <div class="info-card next-piece">
+                    <h3>🔜 Next</h3>
+                    <canvas id="nextCanvas"></canvas>
+                </div>
+            </div>
+            <div class="game-board">
+                <canvas id="gameCanvas"></canvas>
+            </div>
+        </div>
+        <div class="controls">
+            <button id="startBtn" class="btn btn-primary">Start Game</button>
+            <button id="pauseBtn" class="btn btn-secondary" disabled>Pause</button>
+            <button id="resetBtn" class="btn btn-danger">Reset</button>
+        </div>
+        <div class="instructions">
+            <h3>⌨️ Controls:</h3>
+            <div class="key-instructions">
+                <div class="key-item">
+                    <span class="key">←</span>
+                    <span>Left</span>
+                </div>
+                <div class="key-item">
+                    <span class="key">→</span>
+                    <span>Right</span>
+                </div>
+                <div class="key-item">
+                    <span class="key">↓</span>
+                    <span>Fast Down</span>
+                </div>
+                <div class="key-item">
+                    <span class="key">↑</span>
+                    <span>Rotate</span>
+                </div>
+                <div class="key-item">
+                    <span class="key">Space</span>
+                    <span>Hard Drop</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/tetris/script.js ADDED Viewed

@@ -0,0 +1,447 @@
+// Game constants
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const nextCanvas = document.getElementById('nextCanvas');
+const nextCtx = nextCanvas.getContext('2d');
+const BLOCK_SIZE = 30;
+const ROWS = 20;
+const COLS = 10;
+canvas.width = COLS * BLOCK_SIZE;
+canvas.height = ROWS * BLOCK_SIZE;
+nextCanvas.width = 4 * BLOCK_SIZE;
+nextCanvas.height = 4 * BLOCK_SIZE;
+// Tetromino shapes
+const SHAPES = {
+    I: [[1, 1, 1, 1]],
+    O: [[1, 1], [1, 1]],
+    T: [[0, 1, 0], [1, 1, 1]],
+    S: [[0, 1, 1], [1, 1, 0]],
+    Z: [[1, 1, 0], [0, 1, 1]],
+    J: [[1, 0, 0], [1, 1, 1]],
+    L: [[0, 0, 1], [1, 1, 1]]
+};
+const COLORS = {
+    I: '#00f0f0',
+    O: '#f0f000',
+    T: '#a000f0',
+    S: '#00f000',
+    Z: '#f00000',
+    J: '#0000f0',
+    L: '#f0a000'
+};
+// Game state
+let gameState = {
+    running: false,
+    paused: false,
+    score: 0,
+    level: 1,
+    lines: 0,
+    highScore: parseInt(localStorage.getItem('tetrisHighScore')) || 0,
+    board: [],
+    currentPiece: null,
+    nextPiece: null,
+    dropCounter: 0,
+    dropInterval: 1000,
+    lastTime: 0
+};
+// Initialize board
+function initBoard() {
+    gameState.board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+}
+// Create new piece
+function createPiece() {
+    const shapes = Object.keys(SHAPES);
+    const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
+    return {
+        shape: SHAPES[randomShape],
+        color: COLORS[randomShape],
+        type: randomShape,
+        x: Math.floor(COLS / 2) - Math.floor(SHAPES[randomShape][0].length / 2),
+        y: 0
+    };
+}
+// Draw block
+function drawBlock(x, y, color, context = ctx) {
+    context.fillStyle = color;
+    context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
+    context.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+    context.lineWidth = 2;
+    context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
+    // Add shine effect
+    context.fillStyle = 'rgba(255, 255, 255, 0.2)';
+    context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE / 2, BLOCK_SIZE / 2);
+}
+// Draw board
+function drawBoard() {
+    ctx.fillStyle = '#1a202c';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // Draw grid
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= ROWS; i++) {
+        ctx.beginPath();
+        ctx.moveTo(0, i * BLOCK_SIZE);
+        ctx.lineTo(COLS * BLOCK_SIZE, i * BLOCK_SIZE);
+        ctx.stroke();
+    }
+    for (let i = 0; i <= COLS; i++) {
+        ctx.beginPath();
+        ctx.moveTo(i * BLOCK_SIZE, 0);
+        ctx.lineTo(i * BLOCK_SIZE, ROWS * BLOCK_SIZE);
+        ctx.stroke();
+    }
+    // Draw placed blocks
+    for (let y = 0; y < ROWS; y++) {
+        for (let x = 0; x < COLS; x++) {
+            if (gameState.board[y][x]) {
+                drawBlock(x, y, gameState.board[y][x]);
+            }
+        }
+    }
+}
+// Draw piece
+function drawPiece(piece, context = ctx, offsetX = 0, offsetY = 0) {
+    piece.shape.forEach((row, y) => {
+        row.forEach((value, x) => {
+            if (value) {
+                drawBlock(piece.x + x + offsetX, piece.y + y + offsetY, piece.color, context);
+            }
+        });
+    });
+}
+// Draw next piece
+function drawNextPiece() {
+    nextCtx.fillStyle = '#1a202c';
+    nextCtx.fillRect(0, 0, nextCanvas.width, nextCanvas.height);
+    if (gameState.nextPiece) {
+        const offsetX = Math.floor((4 - gameState.nextPiece.shape[0].length) / 2);
+        const offsetY = Math.floor((4 - gameState.nextPiece.shape.length) / 2);
+        gameState.nextPiece.shape.forEach((row, y) => {
+            row.forEach((value, x) => {
+                if (value) {
+                    drawBlock(offsetX + x, offsetY + y, gameState.nextPiece.color, nextCtx);
+                }
+            });
+        });
+    }
+}
+// Check collision
+function checkCollision(piece, offsetX = 0, offsetY = 0) {
+    for (let y = 0; y < piece.shape.length; y++) {
+        for (let x = 0; x < piece.shape[y].length; x++) {
+            if (piece.shape[y][x]) {
+                const newX = piece.x + x + offsetX;
+                const newY = piece.y + y + offsetY;
+                if (newX < 0 || newX >= COLS || newY >= ROWS) {
+                    return true;
+                }
+                if (newY >= 0 && gameState.board[newY][newX]) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+// Rotate piece
+function rotatePiece(piece) {
+    const rotated = piece.shape[0].map((_, i) =>
+        piece.shape.map(row => row[i]).reverse()
+    );
+    const newPiece = { ...piece, shape: rotated };
+    if (!checkCollision(newPiece)) {
+        piece.shape = rotated;
+    }
+}
+// Move piece
+function movePiece(dx, dy) {
+    if (!checkCollision(gameState.currentPiece, dx, dy)) {
+        gameState.currentPiece.x += dx;
+        gameState.currentPiece.y += dy;
+        return true;
+    }
+    return false;
+}
+// Drop piece
+function dropPiece() {
+    while (movePiece(0, 1)) {}
+    lockPiece();
+}
+// Lock piece
+function lockPiece() {
+    gameState.currentPiece.shape.forEach((row, y) => {
+        row.forEach((value, x) => {
+            if (value) {
+                const boardY = gameState.currentPiece.y + y;
+                const boardX = gameState.currentPiece.x + x;
+                if (boardY >= 0) {
+                    gameState.board[boardY][boardX] = gameState.currentPiece.color;
+                }
+            }
+        });
+    });
+    clearLines();
+    spawnNewPiece();
+}
+// Clear completed lines
+function clearLines() {
+    let linesCleared = 0;
+    for (let y = ROWS - 1; y >= 0; y--) {
+        if (gameState.board[y].every(cell => cell !== 0)) {
+            gameState.board.splice(y, 1);
+            gameState.board.unshift(Array(COLS).fill(0));
+            linesCleared++;
+            y++; // Check the same row again
+        }
+    }
+    if (linesCleared > 0) {
+        gameState.lines += linesCleared;
+        // Score calculation (Tetris scoring system)
+        const points = [0, 40, 100, 300, 1200];
+        gameState.score += points[linesCleared] * gameState.level;
+        // Level up every 10 lines
+        const newLevel = Math.floor(gameState.lines / 10) + 1;
+        if (newLevel > gameState.level) {
+            gameState.level = newLevel;
+            gameState.dropInterval = Math.max(100, 1000 - (gameState.level - 1) * 100);
+            updateLevel();
+        }
+        updateScore();
+        updateLines();
+    }
+}
+// Spawn new piece
+function spawnNewPiece() {
+    gameState.currentPiece = gameState.nextPiece || createPiece();
+    gameState.nextPiece = createPiece();
+    drawNextPiece();
+    if (checkCollision(gameState.currentPiece)) {
+        gameOver();
+    }
+}
+// Game over
+function gameOver() {
+    gameState.running = false;
+    if (gameState.score > gameState.highScore) {
+        gameState.highScore = gameState.score;
+        localStorage.setItem('tetrisHighScore', gameState.highScore);
+        updateHighScore();
+    }
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+    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 - 30);
+    ctx.font = '20px Arial';
+    ctx.fillText(`ניקוד: ${gameState.score}`, canvas.width / 2, canvas.height / 2 + 10);
+    document.getElementById('startBtn').disabled = false;
+    document.getElementById('pauseBtn').disabled = true;
+}
+// Update UI
+function updateScore() {
+    document.getElementById('score').textContent = gameState.score;
+}
+function updateLines() {
+    document.getElementById('lines').textContent = gameState.lines;
+}
+function updateLevel() {
+    document.getElementById('level').textContent = gameState.level;
+}
+function updateHighScore() {
+    document.getElementById('highScore').textContent = gameState.highScore;
+}
+// Draw game
+function draw() {
+    drawBoard();
+    if (gameState.currentPiece) {
+        // Draw ghost piece (shadow)
+        const ghostPiece = { ...gameState.currentPiece };
+        while (!checkCollision(ghostPiece, 0, 1)) {
+            ghostPiece.y++;
+        }
+        ctx.globalAlpha = 0.2;
+        drawPiece(ghostPiece);
+        ctx.globalAlpha = 1.0;
+        // Draw current piece
+        drawPiece(gameState.currentPiece);
+    }
+    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 28px Arial';
+        ctx.textAlign = 'center';
+        ctx.fillText('משחק מושהה', canvas.width / 2, canvas.height / 2);
+    }
+}
+// Game loop
+function gameLoop(time = 0) {
+    if (!gameState.running) return;
+    const deltaTime = time - gameState.lastTime;
+    gameState.lastTime = time;
+    if (!gameState.paused) {
+        gameState.dropCounter += deltaTime;
+        if (gameState.dropCounter > gameState.dropInterval) {
+            if (!movePiece(0, 1)) {
+                lockPiece();
+            }
+            gameState.dropCounter = 0;
+        }
+    }
+    draw();
+    requestAnimationFrame(gameLoop);
+}
+// Keyboard controls
+document.addEventListener('keydown', (e) => {
+    if (!gameState.running || gameState.paused) return;
+    switch (e.key) {
+        case 'ArrowLeft':
+            movePiece(-1, 0);
+            break;
+        case 'ArrowRight':
+            movePiece(1, 0);
+            break;
+        case 'ArrowDown':
+            if (movePiece(0, 1)) {
+                gameState.score += 1;
+                updateScore();
+            }
+            gameState.dropCounter = 0;
+            break;
+        case 'ArrowUp':
+            rotatePiece(gameState.currentPiece);
+            break;
+        case ' ':
+            e.preventDefault();
+            dropPiece();
+            break;
+    }
+    draw();
+});
+// Start game
+function startGame() {
+    gameState.running = true;
+    gameState.paused = false;
+    gameState.score = 0;
+    gameState.level = 1;
+    gameState.lines = 0;
+    gameState.dropCounter = 0;
+    gameState.dropInterval = 1000;
+    gameState.lastTime = 0;
+    initBoard();
+    gameState.nextPiece = createPiece();
+    spawnNewPiece();
+    updateScore();
+    updateLines();
+    updateLevel();
+    document.getElementById('startBtn').disabled = true;
+    document.getElementById('pauseBtn').disabled = false;
+    gameLoop();
+}
+// Pause game
+function pauseGame() {
+    gameState.paused = !gameState.paused;
+    document.getElementById('pauseBtn').textContent = gameState.paused ? 'המשך' : 'השהה';
+}
+// Reset game
+function resetGame() {
+    gameState.running = false;
+    gameState.paused = false;
+    gameState.score = 0;
+    gameState.level = 1;
+    gameState.lines = 0;
+    initBoard();
+    gameState.currentPiece = null;
+    gameState.nextPiece = null;
+    updateScore();
+    updateLines();
+    updateLevel();
+    draw();
+    drawNextPiece();
+    document.getElementById('startBtn').disabled = false;
+    document.getElementById('pauseBtn').disabled = true;
+    document.getElementById('pauseBtn').textContent = 'השהה';
+}
+// Event listeners
+document.getElementById('startBtn').addEventListener('click', startGame);
+document.getElementById('pauseBtn').addEventListener('click', pauseGame);
+document.getElementById('resetBtn').addEventListener('click', resetGame);
+// Initialize
+updateHighScore();
+initBoard();
+draw();
+drawNextPiece();