«شرکت گوگل ابزارها و چیزهای بسیاری را در عرصه فناوری معرفی و منتشر می‌کند، ولی گاهی اوقات کاربران از یاد می‌برند که ما انسان‌های معمولی هستیم. من فکر می‌کنم دلیل اصلی وجود Doodleها این است که با ایجاد تغییرات در طول زمان به کاربران یادآوری کنیم که ما هنوز هم زنده‌ایم.» این سخن «جنیفر هام»، یکی از اعضای تیم طراحی لوگو و یا doodle های گوگل است. اما گویا این تیم هدفی فراتر دارند و در ماه‌های اخیر، تکنیک‌های خود را با جسارت تمام بر روی نخستین و شلوغ‌ترین موتور جستجوگر جهان پیاده می‌کنند. این لوگوها همواره اتفاقاتی جالبی را به یاد ما آورده است. اما آن‌ها چیزی بیش از عکس و نقاشی و آزمایش هستند…

بازی Simon یکی از محبوبترین و در عین حال پیچیده ترین بازی‌های زمان قدیم است. اکثر شما با دیدن تنها تصویری از این بازی کاملاً آن را بخاطر می‌آورید. حتی امکان اینکه تجربه بازی با آن را داشته باشید زیاد است. محبوبیت بازی به حدی است که آن را از حالت مجازی به حالت واقعی تبدیل کرده‌اند! (اینجا)

حال دلتان میخواهد تا خودتان این بازی را از صفر تجربه کنید؟!! پس با ما باشید …

ساخت بازی Simon با کمک HTML5 و JQuery

در ساخت این بازی ما نمی‌توانیم مستقیماً از تصویر رنگی ثابتی استفاده کنیم چون نیاز به تغییر رنگ داریم. با کمک css (اینجا) می‌توان چنین کاری انجام داد. ابتدا ما عناصر ثابت و بدون تغییرمان را طراحی می‌کنیم. در نهایت پس زمینه بازی ما تصویری مانند تصویر زیر خواهد بود:

کدهای پایه

