经典记忆卡片游戏html代码

最新推荐文章于 2024-08-28 16:31:43 发布

mxs0523

最新推荐文章于 2024-08-28 16:31:43 发布

阅读量5

点赞数

文章标签：游戏

原文链接：https://www.52pojie.cn/thread-1957060-1-1.html

版权

记忆卡片游戏是一款简单而富有挑战性的经典游戏，旨在锻炼玩家的记忆力和观察力。游戏通常由一组图案相同的卡片组成，玩家需要通过翻转卡片找到匹配的对。每当找到一对匹配的卡片时，玩家将获得一定的分数或奖励，游戏结束时，分数最高者获胜。无论是与朋友竞技，还是单独训练，这款游戏都适合各个年龄段的玩家。它不仅带来乐趣，还能有效提升记忆力、专注力以及反应能力。在这个快节奏的现代生活中，经典记忆卡片游戏无疑是一个值得一试的好选择。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打砖块小游戏-丢塔游戏网</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0e5d3;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid #4CAF50;
            background-color: #ffffff;
        }
        select {
            margin-bottom: 20px;
            padding: 5px;
        }
    </style>
</head>
<body>
 
<select id="difficulty">
    <option value="easy">简单</option>
    <option value="medium">中等</option>
    <option value="hard">困难</option>
</select>
<button>开始游戏</button>
<canvas id="brickGame" width="480" height="320"></canvas>
 
<script>
    const canvas = document.getElementById('brickGame');
    const ctx = canvas.getContext('2d');
 
    let ballRadius = 10;
    let x, y, dx, dy;
    const paddleHeight = 10;
    const paddleWidth = 75;
    let paddleX;
    let rightPressed = false;
    let leftPressed = false;
 
    let brickRowCount, brickColumnCount, bricks = [];
    let score = 0;
    let level = 0;
    let timeLimit, elapsedTime = 0;
 
    function initializeGame(difficulty) {
        if (difficulty === 'easy') {
            brickRowCount = 3 + level;
            brickColumnCount = 5 + level;
            dx = 2 + level;
            dy = -2 - level;
        } else if (difficulty === 'medium') {
            brickRowCount = 5 + level;
            brickColumnCount = 7 + level;
            dx = 3 + level;
            dy = -3 - level;
        } else {
            brickRowCount = 7 + level;
            brickColumnCount = 9 + level;
            dx = 4 + level;
            dy = -4 - level;
        }
 
        x = canvas.width / 2;
        y = canvas.height - 30;
        paddleX = (canvas.width - paddleWidth) / 2;
 
        bricks = [];
        for (let c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (let r = 0; r < brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1, type: Math.random() < 0.2 }; // 20% 概率生成特殊砖块
            }
        }
 
        score = 0;
        timeLimit = 30; // 每关 30 秒
        elapsedTime = 0;
    }
 
    function startGame() {
        const difficulty = document.getElementById('difficulty').value;
        initializeGame(difficulty);
 
        document.addEventListener('keydown', keyDownHandler, false);
        document.addEventListener('keyup', keyUpHandler, false);
        draw();
    }
 
    function keyDownHandler(e) {
        if (e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = true;
        } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = true;
        }
    }
 
    function keyUpHandler(e) {
        if (e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = false;
        } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = false;
        }
    }
 
    function collisionDetection() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                const b = bricks[c][r];
                if (b.status === 1) {
                    if (x > b.x && x < b.x + 75 && y > b.y && y < b.y + 20) {
                        dy = -dy;
                        b.status = 0;
                        score++;
                        if (b.type) {
                            score += 2; // 特殊砖块额外得分
                        }
                        if (score === brickRowCount * brickColumnCount) {
                            level++;
                            alert('恭喜！进入第 ' + (level + 1) + ' 关！');
                            startGame();
                        }
                    }
                }
            }
        }
    }
 
    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = '#4CAF50';
        ctx.fill();
        ctx.closePath();
    }
 
    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = '#4CAF50';
        ctx.fill();
        ctx.closePath();
    }
 
    function drawBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                if (bricks[c][r].status === 1) {
                    const brickX = c * (75 + 10) + 30;
                    const brickY = r * (20 + 10) + 30;
                    bricks[c][r].x = brickX;
                    bricks[c][r].y = brickY;
                    ctx.beginPath();
                    ctx.rect(brickX, brickY, 75, 20);
                    ctx.fillStyle = bricks[c][r].type ? '#FF5733' : '#4CAF50'; // 特殊砖块颜色不同
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }
 
    function drawScore() {
        ctx.font = '16px Arial';
        ctx.fillStyle = '#4CAF50';
        ctx.fillText('分数: ' + score, 8, 20);
        ctx.fillText('关卡: ' + (level + 1), canvas.width - 100, 20);
        ctx.fillText('剩余时间: ' + (timeLimit - Math.floor(elapsedTime)), canvas.width / 2 - 50, 20);
    }
 
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBricks();
        drawBall();
        drawPaddle();
        drawScore();
        collisionDetection();
 
        if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if (y + dy < ballRadius) {
            dy = -dy;
        } else if (y + dy > canvas.height - ballRadius) {
            if (x > paddleX && x < paddleX + paddleWidth) {
                dy = -dy;
            } else {
                alert('游戏结束！');
                document.location.reload();
            }
        }
 
        if (rightPressed && paddleX < canvas.width - paddleWidth) {
            paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
            paddleX -= 7;
        }
 
        x += dx;
        y += dy;
 
        // 更新时间
        elapsedTime += 1 / 60; // 假设每帧约 1/60 秒
        if (elapsedTime >= timeLimit) {
            alert('时间到！游戏结束！');
            document.location.reload();
        }
 
        requestAnimationFrame(draw);
    }
</script>
 
</body>
</html>

接把上面的代码放入你网站的.html网页里面访问就要可以了，自己可以随便玩下。

mxs0523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经典记忆卡片游戏html代码

记忆卡片游戏是一款简单而富有挑战性的经典游戏，旨在锻炼玩家的记忆力和观察力。游戏通常由一组图案相同的卡片组成，玩家需要通过翻转卡片找到匹配的对。每当找到一对匹配的卡片时，玩家将获得一定的分数或奖励，游戏结束时，分数最高者获胜。无论是与朋友竞技，还是单独训练，这款游戏都适合各个年龄段的玩家。它不仅带来乐趣，还能有效提升记忆力、专注力以及反应能力。在这个快节奏的现代生活中，经典记忆卡片游戏无疑是一个值得一试的好选择。网页里面访问就要可以了，自己可以随便玩下。接把上面的代码放入你网站的.
复制链接

扫一扫