Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / j Q u ery / j Q u ery i l e Yı l a n O yu n u
jQuery ile Yılan Oyunu Vatanay Özbeyli tarafından 19 Haziran 2013 tarihinde yazıldı. ~ 1 Yorum + Değiştir
jQuery ile klasik yılan oyunu hazırlamaya ne dersiniz? Birkaç sene öncesine kadar Flash oyunların internete hakim olduğunu hatırlıyoruz. Web 2.0 ile birlikte text-based oyunlar bu sektöre damgasını vurdu ve hala büyük bir payı elinde bulundurmakta. Bunun yanı sıra Google gibi büyük şirketler özel günlerinde logolarında küçük çaplı oyunlar yayınladı. Google PACMAN‘den sonra 10.yılında AdSense ilginç bir oyun sundu bizlere. Geçen yıllar gösteriyor ki kalıp Flash oyunlar yavaş yavaş yerlerini daha kompleks projelere bırakmakta. Öyleyse bizlerde basit ama eğlenceli bir oyun hazırlayarak açılışı yapalım.
Nasıl yapılır? Bu işlem için CSS koduna ihtiyacımız olmayacak. Çünkü bütün tasarım ve renklendirme araçları JavaScript kodlarının içerisinde barınmakta. İlk olarak <head></head> tagleri arasına aşağıdaki kodu ekleyerek jQuery dosyamızı çağıralım. 1 <script src="http://code.jquery.com/jquery1.7.2.min.js"></script> Şimdi oyunu yayınlayacak div koduyla başlayacağız. Buradan sonraki tüm kodlar <body></body> içerisine eklenecek. İşte ihtiyacımız olan tek satırlık HTML kod : 1 <div id="snake-oyunu"></div> Şimdi divimizin altına JavaScript kodlarımızı ekleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
<script> window.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var score = 0; // Başlangıç Skoru var level = 0; // Başlangıç Seviyesi var direction = 0; // Giriş Yönü var snake = new Array(3); var active = true; var speed = 500; // Başlangıç Hızı var arena = new Array(20); for (var i = 0; i < arena.length; i++) { arena[i] = new Array(20); } // Boyutlandırmalar canvas.width = 204; canvas.height = 224; $('#snake-oyunu').append(canvas); arena = generateSnake(arena); arena = generateFood(arena); getGame(); window.addEventListener('keydown', function(e) { if (e.keyCode === 38 && direction !== 3) { direction = 2; // Yukarı } else if (e.keyCode === 40 && direction !== 2) { direction = 3; // Aşağı } else if (e.keyCode === 37 && direction !== 0) { direction = 1; // Sol } else if (e.keyCode === 39 && direction !== 1) { direction = 0; // Sağ } }); function getGame() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = snake.length - 1; i >= 0; i--) { if (i === 0) { switch(direction) { case 0: // Sağ snake[0] = { x: snake[0].x + 1, y: snake[0].y } break; case 1: // Sol snake[0] = { x: snake[0].x - 1, y: snake[0].y } break; case 2: // Yukarı snake[0] = { x: snake[0].x, y: snake[0].y - 1 } break; case 3: // Aşağı snake[0] = { x: snake[0].x, y: snake[0].y + 1 } break; } if (snake[0].x < 0 || snake[0].x >= 20 || snake[0].y < 0 || snake[0].y >= 20) { showGameOver(); return; }
66 67 68 69 70 71
if (arena[snake[0].x][snake[0].y] === 1) { score += 10; // Bir yemek kaรง puan? arena = generateFood(arena);
snake.push({ x: snake[snake.length - 1].x, y: snake[snake.length - 1].y }); 72 arena[snake[snake.length - 1].x][snake[snake.length 1].y] = 2; 73 74 if ((score % 100) == 0) { 75 level += 1; 76 } 77 } else if (arena[snake[0].x][snake[0].y] === 2) { 78 showGameOver(); 79 return; 80 } 81 82 arena[snake[0].x][snake[0].y] = 2; 83 } else { 84 if (i === (snake.length - 1)) { 85 arena[snake[i].x][snake[i].y] = null; 86 } 87 88 snake[i] = { x: snake[i - 1].x, y: snake[i - 1].y }; 89 arena[snake[i].x][snake[i].y] = 2; 90 } 91 } 92 93 getArena(); 94 for (var x = 0; x < arena.length; x++) { 95 for (var y = 0; y < arena[0].length; y++) { 96 if (arena[x][y] === 1) { 97 ctx.fillStyle = '#20abbc'; 98 ctx.fillRect(x * 10, y * 10 + 20, 10, 10); 99 } else if (arena[x][y] === 2) { 100 ctx.fillStyle = '#bc202d'; 101 ctx.fillRect(x * 10, y * 10 + 20, 10, 10); 102 } 103 } 104 } 105 106 if (active) { 107 setTimeout(getGame, speed - (level * 50)); 108 } 109 } 110 111 function getArena() { 112 ctx.lineWidth = 2; 113 ctx.strokeStyle = '#000'; 114 115 ctx.strokeRect(2, 20, canvas.width - 4, canvas.height - 24); 116 117 ctx.rect(3,21,canvas.width - 6,canvas.height - 26); 118 ctx.fillStyle = '#fff'; 119 ctx.fill(); 120 121 ctx.fillStyle = '#bc202d'; 122 ctx.font = '12px Helvetica'; 123 ctx.fillText('Puan : ' + score + ' - Seviye : ' + level, 2, 12); 124 } 125 126 function generateFood(arena) {
127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
var rndX = Math.round(Math.random() * 19); var rndY = Math.round(Math.random() * 19); while (arena[rndX][rndY] === 2) { rndX = Math.round(Math.random() * 19); rndY = Math.round(Math.random() * 19); } arena[rndX][rndY] = 1; return arena; } function generateSnake(arena) { var rndX = Math.round(Math.random() * 19); var rndY = Math.round(Math.random() * 19); while ((rndX - snake.length) < 0) { rndX = Math.round(Math.random() * 19); } for (var i = 0; i < snake.length; i++) { snake[i] = { x: rndX - i, y: rndY }; arena[rndX - i][rndY] = 2; } return arena; } function showGameOver() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#bc202d'; ctx.font = '16px Helvetica'; ctx.fillText('Oyun bitti!', ((canvas.width / 2) (ctx.measureText('Oyun bitti!').width / 2)), 50); ctx.font = '12px Helvetica'; ctx.fillText('Puanın : ' + score, ((canvas.width / 2) - (ctx.measureText('Puanın : ' + score).width / 2)), 70); } }; </script>
Ve yılan oyunumuz hazır.
Kapanış Bu makalenin bizler için önemi jQuery kategorimizin ilk yayını olması. CSS3 ve HTML5 içerisine sıkıştıramayacağımız jQuery kodları artık daha kolay erişilebilir olacak. Oyuna gelirsek; Nokia serisindeki klasik yılan oyununa fazlasıyla benziyor. İşin güzel kısmı JS kodlarıyla oynarak oyunu hızlandırabiliyoruz. Çünkü 200 piksellik kutu içerisinde yılanın bir uçtan diğer uça gitmesini beklemek bazen can sıkabiliyor. Hepinize iyi oyunlar.
Benzer Konular: Animasyon ile Metin Renklendirme Görsellerinize Büyüteç ile Bakın jQuery ile Minimum ve Maksimum Karakter Limitli Form… jQuery Desteğiyle Harika Metin Sunumu JavaScript ile Rastgele Veri
Yazı Kategorisi : jQuery , Tasarım Unsurları Anahtar Kelimeler : java , jquery , nokia , Oyun , snake , yapımı