首页 > 其他分享 >打砖块小游戏html小游戏

打砖块小游戏html小游戏

时间:2024-08-20 17:40:26浏览次数:11  
标签:function canvas level dy ctx html 小游戏 let 砖块

这里提供一个打砖块小游戏html代码,有需要的小伙伴可以自己试试。

body内容

点击查看代码
<select id="difficulty">
    <option value="easy">简单</option>
    <option value="medium">中等</option>
    <option value="hard">困难</option>
</select>
<button onclick="startGame()">开始游戏</button>
<canvas id="brickGame" width="480" height="320"></canvas>

js代码

点击查看代码
<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>

css代码

点击查看代码
 <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>

实例可以参考:http://diuta.com/app/dzk.html

标签:function,canvas,level,dy,ctx,html,小游戏,let,砖块
From: https://www.cnblogs.com/diuta/p/18369927

相关文章

  • 学习 node.js 六 Markdown 转为 html,zlib
    目录Markdown转为html安装ejs语法标签含义 1.纯文本标签2.输出经过HTML转义的内容3.输出非转义的内容(原始内容)markedbrowserSynczlibgzipdeflategzip和deflate区别http请求压缩 Markdown转为html什么是markdown?Markdown是一种轻量级标记......
  • [Javascript] HTML Template Interpolation
    Thebasic interpolatefunctionwecancreate:functioninterpolate(str,params){letnames=Object.keys(params);//["title","description"]letvalues=Object.values(params);//["Hello","World"]......
  • C10-02-HTML示例
    HTML:02-1.html基本功能实现:<a>和<img>标签联合使用及<imgsrc="#">图片资源绝对路径引用JS使用:行内式、内嵌式、引入外部JS<input>标签:输入标签文本框<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......
  • 华为云服务器搭建小游戏
    在当今数字化的时代,搭建自己的小游戏服务器成为了许多开发者和爱好者的热门选择。华为云服务器凭借其强大的性能、稳定的服务和丰富的功能,为我们提供了一个理想的平台。接下来,让我们一起探索如何在华为云服务器上搭建小游戏。一、准备工作注册华为云账号并完成实名认证。开......
  • pxe.sh_替换/var/www/html/ks/中ks.cfg
    #!/bin/bashosversion=kylin_HPCcdromdir="/mnt"tftpdir="/var/lib/tftpboot"dhcpNet="168.7.10.0"netMask="255.255.255.0"dhcpRange="168.7.10.100168.7.10.200"nextServer="168.7.10.70"isoimage=&q......
  • html(超详细知识点)
    ‌HTML是超文本标记语言(HyperTextMarkupLanguage)的缩写,是一种用于创建网页的标准标记语言。而CSS则是对网页进行下一步的美化,两者相辅相成,才能创建一个完美的网页。对于有一定编程基础的人来说,这门语言相对简单,但是其中知识点繁多,有人望而却步;有人学过也已经忘得差不多了。......
  • html JS 语音识别
    1、语音识别的过程语音识别涉及三个过程:首先,需要设备的麦克风接收这段语音;其次,语音识别服务器会根据一系列语法(基本上,语法是你希望在具体的应用中能够识别出来的词汇)来检查这段语音;最后,当一个单词或者短语被成功识别后,结果会以文本字符串的形式返回(结果可以有多个),以及更多......
  • HTML
    titlepublish01-HTML标签:图片标签trueimg标签介绍<imgsrc="图片的URL"/>能插入的图片类型能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等。不能往网页中插入的图片格式是:psd、ai等。img标签的src属性这里涉及到图片的一个属性:src属性:指图片的路径......
  • HTML5服装电商网上商城模板源码
    文章目录1.设计来源1.1主界面1.2购物车界面1.3电子产品界面1.4商品详情界面1.5联系我们界面1.6各种标签演示界面2.效果和源码2.1动态效果2.2源代码源码下载万套模板,程序开发,在线开发,在线沟通         【博主推荐】:前些天发现了一个巨牛的人工智能......
  • 经典记忆卡片游戏html代码
    记忆卡片游戏是一款简单而富有挑战性的经典游戏,旨在锻炼玩家的记忆力和观察力。游戏通常由一组图案相同的卡片组成,玩家需要通过翻转卡片找到匹配的对。每当找到一对匹配的卡片时,玩家将获得一定的分数或奖励,游戏结束时,分数最高者获胜。无论是与朋友竞技,还是单独训练,这款游戏都适合......