{"id":4243,"date":"2022-11-17T09:00:11","date_gmt":"2022-11-17T07:00:11","guid":{"rendered":"https:\/\/jenniina.fi\/?p=4243"},"modified":"2023-03-27T10:16:05","modified_gmt":"2023-03-27T07:16:05","slug":"pong","status":"publish","type":"post","link":"https:\/\/jenniina.fi\/finnish\/pong\/","title":{"rendered":"Pong javascript game"},"content":{"rendered":"<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\"><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Etusivu<\/span><\/p><\/nav>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:80%\">\n<h1 class=\"has-text-align-center wp-block-heading\" id=\"pong\">A Pong JavaScipt Game<\/h1>\n\n\n\n<p class=\"has-text-align-center\">Made with TypeScript.<\/p>\n\n\n<div class=\"alignwide-wrap\" data-block=\"group\">\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"align-horizontal-wrap alignleft size-full\"><img decoding=\"async\" width=\"166\" height=\"150\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/11\/pong-protagonist.jpg\" alt=\"pong protagonist and antagonist\" class=\"wp-image-4927 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/11\/pong-protagonist.jpg 166w, https:\/\/jenniina.fi\/wp-content\/uploads\/2022\/11\/pong-protagonist-13x12.jpg 13w\" data-sizes=\"(max-width: 166px) 100vw, 166px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 166px; --smush-placeholder-aspect-ratio: 166\/150;\" \/><figcaption class=\"wp-element-caption\">Pong protagonist and antagonist drawn with CSS<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-left\">This javascript game is <a href=\"https:\/\/github.com\/WebDevSimplified\/js-pong\" rel=\"nofollow noopener\">inspired by this tutorial<\/a>. I converted it to TypeScript and edited it to work in a container, added accessibility features, the ability to start and stop the pong game, to control the paddle with mouse wheel, touch and keyboard, and additionally made the paddles into characters coupled with collision animations, and made the ball spin. <\/p>\n\n\n\n<p>See also <a href=\"https:\/\/jenniina.fi\/finnish\/category\/web-design\/javascript\/\" data-type=\"category\" data-id=\"9\">other Javascript content<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Controls<\/h2>\n\n\n\n<p>On mobile, swipe up or down to control the pong paddle.<\/p>\n\n\n\n<p>On a computer, toggle between mouse cursor and mouse wheel with the toggle button, or use up and down arrows to control the paddle. <\/p>\n\n\n\n<p>Press the Stop button or the Esc key to stop the pong game.<\/p>\n<\/div>\n<\/div><\/div><\/div>\n<\/div>\n\n\n\n<section class=\"pong-container\" id=\"pong-container\"><\/section>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>See also my accessible <a href=\"https:\/\/jenniina.fi\/finnish\/draggable-blobs\/\" data-type=\"post\" data-id=\"3630\">draggable blobs app<\/a> ja <a href=\"https:\/\/jenniina.fi\/finnish\/dogs\/\" data-type=\"post\" data-id=\"2036\">random dog generator<\/a>. <\/p>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\nAn accessible javascript game, pong, made with TypeScript\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/jenniina.fi\/finnish\/pong\/\" class=\"link-more\" aria-label=\"Continue reading Pong javascript game\">More &raquo;<\/a><\/div>","protected":false},"author":1,"featured_media":4927,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6,9],"tags":[],"class_list":["post-4243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-javascript","entry","entry-type-post"],"_links":{"self":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/4243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/comments?post=4243"}],"version-history":[{"count":13,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/4243\/revisions"}],"predecessor-version":[{"id":5209,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/4243\/revisions\/5209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media\/4927"}],"wp:attachment":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media?parent=4243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/categories?post=4243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/tags?post=4243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}