نموذج التعليمات البرمجية لتنفيذ تأثيرات الرسوم المتحركة لآلة غاشابون باستخدام القماش

في غمضة عين، كنت متدربًا لمدة شهرين، وتعقد الشركة حدثًا ليوم العضوية كل شهر، وتتمثل مهمة هذا الشهر في إجراء حدث يانصيب لآلة غاشابون، وهناك واجهات للبيانات وما إلى ذلك هل بقيت على الواجهة الأمامية؟ كانت المهمة الأكبر هي مجرد تحقيق الرسوم المتحركة لآلة الجاشابون.

كنت متحمسًا للعثور على رسوم متحركة لآلة غاشابون من الإنترنت، لكنني وجدت أنها تستخدم رسوم متحركة CSS مباشرة لكتابة الرسوم المتحركة لغاشابون حتى الموت، ولم يعجبني ذلك كثيرًا، لذلك اخترت استخدام القماش لرسم الرسوم المتحركة العشوائية للgashapon. أولاً، كتبت عرضًا توضيحيًا بسيطًا لآلة غاشابون وقمت بمعاينة التأثير.

تصميم آلة Gashapon بسيط نسبيًا، ما عليك سوى إضافة بعض العناصر إلى الخلفية الأساسية، وأهم شيء هو علامة اللوحة القماشية.

 <div class=bg> <span id=message>انقر للرسم</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png class =lighting/> </div></div><img src=img/start-btn.png id=start onclick=play()/><div class=award><span id=awardBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

ورقة الأنماط المرفقة:

 الجسم {الهامش: 0؛ الحشو: 0؛ الحدود: لا شيء؛}.bg {الخلفية: url(../img/bg.png) أعلى عدم تكرار؛ حجم الخلفية: 100٪؛ الفائض: مخفي؛ الموضع: مطلق ;العرض: 400 بكسل;الارتفاع: 100%;الهامش العلوي: 0;الهامش الأيسر: 50%;-تحويل webkit: ترجمة (-50٪)؛-moz-تحويل: ترجمة (-50٪)؛-ms-تحويل: ترجمة (-50٪)؛-o-تحويل: ترجمة (-50٪)؛تحويل: ترجمة (-50٪) );}#message {الموضع: مطلق؛ محاذاة النص: المركز؛ الارتفاع: 25 بكسل؛ حجم الخط: 22 بكسل؛ الهامش العلوي: 110 بكسل؛ الهامش الأيسر: 50%؛-webkit-transform: ترجمة (-50%)؛-moz-transform: ترجمة (-50%)؛-ms-transform: ترجمة (-50%)؛-o-transform: ترجمة (-50%) ;تحويل: ترجمة(-50%));}.lotterybg {background: url(../img/lotterybg.png) أعلى بدون تكرار;حجم الخلفية: 100%;التجاوز: مرئي;العرض: 80%;الارتفاع: 100%;الهامش العلوي: 160 بكسل;الهامش الأيسر: 50%;-webkit-transform: ترجمة(-50%));-moz-تحويل: ترجمة(- 50%)؛-ms-transform: ترجمة (-50%)؛-o-تحويل: ترجمة (-50%)؛تحويل: ترجمة (-50٪)؛} #myCanvas {الموضع: مطلق؛ الحدود: لا شيء؛ العرض: 285 بكسل؛ الارتفاع: 170 بكسل؛ الهامش العلوي: 15 بكسل؛ الهامش الأيسر: 50٪؛ -تحويل webkit: ترجمة (-50٪) );-moz-تحويل: ترجمة(-50%));-ms-تحويل: ترجمة(-50%);-o-تحويل: ترجمة (-50٪)؛ تحويل: ترجمة (-50٪)؛}. الإضاءة {عرض: كتلة؛ الحد الأقصى للعرض: 99٪؛ الهامش العلوي: 0؛ الهامش الأيسر: 0؛} #بدء {الموضع: مطلق ;مؤشر-z: 3;العرض: 202 بكسل;الهامش العلوي: 413 بكسل;الهامش الأيسر: 50%;-تحويل webkit: ترجمة (-50٪)؛-moz-تحويل: ترجمة (-50٪)؛-ms-تحويل: ترجمة (-50٪)؛-o-تحويل: ترجمة (-50٪)؛تحويل: ترجمة (-50٪) );).imgSrc {العرض: لا شيء؛ الموضع: مطلق؛}.award {الموضع: مطلق؛ الحدود: لا شيء؛ العرض: 60 بكسل؛ الارتفاع: 200 بكسل؛ الأعلى: 470 بكسل;الهامش الأيسر: 50%;-تحويل webkit: ترجمة(-50%));-moz-تحويل: ترجمة(-50%);-ms-تحويل: ترجمة(-50%);-o-تحويل: ترجمة (-50٪)؛ تحويل: ترجمة (-50٪)؛}

