{"id":202578,"date":"2013-11-18T17:33:03","date_gmt":"2013-11-18T13:33:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=202578"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=202578","title":{"rendered":"<span class=\"post_title\">Pong \u043d\u0430 javascript (\u0432 3X \u0441\u0442\u0440\u043e\u043a)<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0420\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0435\u0440\u0438\u044e \u043f\u043e\u0441\u0442\u043e\u0432 \u00ab\u0414\u0435\u043b\u0430\u0435\u043c XXX \u043d\u0430 JS \u0432 30 \u0441\u0442\u0440\u043e\u043a\u00bb. \u0412\u0437\u044f\u043b \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 Pong \u0432 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u043d\u043e\u043c\u0443 \u043a \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0438:<br \/>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/0c9\/f36\/141\/0c9f3614191065ef859ed4c843120dc3.png\" align=\"left\"\/><br \/>  \u0412\u044b\u0448\u043b\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0432 30 \u0441\u0442\u0440\u043e\u043a, \u0430 \u0446\u0435\u043b\u044b\u0445 38, \u0442.\u043a. \u043b\u043e\u0433\u0438\u043a\u0438 \u0432\u044b\u0448\u043b\u043e \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e, \u0430 \u0441\u043e\u0432\u0441\u0435\u043c \u0443\u0431\u0438\u0432\u0430\u0442\u044c \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0441\u0436\u0438\u043c\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u0430\u043c\u0438\/\u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c.<\/p>\n<p>  \u0412 \u0434\u0435\u043c\u043a\u0435:  <\/p>\n<ul>\n<li>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e Up\/Down;<\/li>\n<li>\u0418\u0418 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430;<\/li>\n<li>\u0423\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043c\u044f\u0447\u0430 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u043e\u0442\u0441\u043a\u043e\u043a\u043e\u043c;<\/li>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0430\u044f \u043e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u044f\u0447\u0430;<\/li>\n<li>\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043c\u044f\u0447\u0430;<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u043e\u043b\u044f \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u00ab\u0438\u0433\u0440\u043e\u043a\u043e\u0432\u00bb;<\/li>\n<li>\u0412\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438.<\/li>\n<\/ul>\n<p>  <a name=\"habracut\"><\/a><br \/>  \u041f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 <a href=\"http:\/\/jsfiddle.net\/WNrfp\/6\/\">fiddle<\/a> (\u0432\u0440\u043e\u0434\u0435 \u0442\u0443\u0434\u0430 \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e \u0432\u0441\u0435 \u0434\u0435\u043c\u043a\u0438 \u0437\u0430\u043b\u0438\u0432\u0430\u044e\u0442).<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code>(function(cell, width, height, plr_height) {     var min_speed=5, max_speed=20, speed, tick, ball, pl, pr, py = parseInt((height-plr_height)\/2), pmy = plr_height-1, score = [0, 0];     function $(id) {return document.getElementById(id)};     function $$(o, attrs) {for (var k in attrs) {o.style[k] = attrs[k]}};     function _(idx) {return (idx*cell)+'px'};     function bw(v, a, b) {return (v&gt;=a) && (v&lt;=b)};     function clamp(v, a, b) {return v&lt;a ? a : (v&gt;b ? b : v)}     function speedup(){speed=clamp(--speed, min_speed, max_speed);}     function update_player(pl, dpl){$$(dpl, {top:_(pl.y=clamp(pl.y+pl.dy, 0, height-plr_height))}); pl.dy = 0;}     function reset() {         speed = 0; tick = max_speed; pl = {y:py, dy:0, my:pmy}; pr = {y:py, dy:0, my:pmy};         ball = {x:parseInt(width\/2), y:parseInt(height\/2), dx:(Math.random()&gt;0.5?1:-1), dy:(Math.random()&gt;0.5?1:-1)};         $('score').innerHTML = score[0]+':'+score[1];     }     document.body.onkeydown = function(e) {         pr.dy = (e.keyCode == 40) ? 1 : ((e.keyCode == 38) ? -1 : 0);         if (pr.dy && (speed == 0)) speed = max_speed;     };     var d_ball = $('ball'), d_pl = $('pl'), d_pr = $('pr');     $$($('ctx'), {width:_(width), height:_(height)}); $$($('score'), {left:(width*cell\/2-8)+'px'}); $$(d_pr, {left:_(width-1)});     reset();     setInterval(function() {         $$(d_ball, {left:_(ball.x), top:_(ball.y)});         update_player(pl, d_pl); update_player(pr, d_pr);         if (!speed || --tick) return;         tick = speed;         ball.x += ball.dx; ball.y += ball.dy;         if (ball.dx &lt; 0) {             var x=ball.x, dx=ball.dx, y = ball.y, dy = ball.dy;             while (x&gt;1) { x+=dx; if (!bw(y+=dy, 1, height-2)) break;\/*\u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u0442\u0441\u043a\u043e\u043a\u0430, \u0430 \u043c\u043e\u0436\u043d\u043e {dy = -dy}; *\/ }             pl.dy = bw(y, pl.y, pl.y+pl.my) ? 0 : (pl.y &gt; y ? -1 : 1);         }         if (!bw(ball.y, 1, height-2)) {ball.dy = -ball.dy; speedup();}         if ((ball.x == 1 && bw(ball.y, pl.y, pl.y+pl.my)) || (ball.x == (width-2) && bw(ball.y, pr.y, pr.y+pr.my))) {ball.dx = -ball.dx; speedup();}         else if ((ball.x == 0) || (ball.x == width-1)) {++score[ball.x ? 0 : 1]; reset();}     }, 10); })(16\/*css*\/, 20, 15, 5\/*css*\/); <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div id=&quot;ctx&quot; class=&quot;ctx&quot;&gt;     &lt;div id=&quot;score&quot; class=&quot;score&quot;&gt;0:0&lt;\/div&gt;     &lt;div id=&quot;ball&quot; class=&quot;cell ball&quot; \/&gt;     &lt;div id=&quot;pl&quot; class=&quot;cell plr&quot; \/&gt;     &lt;div id=&quot;pr&quot; class=&quot;cell plr&quot; \/&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.ctx {     background-color: black;     position: fixed;     left: 0;     top: 0; }  .ctx .cell {     width: 16px;     height: 16px;     background-color: white;     position: fixed;     left: 0;     top: 0; }  .ctx .plr {     height: 80px; }  .ctx .score {     color: white;     position: absolute;     top: 0;     font-family: &quot;Lucida Console&quot;, Monaco, monospace; } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/202578\/\"> http:\/\/habrahabr.ru\/post\/202578\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0420\u0435\u0448\u0438\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0435\u0440\u0438\u044e \u043f\u043e\u0441\u0442\u043e\u0432 \u00ab\u0414\u0435\u043b\u0430\u0435\u043c XXX \u043d\u0430 JS \u0432 30 \u0441\u0442\u0440\u043e\u043a\u00bb. \u0412\u0437\u044f\u043b \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 Pong \u0432 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u043d\u043e\u043c\u0443 \u043a \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0438:<br \/>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/0c9\/f36\/141\/0c9f3614191065ef859ed4c843120dc3.png\" align=\"left\"\/><br \/>  \u0412\u044b\u0448\u043b\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0432 30 \u0441\u0442\u0440\u043e\u043a, \u0430 \u0446\u0435\u043b\u044b\u0445 38, \u0442.\u043a. \u043b\u043e\u0433\u0438\u043a\u0438 \u0432\u044b\u0448\u043b\u043e \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e, \u0430 \u0441\u043e\u0432\u0441\u0435\u043c \u0443\u0431\u0438\u0432\u0430\u0442\u044c \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0441\u0436\u0438\u043c\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u0430\u043c\u0438\/\u043e\u0431\u0444\u0443\u0441\u043a\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c.<\/p>\n<p>  \u0412 \u0434\u0435\u043c\u043a\u0435:  <\/p>\n<ul>\n<li>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e Up\/Down;<\/li>\n<li>\u0418\u0418 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a\u0430;<\/li>\n<li>\u0423\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043c\u044f\u0447\u0430 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u043e\u0442\u0441\u043a\u043e\u043a\u043e\u043c;<\/li>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0430\u044f \u043e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043c\u044f\u0447\u0430;<\/li>\n<li>\u041e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043c\u044f\u0447\u0430;<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043f\u043e\u043b\u044f \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u00ab\u0438\u0433\u0440\u043e\u043a\u043e\u0432\u00bb;<\/li>\n<li>\u0412\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-202578","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/202578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=202578"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/202578\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=202578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=202578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=202578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}