نحوه ایجاد افکت کارت خش با جاوا اسکریپت وانیلی
انتشار: مرداد 25، 1403
بروزرسانی: 17 تیر 1404

نحوه ایجاد افکت کارت خش با جاوا اسکریپت وانیلی


بیایید با نگاهی به آنچه که ایجاد می کنیم شروع کنیم. در پایان این آموزش، چیزی شبیه به این خواهید داشت (نشانگر ماوس خود را روی پانل خراش حرکت دهید و مشاهده کنید که یک کد منحصر به فرد تولید شده خود را نشان می دهد):

نمای کلی

در HTML، عنصر ابزار قدرتمندی برای رندر مستقیم گرافیک های دو بعدی مانند تصاویر، اشکال و متن در مرورگر وب است. این یک سطح طراحی را ارائه می دهد که می تواند از طریق جاوا اسکریپت دستکاری شود و به ما امکان می دهد گرافیک های پویا و تعاملی ایجاد کنیم. ما به تکیه می کنیم عناصر موجود در این آموزش

ما با ایجاد یک عنصر کارت که یک کد تصادفی را نمایش می دهد شروع می کنیم. بعد، یک بوم با ابعاد دقیق عنصر کارت ایجاد می کنیم. این بوم در بالای عنصر کارت پوشانده می شود و شماره را در زیر آن پنهان می کند.

برای شبیه سازی افکت خراش، از آن استفاده می کنیم globalCompositeOperation ویژگی بافت بوم با تنظیم ctx.globalCompositeOperation = "destination-out," وقتی کاربر موس را روی بوم می برد، قسمت هایی از بوم پاک می شود. با خراشیدن (حرکت موس) روی بوم توسط کاربر، به تدریج کد روی کارت آشکار می شود.

ساختار HTML

ساختار HTML با استفاده از Bootstrap به شکل زیر خواهد بود:

1
 class="d-flex flex-column align-items-center justify-content-center vh-100">
2

3
  
4
   class="fas fa-arrow-down fa-6x mb-4">
5
  
 class="row mt-5">
6
    
 class="col-md-4 col-sm-6 col-8">
7
      
 id="card" class="mx-auto border position-relative bg-white">
8
        
 id="code" class="text-center">

9
        
10
class="position-absolute top-0 start-0"
11
id="scratch-pad"
12
        >
13
      
14
    
15
  
16

این عنصر با استفاده از کلاس position-absolute همراه با در بالای عنصر کارت قرار می گیرد top-0 و start-0. این سبک ها تضمین می کنند که از گوشه سمت چپ بالای عنصر والد شروع می شود.

پیوند CDN Bootstrap را در سند HTML خود اضافه کنید section.\xa0

1

2
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
3
  rel="stylesheet"
4
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
5
  crossorigin="anonymous"
6
/>

Custom CSS Styles

Add a custom font and a background color to the body of the page.

1
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
2
body {
3
    font-family: "DM Mono", monospace;
4
    background-color: #f3f1f5;
5
}

The card element will have the following dimensions

1
  #card {
2
    width: 400px;
3
    height: 90px;
4

5
  }

Add the following styles to the code element, which will display the random characters.

1
#code {
2
    font-size: 50px;
3
    padding: 20px;
4
    background-color: white;
5
    line-height: 40px;
6
    font-weight: 800;
7
  }

Custom Cursor

In CSS, the cursor property controls the appearance of the mouse pointer when it hovers over an element. While the default value of the cursor is a hand icon, you can also customize the cursor by specifying an image using the url ارزش این به شما اجازه می دهد تا یک تجربه اسکرول منحصر به فرد ایجاد کنید. بیایید مکان نما سفارشی خود را تعریف کنیم. 

1
canvas {
2
cursor: url("https://essykings.github.io/JavaScript/coin42.png") 50 50,
3
  crosshair;
4
}

در مورد ما، ما از این سکه (دانلود شده از یکی از رندرهای سکه سه بعدی Envato) به عنوان مکان نما استفاده می کنیم.

کاراکترهای تصادفی ایجاد کنید

برای اطمینان از منحصربفرد بودن کاراکترهای آشکار شده پس از خراشیدن، ما تابعی ایجاد می کنیم تا هر بار که برنامه بارگذاری می شود، یک کاراکتر تصادفی ایجاد کند. یک تابع به نام ایجاد کنید generateRandomString() و کد زیر را اضافه کنید

