{"id":1187,"date":"2023-09-11T22:25:28","date_gmt":"2023-09-11T13:25:28","guid":{"rendered":"https:\/\/tippang.net\/?p=1187"},"modified":"2023-09-11T22:25:30","modified_gmt":"2023-09-11T13:25:30","slug":"a-javascript-game-balloonpop","status":"publish","type":"post","link":"https:\/\/tippang.net\/?p=1187","title":{"rendered":"A JavaScript game &#8220;BalloonPop&#8221;"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"758\" src=\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png\" alt=\"\" class=\"wp-image-1188\" srcset=\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png 1024w, https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1-300x222.png 300w, https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1-768x569.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ll provide you with a simple JavaScript game called &#8220;Balloon Pop&#8221;. In this game, the player clicks on balloons that appear on the screen, and each successful click will increment the score. The game will use the HTML Canvas API for the graphical rendering.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the code:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create an HTML file with the following content:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">htmlCopy code<code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Balloon Pop&lt;\/title&gt;\n  &lt;style&gt;\n    canvas {\n      display: block;\n      margin: 0 auto;\n      background-color: skyblue;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;canvas id=\"gameCanvas\" width=\"800\" height=\"600\"&gt;&lt;\/canvas&gt;\n  &lt;script src=\"balloonPop.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Create a JavaScript file named &#8220;balloonPop.js&#8221; and add the following code:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\">javascriptCopy code<code>const canvas = document.getElementById(\"gameCanvas\");\nconst ctx = canvas.getContext(\"2d\");\n\nlet balloons = [];\nlet score = 0;\n\nclass Balloon {\n  constructor() {\n    this.x = Math.random() * canvas.width;\n    this.y = canvas.height;\n    this.speed = Math.random() * 3 + 1;\n    this.radius = Math.random() * 20 + 10;\n    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;\n  }\n\n  draw() {\n    ctx.beginPath();\n    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n    ctx.fillStyle = this.color;\n    ctx.fill();\n    ctx.closePath();\n  }\n\n  update() {\n    this.y -= this.speed;\n  }\n}\n\nfunction addBalloon() {\n  balloons.push(new Balloon());\n  setTimeout(addBalloon, Math.random() * 2000);\n}\n\nfunction drawScore() {\n  ctx.font = \"24px Arial\";\n  ctx.fillStyle = \"black\";\n  ctx.fillText(`Score: ${score}`, 10, 30);\n}\n\nfunction gameLoop() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n  for (const balloon of balloons) {\n    balloon.update();\n    balloon.draw();\n  }\n\n  drawScore();\n  requestAnimationFrame(gameLoop);\n}\n\ncanvas.addEventListener(\"click\", (e) =&gt; {\n  const mouseX = e.clientX - canvas.getBoundingClientRect().left;\n  const mouseY = e.clientY - canvas.getBoundingClientRect().top;\n\n  balloons = balloons.filter((balloon) =&gt; {\n    const distance = Math.hypot(balloon.x - mouseX, balloon.y - mouseY);\n\n    if (distance &lt; balloon.radius) {\n      score++;\n      return false;\n    }\n\n    return true;\n  });\n});\n\naddBalloon();\ngameLoop();\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To play the game:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Save the HTML and JavaScript files in the same folder.<\/li>\n\n\n\n<li>Open the HTML file in a browser.<\/li>\n\n\n\n<li>Balloons will appear from the bottom of the screen and float upwards. Click on the balloons to pop them and increase your score. The game continues indefinitely.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The game uses the HTML Canvas API to draw balloons with random sizes, colors, and speeds. The score is displayed in the top-left corner of the screen. When a player clicks on a balloon, the score increases, and the balloon is removed from the screen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll provide you with a simple JavaScript game called &#8220;Balloon Pop&#8221;. In this game, the<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"om_disable_all_campaigns":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1187","post","type-post","status-publish","format-standard","hentry","category-home"],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A JavaScript game &quot;BalloonPop&quot; - tippang.net<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tippang.net\/?p=1187\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:locale\" content=\"en_US\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:type\" content=\"article\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:title\" content=\"A JavaScript game &quot;BalloonPop&quot; - tippang.net\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:description\" content=\"I&#8217;ll provide you with a simple JavaScript game called &#8220;Balloon Pop&#8221;. In this game, the\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tippang.net\/?p=1187\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:site_name\" content=\"tippang.net\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-11T13:25:28+00:00\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-11T13:25:30+00:00\" class=\"yoast-seo-meta-tag\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png\" class=\"yoast-seo-meta-tag\" \/>\n<meta name=\"author\" content=\"charles kim\" class=\"yoast-seo-meta-tag\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" class=\"yoast-seo-meta-tag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" class=\"yoast-seo-meta-tag\" \/>\n\t<meta name=\"twitter:data1\" content=\"charles kim\" class=\"yoast-seo-meta-tag\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" class=\"yoast-seo-meta-tag\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" class=\"yoast-seo-meta-tag\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/tippang.net\/?p=1187#article\",\"isPartOf\":{\"@id\":\"https:\/\/tippang.net\/?p=1187\"},\"author\":{\"name\":\"charles kim\",\"@id\":\"https:\/\/tippang.net\/#\/schema\/person\/5fba0966333bf1aa9f72ad464d264d4a\"},\"headline\":\"A JavaScript game &#8220;BalloonPop&#8221;\",\"datePublished\":\"2023-09-11T13:25:28+00:00\",\"dateModified\":\"2023-09-11T13:25:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/tippang.net\/?p=1187\"},\"wordCount\":164,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/tippang.net\/#organization\"},\"image\":{\"@id\":\"https:\/\/tippang.net\/?p=1187#primaryimage\"},\"thumbnailUrl\":\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png\",\"articleSection\":[\"Home\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/tippang.net\/?p=1187#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tippang.net\/?p=1187\",\"url\":\"https:\/\/tippang.net\/?p=1187\",\"name\":\"A JavaScript game \\\"BalloonPop\\\" - tippang.net\",\"isPartOf\":{\"@id\":\"https:\/\/tippang.net\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tippang.net\/?p=1187#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tippang.net\/?p=1187#primaryimage\"},\"thumbnailUrl\":\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png\",\"datePublished\":\"2023-09-11T13:25:28+00:00\",\"dateModified\":\"2023-09-11T13:25:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tippang.net\/?p=1187#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tippang.net\/?p=1187\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tippang.net\/?p=1187#primaryimage\",\"url\":\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png\",\"contentUrl\":\"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png\",\"width\":1024,\"height\":758},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tippang.net\/?p=1187#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tippang.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A JavaScript game &#8220;BalloonPop&#8221;\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tippang.net\/#website\",\"url\":\"https:\/\/tippang.net\/\",\"name\":\"tippang.net\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/tippang.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tippang.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/tippang.net\/#organization\",\"name\":\"tippang.net\",\"url\":\"https:\/\/tippang.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tippang.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/tippang.net\/wp-content\/uploads\/2021\/02\/cropped-\u110e\u1162\u1102\u1165\u11af\u110b\u1161\u110b\u1175\u110f\u1169\u11ab1_\u1100\u1165\u1107\u116e\u11a8\u110b\u1175.png\",\"contentUrl\":\"https:\/\/tippang.net\/wp-content\/uploads\/2021\/02\/cropped-\u110e\u1162\u1102\u1165\u11af\u110b\u1161\u110b\u1175\u110f\u1169\u11ab1_\u1100\u1165\u1107\u116e\u11a8\u110b\u1175.png\",\"width\":280,\"height\":280,\"caption\":\"tippang.net\"},\"image\":{\"@id\":\"https:\/\/tippang.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/tippang.net\/#\/schema\/person\/5fba0966333bf1aa9f72ad464d264d4a\",\"name\":\"charles kim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tippang.net\/#\/schema\/person\/image\/\",\"url\":\"\/\/www.gravatar.com\/avatar\/fdb7dc5bc7fe5f3bf11d8491a1e8d9c4?s=96&#038;r=g&#038;d=wavatar\",\"contentUrl\":\"\/\/www.gravatar.com\/avatar\/fdb7dc5bc7fe5f3bf11d8491a1e8d9c4?s=96&#038;r=g&#038;d=wavatar\",\"caption\":\"charles kim\"},\"description\":\"Hello, Nice to meet you!\",\"url\":\"https:\/\/tippang.net\/author\/charles-kim\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A JavaScript game \"BalloonPop\" - tippang.net","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tippang.net\/?p=1187","og_locale":"en_US","og_type":"article","og_title":"A JavaScript game \"BalloonPop\" - tippang.net","og_description":"I&#8217;ll provide you with a simple JavaScript game called &#8220;Balloon Pop&#8221;. In this game, the","og_url":"https:\/\/tippang.net\/?p=1187","og_site_name":"tippang.net","article_published_time":"2023-09-11T13:25:28+00:00","article_modified_time":"2023-09-11T13:25:30+00:00","og_image":[{"url":"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png","type":"","width":"","height":""}],"author":"charles kim","twitter_card":"summary_large_image","twitter_misc":{"Written by":"charles kim","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tippang.net\/?p=1187#article","isPartOf":{"@id":"https:\/\/tippang.net\/?p=1187"},"author":{"name":"charles kim","@id":"https:\/\/tippang.net\/#\/schema\/person\/5fba0966333bf1aa9f72ad464d264d4a"},"headline":"A JavaScript game &#8220;BalloonPop&#8221;","datePublished":"2023-09-11T13:25:28+00:00","dateModified":"2023-09-11T13:25:30+00:00","mainEntityOfPage":{"@id":"https:\/\/tippang.net\/?p=1187"},"wordCount":164,"commentCount":0,"publisher":{"@id":"https:\/\/tippang.net\/#organization"},"image":{"@id":"https:\/\/tippang.net\/?p=1187#primaryimage"},"thumbnailUrl":"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png","articleSection":["Home"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/tippang.net\/?p=1187#respond"]}]},{"@type":"WebPage","@id":"https:\/\/tippang.net\/?p=1187","url":"https:\/\/tippang.net\/?p=1187","name":"A JavaScript game \"BalloonPop\" - tippang.net","isPartOf":{"@id":"https:\/\/tippang.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tippang.net\/?p=1187#primaryimage"},"image":{"@id":"https:\/\/tippang.net\/?p=1187#primaryimage"},"thumbnailUrl":"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png","datePublished":"2023-09-11T13:25:28+00:00","dateModified":"2023-09-11T13:25:30+00:00","breadcrumb":{"@id":"https:\/\/tippang.net\/?p=1187#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tippang.net\/?p=1187"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tippang.net\/?p=1187#primaryimage","url":"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png","contentUrl":"https:\/\/tippang.net\/wp-content\/uploads\/2023\/09\/image-1.png","width":1024,"height":758},{"@type":"BreadcrumbList","@id":"https:\/\/tippang.net\/?p=1187#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tippang.net\/"},{"@type":"ListItem","position":2,"name":"A JavaScript game &#8220;BalloonPop&#8221;"}]},{"@type":"WebSite","@id":"https:\/\/tippang.net\/#website","url":"https:\/\/tippang.net\/","name":"tippang.net","description":"","publisher":{"@id":"https:\/\/tippang.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tippang.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/tippang.net\/#organization","name":"tippang.net","url":"https:\/\/tippang.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tippang.net\/#\/schema\/logo\/image\/","url":"https:\/\/tippang.net\/wp-content\/uploads\/2021\/02\/cropped-\u110e\u1162\u1102\u1165\u11af\u110b\u1161\u110b\u1175\u110f\u1169\u11ab1_\u1100\u1165\u1107\u116e\u11a8\u110b\u1175.png","contentUrl":"https:\/\/tippang.net\/wp-content\/uploads\/2021\/02\/cropped-\u110e\u1162\u1102\u1165\u11af\u110b\u1161\u110b\u1175\u110f\u1169\u11ab1_\u1100\u1165\u1107\u116e\u11a8\u110b\u1175.png","width":280,"height":280,"caption":"tippang.net"},"image":{"@id":"https:\/\/tippang.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/tippang.net\/#\/schema\/person\/5fba0966333bf1aa9f72ad464d264d4a","name":"charles kim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tippang.net\/#\/schema\/person\/image\/","url":"\/\/www.gravatar.com\/avatar\/fdb7dc5bc7fe5f3bf11d8491a1e8d9c4?s=96&#038;r=g&#038;d=wavatar","contentUrl":"\/\/www.gravatar.com\/avatar\/fdb7dc5bc7fe5f3bf11d8491a1e8d9c4?s=96&#038;r=g&#038;d=wavatar","caption":"charles kim"},"description":"Hello, Nice to meet you!","url":"https:\/\/tippang.net\/author\/charles-kim"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/tippang.net\/index.php?rest_route=\/wp\/v2\/posts\/1187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tippang.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tippang.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tippang.net\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tippang.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1187"}],"version-history":[{"count":1,"href":"https:\/\/tippang.net\/index.php?rest_route=\/wp\/v2\/posts\/1187\/revisions"}],"predecessor-version":[{"id":1189,"href":"https:\/\/tippang.net\/index.php?rest_route=\/wp\/v2\/posts\/1187\/revisions\/1189"}],"wp:attachment":[{"href":"https:\/\/tippang.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tippang.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tippang.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}