Google.com – Simon’s day (1stWebDesigner.com game <img src='http://www.progpars.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> )<br /> <script type="text/javascript" src="js/libs/modernizr-1.7.min.js"></script></p> <div id="container"> <form id="search" action="#" method="get"> <input id="query" type="text" name="query" /> <input id="submit" type="submit" value="search" /></form> <p>  </p></div> <p>

اکنون نیاز به بدنه html برای بازی داریم.

• رنگ پس زمینه که با فعال شدن آن، تغییر رنگ میدهد.(قرمز، آبی، زرد، سبز)
• لینک کردن چهار گوشه بازی
• پیام‌های هشدار که بازی به کاربر می‌دهد.

از جمله لایه‌های مورد نیاز ما هستند.

<div id="main"> <p> </p> <p> </p> <p><a id="box-click-0" class="box btnTL" href="#"> </a></p> <p><a id="box-click-1" class="box btnTR" href="#"> </a></p> <p><a id="box-click-2" class="box btnBL" href="#"> </a></p> <p><a id="box-click-3" class="box btnBR" href="#"> </a></p> <p> </p> <div id="letsRock" class="alert"> <p>Ready? let’s rock!</p> </div> <div id="ohYes" class="alert"> <p>Oh Yeah!</p> </div> <div id="ohNoes" class="alert"> <p>Oh Noes… Almost there!</p> </div> </div> <p>

و برای قالب css خواهیم داشت :

#main {</p> <p>position: relative;</p> <p>left: 155px;</p> <p>width: 200px;</p> <p>height: 200px;</p> <p>}</p> <p>.box {</p> <p>display: block;</p> <p>float: left;</p> <p>width: 100px;</p> <p>height: 100px;</p> <p>}</p> <p>a.box {</p> <p>position: absolute;</p> <p>text-decoration: none;</p> <p>background-image: url(“../img/bg_game.png”);</p> <p>background-repeat: no-repeat;</p> <p>}</p> <p>a.box:focus {</p> <p>outline: none;</p> <p>}</p> <p>.btnTL { background-position: top left; }</p> <p>.btnTR { background-position: top right; }</p> <p>.btnBL { background-position: bottom left; }</p> <p>.btnBR { background-position: bottom right; }</p> <p>.btnTL, .btnTR {</p> <p>top: 0;</p> <p>}</p> <p>.btnBL, .btnBR {</p> <p>bottom: 0;</p> <p>}</p> <p>.btnTL, .btnBL {</p> <p>left: 0;</p> <p>}</p> <p>.btnTR, .btnBR {</p> <p>right: 0;</p> <p>}</p> <p>#box-0 {</p> <p>background: #c00000;</p> <p>}</p> <p>#box-1 {</p> <p>background: #1506a3;</p> <p>}</p> <p>#box-2 {</p> <p>background: #046606;</p> <p>}</p> <p>#box-3 {</p> <p>background: #ea8f0c;</p> <p>}

فرم جستجو

ابتدا یک کد جی کوئری کوچک داریم:

 
<br /> <form id="search" action="#" method="get"> <input id="query" type="text" name="query" /> <input id="submit" type="submit" value="search" /> </form> <p> 

و بعد این کد جاوا اسکریپت :

$(function(){</p> <p>$(“#search”).submit( function(event) { event.preventDefault(); googleRedirect(); } );</p> <p>});</p> <p>function googleRedirect() {</p> <p>var query = $(“#query”).attr(‘value’);</p> <p>var url = “http://www.google.com/#q=” + query + “&fp=1″;</p> <p>window.location = url;</p> <p>}

کوکی بگذاریم ؟ نه !

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

localStorage["level"] = 15; // create it with 15 as value</p> <p>var level = localStorage["level"]; //now var level is 15</p> <p>localStorage.removeItem( “level” ); //remove it!

حالا نیاز به راهی داریم تا بازی اجرا شود.

 
<div id="options"> <ul> <li>Level: <span id="levelCount">1</span></li> <li><a onclick="newGame()" href="#">New Game</a></li> <li>High Score: <span id="hs">1</span></li> <li><a href="http://www.1stwebdesigner.com" target="_blank">Credits</a></li> </ul> </div> <p>

الگوریتم اجرای تصادفی بازی

مهمترین چیز در بازی Simon اجرای تصادفی و شروع غیر قابل پیش‌بینی آن است. خوب! حالا ما بازی را برای ۵۰ مرحله و با ۴ رنگ می‌بندیم :

function randomSequence() {</p> <p>var chars = “0123″; // four colors!</p> <p>var string_length = 50; //pretty hard, isn’t it?</p> <p>var sequence = “”;</p> <p>for (var i=0; i < string_length; i++) { //we’ll have from sequence[0] to sequence[49]</p> <p>var rnum = Math.floor(Math.random() * chars.length);</p> <p>sequence += chars.substring(rnum,rnum+1);</p> <p>}</p> <p>return sequence;</p> <p>}</p> <p style="text-align: justify;">و اما اصل ماجرا :</p> <p>$(function(){</p> <p>//caching our elements for better performance</p> <p>box0 = $(“#box-0″);</p> <p>box1 = $(“#box-1″);</p> <p>box2 = $(“#box-2″);</p> <p>box3 = $(“#box-3″);</p> <p>clickbox0 = $(“#box-click-0″);</p> <p>clickbox1 = $(“#box-click-1″);</p> <p>clickbox2 = $(“#box-click-2″);</p> <p>clickbox3 = $(“#box-click-3″);</p> <p>clickbox0.click(</p> <p>function(event){</p> <p>event.preventDefault();</p> <p>clicked(0);</p> <p>}</p> <p>);</p> <p>clickbox1.click(</p> <p>function(event){</p> <p>event.preventDefault();</p> <p>clicked(1);</p> <p>}</p> <p>);</p> <p>clickbox2.click(</p> <p>function(event){</p> <p>event.preventDefault();</p> <p>clicked(2);</p> <p>}</p> <p>);</p> <p>clickbox3.click(</p> <p>function(event){</p> <p>event.preventDefault();</p> <p>clicked(3);</p> <p>}</p> <p>);</p> <p>var minHover = 0.7;</p> <p>var maxHover = 1;</p> <p>var timeHover = 500;</p> <p>clickbox0.hover(</p> <p>function(){</p> <p>box0.stop().animate({opacity: minHover}, timeHover);</p> <p>}, function() {</p> <p>box0.stop().animate({opacity: maxHover}, timeHover);</p> <p>}</p> <p>);</p> <p>clickbox1.hover(</p> <p>function(){</p> <p>box1.stop().animate({opacity: minHover}, timeHover);</p> <p>}, function() {</p> <p>box1.stop().animate({opacity: maxHover}, timeHover);</p> <p>}</p> <p>);</p> <p>clickbox2.hover(</p> <p>function(){</p> <p>box2.stop().animate({opacity: minHover}, timeHover);</p> <p>}, function() {</p> <p>box2.stop().animate({opacity: maxHover}, timeHover);</p> <p>}</p> <p>);</p> <p>clickbox3.hover(</p> <p>function(){</p> <p>box3.stop().animate({opacity: minHover}, timeHover);</p> <p>}, function() {</p> <p>box3.stop().animate({opacity: maxHover}, timeHover);</p> <p>}</p> <p>);</p> <p>});

شما برنده شدید. وارد مرحله بعد شوید!

زمانی که برنده می‌شوید بازی باید شما را به مرحله بعد ببرد :

// yeah, someone is playing it!</p> <p>function clicked( color ) {</p> <p>// refresh my memory, how long have you gone so far?</p> <p>var level = localStorage["level"]; // this is our current level</p> <p>var clicks = localStorage["clicks"]; //this is our current item INSIDE one level</p> <p>var speed = localStorage["speed"]; //to make it more fun, when you get right it goes faster</p> <p>// blink it!</p> <p>window['box' + color].stop().animate({ opacity: 0.3 }, (speed * 0.5) ).animate({ “opacity”: “1″ }, (speed * 0.3) ); //variable variables in js via window[varname] <img src='http://www.progpars.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p> <p>// well, this time you’ve got it right?</p> <p>if ( localStorage["sequence"][clicks] == color) {</p> <p>//oh, yeah!</p> <p>localStorage["clicks"]++;</p> <p>//have you finished this level?</p> <p>if ( level == clicks) {</p> <p>nextLevel();</p> <p>}</p> <p>} else {</p> <p>//oh, noes!</p> <p>endGame();</p> <p>}</p> <p>}

شمامرتکب خطا شدید!

اما اگر بجای کلیک بر روی رنگ صحیح بر روی رنگ دیگری کلیک کردید بازی باید به شما پیامی بدهد :

function nextLevel() {</p> <p>//Oh, Yes</p> <p>showBox(“#ohYes”, 1000);</p> <p>// you deserve it, let’s move on</p> <p>localStorage["level"]++;</p> <p>levelCount.text(localStorage["level"]);</p> <p>localStorage["clicks"] = 0;</p> <p>//let’s show you how it’ll be</p> <p>current = 0; //since it’s used just for animation, let’s leave it as global var</p> <p>if ( localStorage["speed"] > 300 && (localStorage["level"] / 5) == 0 ) { //our maximum speed, and we’ll only acelerate it each 5 levels</p> <p>localStorage["speed"] = localStorage["speed"] * 0.8;</p> <p>}</p> <p>setTimeout( function() { rightPath(); } , localStorage["speed"] );</p> <p>}

اکنون شما می‌توانید بازی را اجرا کنید. برای راحتی کار، می‌توانید فایل کامل این بازی را از ایــنجا دریافت کنید و یا از اینــــجا به صورت آنلاین بازی کنید.

حداکثر امتیاز شما چقدر است؟!

• مشاهده آنلاین بازی
• دانلود فایل کدها
• منبع