1
function generateRandomString(length) {
2
    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
3
    let code = "";
4
    for (let i = 0; i < length; i++) {
5
        code += characters.charAt(
6
        Math.floor(Math.random() * characters.length)
7
      );
8
    }
9
    return code;
10
  }

در کد بالا:

  • const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; یک کاراکتر متغیر را تعریف می کند که شامل حروف الفبای بزرگ (AZ) و ارقام (0-9) است.
  • let code = "; یک رشته خالی را برای ذخیره رشته کاراکتر نهایی مقداردهی اولیه می کند.
  • برای حلقه for، یک عدد تصادفی تولید و در متغیر کد در هر تکرار ذخیره می شود.

محتوای متن عنصر کد را برای نمایش کاراکتر تولید شده به روز کنید.

1
document.getElementById("code").textContent = generateRandomString(12);

برنامه تا اینجا به این صورت است:

مرحله بعدی این است که روی بوم نقاشی بکشید تا محتوای روی عنصر کارت پنهان شود.

نقاشی بوم

ابتدا بوم را بگیرید و عرض و ارتفاع را با عنصر کارت یکسان کنید.

1
const canvas = document.getElementById("scratch-pad");
2
canvas.width = card.offsetWidth;
3
canvas.height = card.offsetHeight;

بعد، زمینه بوم را دریافت کنید. یک شیء زمینه جایی است که نقشه ها ارائه می شوند.

1
const ctx = canvas.getContext("2d");

مرحله بعدی این است که بوم را با یک رنگ گرادیان سفارشی پر کنید تا محتوای روی عنصر کارت پنهان شود. برای ایجاد گرادیان، یک نمونه گرادیان را با استفاده از createLinearGradient() روش

1
 const gradient = ctx.createLinearGradient(
2
        0,
3
        0,
4
        canvas.width,
5
        canvas.height
6
      );

شیب از گوشه سمت چپ بالا (0، 0) شروع می شود و در گوشه پایین سمت راست (جایی که بوم به پایان می رسد) ختم می شود.

حالا که یک گرادیان داریم، می توانیم رنگ هایی را که روی گرادیان ظاهر می شوند را مشخص کنیم. 

1
gradient.addColorStop(0, "#DFBD69");
2
gradient.addColorStop(1, "#926F34");
3
ctx.fillStyle = gradient;

ctx.fillStyle به زمینه می گوید که هنگام طراحی از چه چیزی استفاده شود. در این حالت، از یک گرادیان قهوه ای طلایی برای پر کردن اشکال ترسیم شده روی بوم استفاده می شود.

در نهایت با کشیدن یک مستطیل روی کل بوم، کل بوم را با رنگ گرادیان پر کنید.

1
  ctx.fillRect(0, 0, canvas.width, canvas.height);

تا اینجا ما این را داریم:

افکت Scratch Off

آخرین مرحله اجرای افکت scratch-off است. یک متغیر به نام تعریف کنید isDrawing; این متغیر پیگیری می کند که آیا ما روی بوم نقاشی می کشیم یا خیر. در ابتدا متغیر روی false تنظیم می شود

سپس، ما باید شنوندگان رویداد را برای حرکات ماوس تنظیم کنیم تا رویدادهای ماوس و لمس را ضبط کنند. هنگامی که کاربر موس را حرکت می دهد یا از انگشت برای لمس بوم استفاده می کند (در صفحه های لمسی)، افکت خراش اجرا می شود.

1
canvas.addEventListener("mousemove", (e) => {
2
isDrawing = true;
3

4
});
5

6

7
canvas.addEventListener("touchstart", (e) => {
8
isDrawing = true;
9

10
});
11

12
canvas.addEventListener("touchmove", (e) => {
13

14
}
15
});
16

در اینجا خلاصه ای از رویدادهای ماوس و لمس آمده است:

  • mousemove رویداد: در طول این رویداد، isDrawing متغیر روی true تنظیم شده است، به این معنی که ترسیم باید شروع شود.
  • touchstart رویداد: در طول این رویداد isDrawing متغیر روی true تنظیم شده است، که نشان دهنده شروع یک طراحی مبتنی بر لمس است.
  • touchmove رویداد: ما افکت خراش را در طول زمان اجرا خواهیم کرد touchmove رویداد (یعنی زمانی که کاربر انگشت خود را روی صفحه حرکت می دهد).

