В продолжение недели ненормального программирования (как заметил phpcmsdev) решил написать игру в 30 строк кода. Так как тетрис, змейка и арканоид уже были сделаны, выбор пал на гоночки, которые входили в стандартный набор портативной игры.
Ссылка на fiddle.
(function(elid, width, height, speed, strength){ var canvas = document.querySelector(elid), ctx = canvas.getContext("2d"), pos = 0, blocks = []; canvas.width = width; canvas.height = height; ctx.fillStyle = "black"; var game = setInterval(function(){ if( Math.random() < strength) blocks.push([Math.random()*(width-10),-10]); ctx.clearRect(0,0,width,height); ctx.fillRect(pos,height-50,10,40); for(var i = 0; i < blocks.length; i++){ ctx.fillRect(blocks[i][0],blocks[i][1],10,10); if( blocks[i][1] > height - 60 && blocks[i][1] < height - 10 && Math.abs( pos - blocks[i][0]) < 10 ){ clearInterval(game); alert("Game over. You have " + Math.floor(1000 * strength) + " points."); } if( blocks[i][1] > height - 5 ){ blocks.splice( i, 1); i--; } else { blocks[i][1] += 5; } } strength += 0.001; },speed); document.addEventListener('mousemove', function (e) { pos = (e.pageX > 0) ? ((e.pageX < width) ? e.pageX : width-10) : 0; }, false); })("#canvas",400,300,33,0.05);
Особенности
- По настоящему 30 строк кода: 1 строка HTML, 29 строк JavaScript. Правда без оборачивания в тег
<script>
, но думаю это допущение не такое страшное :). - Canvas. Я люблю Canvas! Рисовать на canvas простые фигуры однозначно проще, чем двигать div-ы. Получается не так красиво, зато не нужно лишний раз беспокоиться о смещениях элементов.
- Возрастающая сложность и очки. На самом деле это одна переменная, но кому какая разницы как считаются очки? Главное же что бы побольше было!
- setInterval. Отказаться от requestAnimationFrame было решено не столько из-за лишней строчки, сколько из-за того что логика игры описана вместе с отрисовкой.
Заключение
Спасибо jeston за информацию о Тетрисе, zag2art за перевод о Excel, DjComandos за Змейку и linoleum за Арканоид.
Ребята, занимайтесь нормальным программированием.
ссылка на оригинал статьи http://habrahabr.ru/post/202556/
Добавить комментарий