تصف هذه المقالة الكود المصدري لـ Sword Flip of JS Mini-Game ، وهو رمز مصدر ممتاز للغاية للعبة. شاركه للرجوع إليه. التفاصيل كما يلي:
1. مقدمة اللعبة:
هذه لعبة الاقتران التقليدية مع ما مجموعه عشرة مستويات.
1. اللعبة ترسم بشكل عشوائي 9 بطاقات من 42 بطاقة للعب ، كل مجموعة هي نفس البطاقات ، مع ما مجموعه 18 بطاقة.
2. التحول إلى اثنين متطابقة على التوالي هو النصر. عندما يتم تشغيل جميع المجموعات التسعة ، سوف تمر. إذا لم تتحول إلى صورتين متتاليتين ، فأنت بحاجة إلى تحويلها مرة أخرى.
3. اللعبة لديها 10 مستويات ، وستكون ناجحة في التحدي في الوقت المحدد.
4. إذا لم يمر المستوى خلال الوقت المحدد ، فستستمر اللعبة من المستوى الحالي.
5. صور البطاقة والموسيقى في اللعبة مملوكة لشركة Daewoo.
6. يتطلب المتصفح الذي يدعم HTML5 والكروم و Firefox هو الأفضل.
صور اللعبة:
انقر هنا لتنزيل رمز المثال الكامل.
2. جزء JavaScript:
/** لعبة Fairy Sword Flip Game* التاريخ: 2013-02-24* المؤلف: fdipzone* ver 1.0*/window.onload = function () {var gameimg = ['images/start.png' ، 'images/success.png' ، 'images/fail.png' ، 'images/clear.png' ، 'images/cardbg.jpg' لـ (var i = 1 ؛ i <= card.get_total () ؛ i ++) {gameimg.push ('images/card' + i + '.jpg') ؛ } var callback = function () {card.init () ؛ } img_preload (gameimg ، callback) ؛}/** card card*/var card = (function (total ، cardnum) {var gametime = [0،65،60،55،50،50،55،40،40،35،30،25،25،20] LevelData = ابدأ Game START =) {reset () ؛ Turnall ()} curtime- أنا <= المجموع ؛ i ++) {carddata.push (i) ؛ } // رسم بطاقات لـ (var i = 0 ؛ i <n ؛ i ++) {var curcard = carddata.splice (math.random ()*carddata.length ، 1) .pop () ؛ LevelData.push ({'cardno': curcard ، 'turn': 0} ، {'cardno': curcard ، 'turn': 0}) ؛ } // إنشاء بطاقات لعبة ترتيب عشوائي مستوى deleddata = خلط ورق اللعب (LevelData) ؛ } // إنشاء بطاقة show = function () {var cardhtml = '' ؛ لـ (var i = 0 ؛ i <listerData.length ؛ i ++) {cardHtml+= '<viv>' ؛ cardHtml + = '<div id = "card' + i + '">' ؛ cardHtml + = '<viv> <img src = "images/card' + leveldata [i] ['cardno'] + '.jpg"> </viv>' ؛ CardHtml += '<viv> <img src = "Images/cardbg.jpg"> </viv>' ؛ CardHtml += '</viv>' ؛ CardHtml += '</viv>' ؛ } sethtml ('gameplane' ، cardhtml) ؛ }. }} // Flip Animation Turn_animate = function (key) {var obj = $ _tag ('div' ، 'card' + key) ؛ var cardfont ، cardback ؛ if (getClass (obj [0]). indexof ('Out')! =-1) {cardfont = obj [0] ؛ cardback = obj [1] ؛ } آخر {cardfont = obj [1] ؛ cardback = obj [0] ؛ } setClass (cardback ، 'list flip out') ؛ var et = setTimeOut (function () {setClass (cardfont ، 'list flip in') ؛} ، 225) ؛ } // set انقر فوق الحدث set_event = function () {var o = $ _tag ('div' ، 'gameplane') ؛ لـ (var i = 0 ، count = o.length ؛ i <count ؛ i ++) {if (getClass (o [i]) == 'card viewport-flip') {o [i] .onclick = function () {turn (this.id) ؛ }}}} // time start process = function () {is_lock = 0 ؛ var curtime = gametime [level] ؛ Sethtml ('Livetime' ، curtime) ؛ var et = setInterval (function () {if (matchnum == cardnum) {clearinterval (et) ؛ return ؛} curtime-- ؛ sethtml ('livetime' ، curtime) ؛ if (curtime == 0) {clearinterval (et) ؛ is_over = 1 ؛ message '، start) ؛}}} ، 1000) ؛ } // رسالة رسالة الرسوم المتحركة = الدالة (النوع ، رد الاتصال) {is_lock = 1 ؛ رسالة var = $ ('رسالة') ؛ var معالجة = 0 ؛ var opacity = 0 ؛ var soundtime = {'start': 1500 ، 'success': 4000 ، 'fail': 6000 ، 'clear': 4000} ؛ DISP ('message' ، 'show') ؛ setClass (رسالة ، 'message_' + type) ؛ setOpacity (رسالة ، عتامة) ؛ setPosition (رسالة ، "اليسار" ، 0) ؛ setPosition (Message ، 'Top' ، 390) ؛ if (type == 'start') {bgSound (type ، true) ؛ } آخر {bgSound (type) ؛ } var et = setInterval (function () {var message_left = getPosition (message ، 'left') ؛ معالجتها = معالجتها + 25 ؛ if (معالجتها> = 500 && معالجتها <= 750) تمت معالجتها <type] +250) }}} ، 25) ؛ } // flop turn = function (id) {if (is_lock == 1) {return ؛ } var key = parseint (id.replace ('card' ، '')) ؛ if (levelData [key] ['turn'] == 0) {// لم يتم فتحه إذا (أولاً ==-1) {// first turn_animate (مفتاح) ؛ أولا = المفتاح ؛ LevelData [key] ['turn'] = 1 ؛ } آخر {// second turn_animate (مفتاح) ؛ LevelData [key] ['turn'] = 1 ؛ check_turn (مفتاح) ؛ }}} // تحقق مما إذا كان التقليب ناجحًا check_turn = function (key) {is_lock = 1 ؛ if (LevelData [first] ['cardno'] == LevelData [key] ['cardno']) {// scarwing matchnum ++ ؛ if (matchnum == cardnum) {var et = setTimeOut (function () {message ('success' ، levelup) ؛} ، 225) ؛ } أولاً = -1 ؛ is_lock = 0 ؛ } آخر {// فشل الاقتران ، اقلب البطاقة المفتوحة var et = setTimeout (function () {turn_animate (أولاً) ؛ leveldata [أولاً] ['turn'] = 0 ؛ turn_animate (مفتاح) }} // pass listerup = function () {if (level <gametime.length-1) {level ++ ؛ Sethtml ('المستوى' ، المستوى) ؛ يبدأ()؛ } آخر {clear () ؛ }} // pass all clear = function () {level = 1 ؛ DIP ('Levelplane' ، 'Hide') ؛ DIP ("العملية" ، "إخفاء") ؛ Sethtml ('Gameplane' ، '') ؛ رسالة ("واضح" ، init) ؛ } // تشغيل الموسيقى bgSound = function (ملف ، حلقة) {var id = 'AudiOplayer' ؛ if (typeof (file)! = 'undefined') {if (typeof (loop) == 'undefined') {loop = false ؛ } var audiofile = [] ؛ Audiofile ['mp3'] = 'music/' + file + '.mp3' ؛ Audiofile ['ogg'] = 'music/' + file + '.ogg' ؛ Audioplayer (id ، audiofile ، loop) ؛ } آخر {AudiOplayer (id) ؛ }} // gameplay tips = function (type) {disp ('tips' ، type) ؛ } // احصل على العدد الإجمالي للبطاقات get_total = function () {return total ؛ } // إعادة تعيين المعلمة reset = function () {disp ('levelplane' ، 'show') ؛ Sethtml ('المستوى' ، المستوى) ؛ DIP ("العملية" ، "العرض") ؛ sethtml ('livetime' ، '') ؛ Sethtml ('Gameplane' ، '') ؛ is_lock = 1 ؛ is_over = 0 ؛ أولا = -1 ؛ matchnum = 0 ؛ } إرجاع هذا ؛}) (42،9) ؛أعتقد أن الوصف في هذه المقالة سيكون له قيمة مرجعية معينة لتعلم الجميع لتصميم لعبة JavaScript.