بیایید هر رویداد را به طور مستقل اجرا کنیم. ما با رویداد حرکت ماوس شروع خواهیم کرد. وقتی استفاده شروع به حرکت ماوس کرد، می خواهیم افکت خراش روی بوم اعمال شود.

ایجاد کنید scratch() تابعی که وقتی کاربر شروع به کشیدن می کند فراخوانی می شود.

1
function scratch(e) {
2

3
}

در scratch() عملکرد، موقعیت ماوس یا رویداد لمسی را نسبت به بوم با استفاده از آن محاسبه کنید getBoundingClientRect(). این getBoundingClientRect() روش برای بدست آوردن موقعیت یک عنصر نسبت به viewport مفید است. در مورد ما، ما می خواهیم موقعیت ماوس یا لمس را نسبت به بوم بدست آوریم.

برای بدست آوردن موقعیت ماوس یا لمس نسبت به بوم، موقعیت بوم را از مختصات رویداد کم می کنیم:

1
function scratch(e) {
2
    const rect = canvas.getBoundingClientRect();
3
    const x = e.clientX - rect.left;
4
    const y = e.clientY - rect.top;
5
}

عملیات ترکیبی را روی destination-out; این بدان معنی است که هر چیزی که روی بوم کشیده شده باشد، آنچه را که قبلاً روی بوم وجود دارد پاک می کند یا آن را شفاف می کند. هنگامی که بوم پاک می شود، محتوای روی عنصر کارت آشکار می شود.

دایره ای با شعاع 20 پیکسل رسم می شود که به طور موثر یک "خراش" ایجاد می کند. اثر روی بوم تابع را به صورت زیر به روز کنید.

1
function scratch(e) {
2
    const rect = canvas.getBoundingClientRect();
3
    const x = e.clientX - rect.left;
4
    const y = e.clientY - rect.top;
5

6
    ctx.globalCompositeOperation = "destination-out";
7
    ctx.beginPath();
8
    ctx.arc(x, y, 20, 0, Math.PI * 2, false);
9
    ctx.fill();
10
  }
  • ctx.beginPath(); یک مسیر ترسیمی را آغاز می کند
  • ctx.arc(x, y, 20, 0, Math.PI * 2, false); یک مسیر دایره ای (قوس) با شعاع 20 پیکسل با شروع از موقعیت ماوس ترسیم می کند.
  • ctx.fill() دایره را پر می کند و به طور موثر بخشی از بوم را که توسط قوس دایره پوشانده شده است پاک می کند.

اکنون، توابع رویداد ماوس را به روز کنید. با حرکت ماوس، تنظیم خواهیم کرد isDrawing به true برای نشان دادن اینکه طراحی شروع شده است و سپس تابع scratch() را فراخوانی کنید تا پاک کردن با حرکت ماوس شروع شود.

1
canvas.addEventListener("mousemove", (e) => {
2
isDrawing = true;
3
scratch(e);
4
});

را به روز کنید touchstart و touchmove رویدادها به شرح زیر است: به شرح زیر.

اثر خراش با شروع لمس شروع می شود. e.touches(0) اشاره به اولین نقطه تماس دارد. همانطور که کاربر انگشتان خود را روی بوم روی دستگاه های لمسی حرکت می دهد، جلوه خراش ادامه می یابد.

1
canvas.addEventListener("touchstart", (e) => {
2
    isDrawing = true;
3
    scratch(e.touches(0));
4
  });
5

6
  canvas.addEventListener("touchmove", (e) => {
7
    if (isDrawing) {
8
      scratch(e.touches(0));
9
    }
10
  });

نتیجه گیری

ما با موفقیت با استفاده از جاوا اسکریپت وانیلی یک جلوه خراش واقعی ایجاد کرده ایم! این برنامه قدرت HTML5 را به نمایش گذاشته است عنصر می تواند در ایجاد تجربیات کاربر جذاب و تعاملی باشد. در زیر یادآوری محصول نهایی است.


منبع: https://webdesign.tutsplus.com/how-to-create-a-scratch-card-effect-in-vanilla-javascript--cms-108922t
نویسنده: تیم تحریریه روحانی نژاد