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

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

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

    示例从简单到复杂。

    简单示例

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

     

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>刮刮乐（Scratch Card）title>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.             box-sizing: border-box;
    11.         }
    12.         body {
    13.             height: 100vh;
    14.             display: flex;
    15.             justify-content: center;
    16.             align-items: center;
    17.             background-color: #f0f0f0; /* 背景色 */
    18.         }
    19.         canvas {
    20.             background-image: url('bottom_image.png'); /* 底层图片 */
    21.             background-size: cover;
    22.         }
    23.     style>
    24. head>
    25. <body>
    26.     <canvas id="canvas" width="356" height="358">canvas>
    27.     <script>
    28.         var canvas = document.getElementById("canvas");
    29.         var ctx = canvas.getContext("2d");
    30.  
    31.         // 加载上层图片（可被刮去的图层）
    32.         var img = new Image();
    33.         img.src = "top_image.png"; // 上层图片路径
    34.         img.onload = function() {
    35.             ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    36.         };
    37.  
    38.         // 标记是否按下鼠标（开始刮卡）
    39.         var isDown = false;
    40.  
    41.         // 鼠标按下事件
    42.         canvas.addEventListener('mousedown', function() {
    43.             isDown = true;
    44.             // 切换到“擦除”模式
    45.             ctx.globalCompositeOperation = 'destination-out';
    46.         });
    47.  
    48.         // 鼠标松开事件
    49.         canvas.addEventListener('mouseup', function() {
    50.             isDown = false;
    51.         });
    52.  
    53.         // 鼠标移动事件
    54.         canvas.addEventListener('mousemove', function(event) {
    55.             if (isDown) {
    56.                 let x = event.offsetX;
    57.                 let y = event.offsetY;
    58.                 // 绘制擦除效果
    59.                 ctx.beginPath();
    60.                 ctx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圆形笔触
    61.                 ctx.fill();
    62.                 ctx.closePath();
    63.             }
    64.         });
    65.     script>
    66. body>
    67. html>

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>刮刮乐（Scratch Card）2title>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.             box-sizing: border-box;
    11.         }
    12.         body {
    13.             height: 100vh;
    14.             display: flex;
    15.             justify-content: center;
    16.             align-items: center;
    17.             background-color: #f0f0f0;
    18.         }
    19.         #container {
    20.             position: relative;
    21.             width: 356px;
    22.             height: 358px;
    23.         }
    24.         canvas {
    25.             position: absolute;
    26.             top: 0;
    27.             left: 0;
    28.         }
    29.     style>
    30. head>
    31. <body>
    32.     <div id="container">
    33.         <canvas id="bottomCanvas" width="356" height="358">canvas> 
    34.         <canvas id="topCanvas" width="356" height="358">canvas> 
    35.     div>
    36.     <script>
    37.         document.addEventListener('DOMContentLoaded', function() {
    38.             var bottomCanvas = document.getElementById('bottomCanvas');
    39.             var topCanvas = document.getElementById('topCanvas');
    40.             var bottomCtx = bottomCanvas.getContext('2d');
    41.             var topCtx = topCanvas.getContext('2d');
    42.  
    43.             // 加载底层图片
    44.             var bottomImage = new Image();
    45.             bottomImage.src = 'bottom_image.png'; // 底层图片路径
    46.             bottomImage.onload = function() {
    47.                 bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);
    48.             };
    49.  
    50.             // 加载上层图片
    51.             var topImage = new Image();
    52.             topImage.src = 'top_image.png'; // 上层图片路径
    53.             topImage.onload = function() {
    54.                 topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);
    55.             };
    56.  
    57.             var isDown = false;
    58.  
    59.             // 鼠标按下事件
    60.             topCanvas.addEventListener('mousedown', function() {
    61.                 isDown = true;
    62.                 topCtx.globalCompositeOperation = 'destination-out';
    63.             });
    64.  
    65.             // 鼠标松开事件
    66.             topCanvas.addEventListener('mouseup', function() {
    67.                 isDown = false;
    68.             });
    69.  
    70.             // 鼠标移动事件
    71.             topCanvas.addEventListener('mousemove', function(event) {
    72.                 if (!isDown) return;
    73.                 var x = event.offsetX;
    74.                 var y = event.offsetY;
    75.                 // 绘制擦除效果
    76.                 topCtx.beginPath();
    77.                 topCtx.arc(x, y, 20, 0, Math.PI * 2, false); // 使用圆形笔触
    78.                 topCtx.fill();
    79.                 topCtx.closePath();
    80.             });
    81.         });
    82.  
    83.     script>
    84. body>
    85. html>

    复杂示例

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

    先给出效果

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

    我这里游戏图片：

    源码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>刮刮乐（Scratch Card）3title>
    6.     <style>
    7.         div{ 
    8.             margin:20px;
    9.             text-align:center;
    10.         }
    11.  
    12.         * {
    13.             margin: 0;
    14.             padding: 0;
    15.             box-sizing: border-box;
    16.         }
    17.         body {
    18.             height: 100vh;
    19.             display: flex;
    20.             justify-content: center;
    21.             align-items: center;
    22.             background-color: #f0f0f0;
    23.         }
    24.         #container {
    25.             position: relative;
    26.             width: 356px;
    27.             height: 358px;
    28.         }
    29.         canvas {
    30.             position: absolute;
    31.             top: 0;
    32.             left: 0;
    33.         }
    34.     style>
    35. head>
    36. <body>
    37.     <div> 
    38.         选择游戏图片
    39.         <select id="mySelect" onchange="loadImages()"> 
    40.             <option value="1">1option> 
    41.             <option value="2">2option>
    42.             <option value="3">3option>
    43.         select>
    44.     <div>
    45.  
    46.     <div id="container">
    47.         <canvas id="bottomCanvas" width="356" height="358">canvas> 
    48.         <canvas id="topCanvas" width="356" height="358">canvas> 
    49.     div>
    50.  
    51.     <script>
    52.         function loadImages() {
    53.             var selectElement = document.getElementById('mySelect');
    54.             var selectedValue = selectElement.options[selectElement.selectedIndex].value;
    55.  
    56.             var bottomCanvas = document.getElementById('bottomCanvas');
    57.             var topCanvas = document.getElementById('topCanvas');
    58.             var bottomCtx = bottomCanvas.getContext('2d');
    59.             var topCtx = topCanvas.getContext('2d');
    60.  
    61.             // 清除画布
    62.             bottomCtx.clearRect(0, 0, bottomCanvas.width, bottomCanvas.height);
    63.             topCtx.clearRect(0, 0, topCanvas.width, topCanvas.height);
    64.  
    65.             // 加载底层图片
    66.             var bottomImage = new Image();
    67.             bottomImage.src = 'img/bottom' + selectedValue + '.png';
    68.             bottomImage.onload = function() {
    69.                 bottomCtx.drawImage(bottomImage, 0, 0, bottomCanvas.width, bottomCanvas.height);
    70.             };
    71.  
    72.             // 重新加载并绘制上层图片
    73.             var topImage = new Image();
    74.             topImage.src = 'img/top' + selectedValue + '.png'; // 确保这里的路径正确匹配你的图片路径和命名
    75.             topImage.onload = function() {
    76.                 topCtx.globalCompositeOperation = 'source-over'; // 重置合成操作为默认值
    77.                 topCtx.drawImage(topImage, 0, 0, topCanvas.width, topCanvas.height);
    78.                 // 确保刮刮效果重新应用
    79.                 addScratchEffect(topCanvas, topCtx);
    80.             };
    81.         }
    82.  
    83.         function addScratchEffect(canvas, ctx) {
    84.             var isDown = false;
    85.             // 移除之前可能添加的事件监听器
    86.             canvas.onmousedown = null;
    87.             canvas.onmouseup = null;
    88.             canvas.onmousemove = null;
    89.  
    90.             // 鼠标按下事件
    91.             canvas.onmousedown = function() {
    92.                 isDown = true;
    93.                 ctx.globalCompositeOperation = 'destination-out'; // 设置合成操作以实现刮效果
    94.             };
    95.  
    96.             // 鼠标松开事件
    97.             canvas.onmouseup = function() {
    98.                 isDown = false;
    99.             };
    100.  
    101.             // 鼠标移动事件
    102.             canvas.onmousemove = function(event) {
    103.                 if (!isDown) return;
    104.                 var x = event.offsetX;
    105.                 var y = event.offsetY;
    106.                 // 绘制擦除效果
    107.                 ctx.beginPath();
    108.                 ctx.arc(x, y, 20, 0, Math.PI * 2); // 使用圆形笔触
    109.                 ctx.fill();
    110.             };
    111.         }
    112.  
    113.         // 页面加载完毕后初始化画布
    114.         document.addEventListener('DOMContentLoaded', function() {
    115.             loadImages(); // 页面加载时也加载图片
    116.         });
    117.  
    118.     script>
    119. body>
    120. html>

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

    关于HTML5中，使用