بهذه الطريقة، يتم الانتهاء من التخطيط، والعمل الرئيسي التالي هو رسم الصورة على القماش.

أولا تحديد المتغيرات المختلفة:

 var Canvas = document.getElementById('myCanvas');var ctx = Canvas.getContext('2d');var ball1 = document.getElementById('ball1');// كائن الصورة var ball2 = document.getElementById('ball2' );// كائن الصورة var ball3 = document.getElementById('ball3');// كائن الصورة var ball4 = document.getElementById('ball4');// كائن الصورة var ballList = [ball1, ball2, ball3, ball4];// مصفوفة كائن الصورة var ballNum = 4;// عدد الكرات في آلة الجاشابون var AwardList = [ ];// مجموعة الكرات الصغيرة في آلة الجاشابون var timer;// Timer var Award = document.getElementById('awardBall'); var message = document.getElementById('message');

كل غاشابون في آلة غاشابون هو كائن، لذلك تحتاج إلى تعريف كائن غاشابون:

 function Ball(index, img) { this.r = 30;// نصف قطر الكرة this.x = this.rand(canvas.width - this.r * 2);// الإحداثي الإحداثي الأولي للكرة this. y = this .rand(canvas.height - this.r * 2);// الإحداثي الرأسي الأولي للكرة this.color = Index;// لون الكرة، ممثلاً بالحرف المنخفض this.img = img; // مادة الكرة تفعل { this .speedX = this.rand(20) - 10; } while (this.speedX < 5);// تغير سرعة الخط الفاصل للكرة { this.speedY = this.rand(20) - 10 } while (this.speedY < 5 );// الإحداثيات الرأسية للكرة تتغير سرعتها}

مؤشر القيمة لكائن الجاشابون الوارد هو لون الكرة، ممثلة بالأرقام من 1 إلى 4، وimg هو كائن الصورة المستخدم لرسم الجاشابون.

في الخطوة السابقة، تمت إضافة السمات إلى الجاشابون. الخطوة التالية هي إضافة توابع إلى الجاشابون:

 Ball.prototype = { rand: function (num) {// رقم عشوائي return Math.random() * num }, run: function () {// وظيفة حركة الكرة this.x += this.speedX y += this.speedY; if (this.x > Canvas.width - this.r * 2) {// تصطدم الكرة بالحدود اليمنى، وتصبح سرعة الإحداثي سالبة this.speedX = -this.speedX } if (this.speedX; .x < 0) {// تضرب الكرة الحد الأيسر، وتصبح سرعة الإحداثي المحوري موجبة this.speedX = Math.abs(this.speedX) } if (this.y > Canvas.height - this.r * 2) { // عندما تضرب الكرة الحد الأدنى، تصبح السرعة الإحداثية سالبة this.speedY = -this.speedY } if (this.y < 0) {// عندما تضرب الكرة الحد العلوي، تصبح السرعة الإحداثية موجبة this. .سبيدY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);// ارسم الكرة}}

الغرض الرئيسي هو إضافة وظيفة الحركة إلى النموذج الأولي لكائن الجاشابون. تتمثل وظيفة وظيفة الحركة في جعل الجاشابون يتحرك وفقًا لسرعته ويرتد عندما يلمس الحدود.

الخطوة التالية هي وضع الغشابون في آلة الغشابون:

 دالة init() {// التهيئة لـ (let i = 0; i < ballNum; i++) {// إنشاء كرات بألوان مختلفة بشكل عشوائي Let Index = Math.floor(4 * Math.random()); = new Ball(index, ballList[index]);// كائن كرة جديد} window.clearInterval(timer);// مسح مؤقت الموقت = setInterval(function () { ctx.clearRect(0, 0, Canvas.width, Canvas.height);// امسح اللوحة القماشية for (let i = 0; i < AwardList.length; i++) { AwardList[i].run(); }//اجعل الكرة تتحرك}, 15) }

بهذه الطريقة، توجد بالفعل كرات صغيرة في آلة الغشابون.

العملية الرئيسية لبدء تشغيل الجاشابون هي النقر على الزر، وسوف تقلل ماكينة الجاشابون عدد بيض الجاشابون وتحصل على بيض الجاشابون المقابل، وستكون الشاشة الفائزة هي:

 function play() { if (awardList. length === 0) {// لا توجد كرة في مجموعة الجوائز تنبيه('ابدأ مرة أخرى!'); else { window.clearInterval(timer);// امسح المؤقت Let r = AwardList.pop();// قلل الكرات في مجموعة الجوائز timer = setInterval(function () { ctx.clearRect(0, 0, Canvas.width, Canvas.height);// امسح اللوحة القماشية for (let i = 0; i < AwardList.length; i++) { AwardList[i].run(); }//اجعل الكرة تتحرك}, 15) التبديل (r.color) {// حالة الرسوم المتحركة لإسقاط الكرة 0: Award.setAttribute('class', 'dropBall1'); 'dropBall2'); استراحة: Award.setAttribute('class', 'dropBall3'); // نجح الجاشابون ويطالب بمنح الجائزة.setAttribute('class', ''); التبديل (r.color) { case 0: message.innerText = 'Purple ball'; 1: message.innerText = 'Green ball!';

يتم إكمال الرسوم المتحركة المتساقطة لـgashapon هنا باستخدام الإطارات الرئيسية للرسوم المتحركة CSS:

 .dropBall1 {المحتوى: ;الموضع: مطلق;اليسار: 0;الأعلى: 0;العرض: 60px;الارتفاع: 60px;العرض: كتلة;الخلفية: url(../img/1.png) بدون تكرار;حجم الخلفية : يحتوي على؛ الرسوم المتحركة: إسقاط 1s بسهولة للأمام؛ -webkit-animation: إسقاط 1s بسهولة للأمام؛ }.dropBall2 {المحتوى: ؛ الموضع: مطلق؛ اليسار: 0؛ الأعلى: 0؛ العرض: 60 بكسل؛ الارتفاع: 60 بكسل؛ العرض: كتلة؛ الخلفية: url(../img/2.png) بدون تكرار؛ حجم الخلفية: يحتوي على ؛ الرسوم المتحركة: إسقاط 1s بسهولة للأمام؛-webkit-animation: إسقاط 1s بسهولة للأمام؛ }.dropBall3 {content: ;position: مطلق؛ يسار: 0؛ أعلى: 0؛ العرض: 60 بكسل؛ الارتفاع: 60 بكسل؛ العرض: كتلة؛ الخلفية: url(../img/3.png) بدون تكرار؛ حجم الخلفية: يحتوي على؛ الرسوم المتحركة: إسقاط 1 ثانية بسهولة -خارج للأمام؛-webkit-animation: إسقاط 1 ثانية للأمام بسهولة؛ }.dropBall4 {المحتوى: ;الموضع: مطلق;يسار: 0;الأعلى: 0;العرض: 60px;الارتفاع: 60px;العرض: كتلة;الخلفية: url(../img/4.png) بدون تكرار;حجم الخلفية: يحتوي;الرسوم المتحركة: إسقاط 1s بسهولة للأمام; -webkit-animation: إسقاط 1 ثانية للأمام بسهولة؛}@keyframes drop { 0% { تحويل: مقياس (0.7 }); 50% { تحويل: مقياس (1)؛ } 51% { تحويل: ترجمة Y(0px) } 100% { تحويل: ترجمة Y(100px); (0.7) } 50% { -تحويل webkit: مقياس (1) } 51% { -تحويل webkit: TranslationY(0px); } 100% { -webkit-transform: TranslationY(100px }}

بالطبع، تحتاج إلى إضافة init(); في النهاية لتشغيل آلة Gashapon. عند هذه النقطة، اكتملت آلة Gashapon البسيطة هذه، وتمت معاينة التأثير.

على الرغم من أن هذا العرض التوضيحي بسيط نسبيًا، إلا أنه لا تزال هناك بعض النقاط التي يجب ملاحظتها وبعض المجالات التي يمكن تحسينها.

ملحوظة

كائن img

علامات الصور هذه في html:

 <img src=img/1.png id=ball1 class=imgSrc><img src=img/2.png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

تتم كتابة النمط أيضًا كـ show: none;. ويتم كتابته للحصول على كائن img في js. بالطبع، يمكنك أيضًا كتابة علامات img هذه مباشرةً في ملف js دون كتابتها بتنسيق html:

 var img = new Image() img.src = 'img/1.png';

بهذه الطريقة، يمكنك أيضًا الحصول على كائن img ويمكن استخدامه أيضًا لرسم جاشابون.

يتم مسح المؤقت في الكود قبل استدعاء المؤقت. والغرض من ذلك هو أنه إذا لم يتم مسح المؤقت، فسيستمر المؤقت في العد، مما يتسبب في أن تصبح الرسوم المتحركة غريبة أكثر فأكثر.

عند الرسم على اللوحة القماشية، قد تكون الصورة غير واضحة أو مكبرة. يمكن حل هذا الموقف عن طريق تعيين سمات العرض والارتفاع لعلامة اللوحة القماشية لتكون نفس سمات العرض والارتفاع للنمط.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.