用HTML5的＜canvas＞元素实现刮刮乐游戏

学习&实践爱好者

已于 2024-03-02 07:55:58 修改

阅读量891

点赞数 9

分类专栏： JavaScrip技术 HTML5与CSS3 文章标签： html5 游戏前端

于 2024-03-01 21:00:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/136388100

版权

JavaScrip技术同时被 2 个专栏收录

108 篇文章 22 订阅

订阅专栏

HTML5与CSS3

76 篇文章 14 订阅

订阅专栏

用HTML5的＜canvas＞元素实现刮刮乐游戏

用HTML5的<canvas>元素实现刮刮乐，要求：将上面的“图层”的图像可用鼠标刮去，露出下面的“图层”的图像。

示例从简单到复杂。

简单示例

准备两张图像，我这里上面的图像top_image.png，下面的图像bottom_image.png，如下图：

我这里为方便，经图片和源码文件放在同一个文件夹中。

先看用一个canvas元素实现刮刮乐，源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刮刮乐（Scratch Card）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; /* 背景色 */
        }
        canvas {
            background-image: url('bottom_image.png'); /* 底层图片 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="356" height="358"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // 加载上层图片（可被刮去的图层）
        var img = new Image();
        img.src = "top_image.png"; // 上层图片路径
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };

        // 标记是否按下鼠标（开始刮卡）
        var isDown = false;

        // 鼠标按下事件
        canvas.addEventListener('mousedown', function() {
            isDown = true;
            // 切换到“擦除”模式
            ctx.globalCompositeOperation = 'destination-out';
        });

        // 鼠标松开事件
        canvas.addEventListener('mouseup', function() {
            isDown = false;
        });

        // 鼠标移动事件
        canvas.addEventListener('mousemove', function(event) {
            if (isDown) {
                let x = event.offsetX;
                let y = event.offsetY;
                // 绘制擦除效果
                ctx.beginPath();
                ctx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圆形笔触
                ctx.fill();
                ctx.closePath();
            }
        });
    </script>
</body>
</html>

下面用两个canvas元素实现刮刮乐，底层图片和上层图片各用一个canvas元素，效果和上面的一样。实现的源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刮刮乐（Scratch Card）2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        #container {
            position: relative;
            width: 356px;
            height: 358px;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="bottomCanvas" width="356" height="358"></canvas> <!-- 底层Canvas -->
        <canvas id="topCanvas" width="356" height="358"></canvas> <!-- 上层Canvas -->
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var bottomCanvas = document.getElementById('bottomCanvas');
            var topCanvas = document.getElementById('topCanvas');
            var bottomCtx = bottomCanvas.getContext('2d');
            var topCtx = topCanvas.getContext('2d');

            // 加载底层图片
            var bottomImage = new Image();
            bottomImage.src = 'bottom_image.png'; // 底层图片路径
            bottomImage.onload = function() {
                bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);
            };

            // 加载上层图片
            var topImage = new Image();
            topImage.src = 'top_image.png'; // 上层图片路径
            topImage.onload = function() {
                topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);
            };

            var isDown = false;

            // 鼠标按下事件
            topCanvas.addEventListener('mousedown', function() {
                isDown = true;
                topCtx.globalCompositeOperation = 'destination-out';
            });

            // 鼠标松开事件
            topCanvas.addEventListener('mouseup', function() {
                isDown = false;
            });

            // 鼠标移动事件
            topCanvas.addEventListener('mousemove', function(event) {
                if (!isDown) return;
                var x = event.offsetX;
                var y = event.offsetY;
                // 绘制擦除效果
                topCtx.beginPath();
                topCtx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圆形笔触
                topCtx.fill();
                topCtx.closePath();
            });
        });

    </script>
</body>
</html>

复杂示例

下面是改进，从列表框（下拉框）选择图片刮刮乐，增加了游戏的趣味性。

先给出效果

项目（project）的目录结构如下：

我这里游戏图片：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刮刮乐（Scratch Card）3</title>
    <style>
        div{ 
            margin:20px;
            text-align:center;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        #container {
            position: relative;
            width: 356px;
            height: 358px;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div> 
        选择游戏图片
        <select id="mySelect" onchange="loadImages()"> <!-- 添加 onchange 事件 -->
            <option value="1">1</option> <!-- 更改 value 以匹配图像名称 -->
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    <div>

    <div id="container">
        <canvas id="bottomCanvas" width="356" height="358"></canvas> <!-- 底层Canvas -->
        <canvas id="topCanvas" width="356" height="358"></canvas> <!-- 上层Canvas -->
    </div>

    <script>
        function loadImages() {
            var selectElement = document.getElementById('mySelect');
            var selectedValue = selectElement.options[selectElement.selectedIndex].value;

            var bottomCanvas = document.getElementById('bottomCanvas');
            var topCanvas = document.getElementById('topCanvas');
            var bottomCtx = bottomCanvas.getContext('2d');
            var topCtx = topCanvas.getContext('2d');

            // 清除画布
            bottomCtx.clearRect(0, 0, bottomCanvas.width, bottomCanvas.height);
            topCtx.clearRect(0, 0, topCanvas.width, topCanvas.height);

            // 加载底层图片
            var bottomImage = new Image();
            bottomImage.src = 'img/bottom' + selectedValue + '.png';
            bottomImage.onload = function() {
                bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);
            };

            // 重新加载并绘制上层图片
            var topImage = new Image();
            topImage.src = 'img/top' + selectedValue + '.png'; // 确保这里的路径正确匹配你的图片路径和命名
            topImage.onload = function() {
                topCtx.globalCompositeOperation = 'source-over'; // 重置合成操作为默认值
                topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);
                // 确保刮刮效果重新应用
                addScratchEffect(topCanvas, topCtx);
            };
        }

        function addScratchEffect(canvas, ctx) {
            var isDown = false;
            // 移除之前可能添加的事件监听器
            canvas.onmousedown = null;
            canvas.onmouseup = null;
            canvas.onmousemove = null;

            // 鼠标按下事件
            canvas.onmousedown = function() {
                isDown = true;
                ctx.globalCompositeOperation = 'destination-out'; // 设置合成操作以实现刮效果
            };

            // 鼠标松开事件
            canvas.onmouseup = function() {
                isDown = false;
            };

            // 鼠标移动事件
            canvas.onmousemove = function(event) {
                if (!isDown) return;
                var x = event.offsetX;
                var y = event.offsetY;
                // 绘制擦除效果
                ctx.beginPath();
                ctx.arc(x, y, 20, 0, Math.PI * 2); // 使用圆形笔触
                ctx.fill();
            };
        }

        // 页面加载完毕后初始化画布
        document.addEventListener('DOMContentLoaded', function() {
            loadImages(); // 页面加载时也加载图片
        });

    </script>
</body>
</html>

本文是对https://blog.csdn.net/cnds123/article/details/112392014 例子的补充

关于HTML5中，使用<select>元素创建一个列表框（下拉框），并使用JavaScript来操作，可参见https://blog.csdn.net/cnds123/article/details/128353007