{"id":9609,"date":"2024-01-20T18:05:00","date_gmt":"2024-01-20T18:05:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9609"},"modified":"2024-01-22T16:05:59","modified_gmt":"2024-01-22T11:05:59","slug":"breakout-game-with-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/","title":{"rendered":"Breakout Game with Vanilla JavaScript"},"content":{"rendered":"<p>This code creates a &#8220;Breakout Game&#8221; using Vanilla JavaScript. It renders a canvas with bricks, a ball, and a paddle. The ball bounces off the walls, bricks, and the paddle, with the aim of breaking the bricks. The paddle can be controlled using the keyboard or mouse to prevent the ball from falling off the screen.<\/p>\n<p>The game tracks the score and lives, ending when the player loses all lives. It also includes a pause functionality triggered by pressing the &#8216;Esc&#8217; key. Additionally, there&#8217;s an option to enable autoplay.<\/p>\n<h2>How to Create a Breakout Game With Vanilla Javascript<\/h2>\n<p>1. First of all, load the <a href=\"https:\/\/getbootstrap.com\" target=\"_blank\" rel=\"noopener\">Bootstrap CSS<\/a> by adding the following CDN link into the head tag of your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.7\/css\/bootstrap.min.css'&gt;<\/pre>\n<p>2. Create the HTML code to set up the game canvas and other elements.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;canvas id=\"myCanvas\" width=\"480\" height=\"320\"&gt;&lt;\/canvas&gt;\r\n&lt;div class=\"autoplay-toggle\"&gt;\r\n  &lt;input id=\"autoplay\" type=\"checkbox\" name=\"autoplay\" value=\"Autoplay\"&gt; Enable Autoplay?&lt;br&gt;\r\n&lt;\/div&gt;\r\n&lt;p&gt;&lt;strong&gt;Press 'Esc' to pause the game&lt;\/strong&gt;&lt;\/p&gt;<\/pre>\n<p>3. To make your game visually appealing, add CSS styles to your HTML. Create a separate CSS file and link it to your HTML file or include the styles in a <code>&lt;style&gt;<\/code> block within the HTML file. It styles the game canvas, paddle, bricks, and other elements. You can customize it to match your preferences.<\/p>\n<pre class=\"prettyprint linenums lang-css\">* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\ncanvas {    \r\n    background-color: #eee;\r\n    display: block;\r\n    margin: 20px auto;\r\n}\r\n#lose-message {\r\n    font-size: 2em;\r\n    text-align: center;\r\n    margin: 10px;\r\n    color: red;\r\n    font-weight: bold;\r\n    font-family: sans-serif;\r\n    display: none;\r\n}\r\n\r\n.autoplay-toggle {\r\n    display: inline-block;\r\n    position: relative;\r\n    left: 50%;\r\n    margin-top: 10px;\r\n    transform: translate(-50%, 0);\r\n}\r\n\r\np {\r\n  text-align: center;\r\n}<\/pre>\n<p>4. Finally, it&#8217;s time to add the JavaScript code that powers the Breakout game. Copy and paste the following JavaScript code into a separate .js file and link it to your HTML file using the <code>&lt;script&gt;<\/code> tag. Ensure the script tag is placed just before the closing <code>&lt;\/body&gt;<\/code> tag.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/\/ Canvas related variables\r\nvar canvas = document.getElementById('myCanvas');\r\nvar ctx = canvas.getContext('2d');\r\n\r\n\/\/ Game related variables\r\nvar lives = 3;\r\nvar gameOver = false;\r\nvar paused = false;\r\nvar score = 0;\r\nvar autoplayToggle = document.getElementById(\"autoplay\");\r\nautoplayToggle.checked = false;\r\n\r\n\/\/ Ball relates variables\r\nvar x = canvas.width \/ 2;\r\nvar y = canvas.height - 30;\r\nvar dx = 1.5;\r\nvar dy = -1.5;\r\nvar ballRadius = 10;\r\nvar maxSpeed = 3.5;\r\nvar speedMultiplier = 1;\r\n\r\n\/\/ Paddle related variables\r\nvar paddleHeight = 10;\r\nvar paddleWidth = 75;\r\nvar paddleX = (canvas.width - paddleWidth) \/ 2;\r\nvar paddleY = canvas.height - (paddleHeight + 5);\r\nvar rightPressed = false;\r\nvar leftPressed = false;\r\nvar paddleSpeed = 7;\r\n\r\n\/\/ Brick related variables\r\nvar brickRowCount = 3;\r\nvar brickColumnCount = 5;\r\nvar brickWidth = 75;\r\nvar brickHeight = 20;\r\nvar brickPadding = 10;\r\nvar brickOffsetTop = 30;\r\nvar brickOffsetLeft = 30;\r\nvar bricks = [];\r\nfor (c = 0; c &lt; brickColumnCount; c++) {\r\n    bricks[c] = [];\r\n    for (r = 0; r &lt; brickRowCount; r++) {\r\n        bricks[c][r] = {\r\n            x: 0,\r\n            y: 0,\r\n            status: 2\r\n        };\r\n    }\r\n}\r\n\r\nfunction draw() {    \r\n    if (!paused) {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n        if (autoplayToggle.checked) {\r\n            autoPlay();\r\n        }\r\n        drawPaddle();\r\n        drawBricks();\r\n        drawBall();\r\n        collisionDetection();\r\n        drawScore();\r\n        drawLives();\r\n\r\n        x += dx;\r\n        y += dy;\r\n    }\r\n    if (x + dx &gt; (canvas.width - ballRadius) || x + dx &lt; ballRadius) {\r\n        dx = -dx;\r\n    }\r\n    if (y + dy &lt; ballRadius) {\r\n        dy = -dy;\r\n    } else if (y + dy &gt; (canvas.height - (2 * ballRadius))) {\r\n\r\n        if (x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {\r\n            dy = -dy;\r\n            if (Math.abs(dx) &lt; maxSpeed &amp;&amp; Math.abs(dy) &lt; maxSpeed) {\r\n                dx *= speedMultiplier;\r\n                dy *= speedMultiplier;\r\n\r\n                console.log(dx);\r\n            }\r\n        } else {\r\n            lives--;\r\n            if (!lives) {\r\n                alert(\"GAME OVER\");\r\n                document.location.reload();\r\n            } else {\r\n                x = canvas.width \/ 2;\r\n                y = canvas.height - 30;\r\n                dx = 2;\r\n                dy = -2;\r\n                paddleX = (canvas.width - paddleWidth) \/ 2;\r\n            }\r\n\r\n        }\r\n\r\n    }\r\n\r\n    if (lives &lt;= 0) {\r\n        loseMessage.style.display = \"block\";\r\n    }\r\n    \r\n    requestAnimationFrame(draw);\r\n}\r\n\r\nfunction drawBall() {\r\n    ctx.beginPath();\r\n    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);\r\n    ctx.fillStyle = '#0095DD';\r\n    ctx.fill();\r\n    ctx.closePath();\r\n\r\n\r\n}\r\n\r\nfunction drawPaddle() {\r\n    ctx.beginPath();\r\n    ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);\r\n    ctx.fillStyle = \"#00FFFF\";\r\n    ctx.fill();\r\n    ctx.closePath();\r\n\r\n    if (rightPressed) {\r\n        if (paddleX + paddleSpeed &lt; canvas.width - paddleWidth) {\r\n            paddleX += paddleSpeed;\r\n        }\r\n    } else if (leftPressed) {\r\n        if (paddleX - paddleSpeed &gt; 0) {\r\n            paddleX -= paddleSpeed;\r\n        }\r\n    }\r\n}\r\n\r\nfunction autoPlay() {\r\n    var newX = x - (paddleWidth \/ 2);\r\n\r\n    if (newX &gt;= 0 &amp;&amp; newX &lt;= canvas.width - paddleWidth) {\r\n        paddleX = newX;\r\n    }\r\n}\r\n\r\nfunction drawBricks() {\r\n    for (c = 0; c &lt; brickColumnCount; c++) {\r\n        for (r = 0; r &lt; brickRowCount; r++) {\r\n            if (bricks[c][r].status &gt; 0) {\r\n                var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;\r\n                var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;\r\n                bricks[c][r].x = brickX;\r\n                bricks[c][r].y = brickY;\r\n                ctx.beginPath();\r\n                ctx.rect(brickX, brickY, brickWidth, brickHeight);\r\n                ctx.fillStyle = bricks[c][r].status == 2 ? \"#ddd000\" : \"#dd1e00\";\r\n                ctx.fill();\r\n                ctx.closePath();\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\nfunction collisionDetection() {\r\n    for (c = 0; c &lt; brickColumnCount; c++) {\r\n        for (r = 0; r &lt; brickRowCount; r++) {\r\n            var b = bricks[c][r];\r\n            if (b.status != 0) {\r\n                if (x &gt; b.x &amp;&amp; x &lt; b.x + brickWidth &amp;&amp; y - ballRadius &gt; b.y &amp;&amp; y - ballRadius &lt; b.y + brickHeight) {\r\n                    dy = -dy;\r\n                    b.status--;\r\n\r\n                    if (b.status == 0) {\r\n                        dy = -dy;\r\n                        score++;\r\n\r\n                        if (score == brickRowCount * brickColumnCount) {\r\n                            alert(\"YOU WIN, CONGRATULATIONS!\");\r\n                            document.location.reload();\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\nfunction drawScore() {\r\n    ctx.font = \"16px Arial\";\r\n    ctx.fillStyle = \"#0095DD\";\r\n    ctx.fillText(\"Score: \" + score, 8, 20);\r\n}\r\n\r\nfunction drawLives() {\r\n    ctx.font = \"16px Arial\";\r\n    ctx.fillStyle = \"#0095DD\";\r\n    ctx.fillText(\"Lives: \" + lives, canvas.width - 65, 20);\r\n}\r\n\r\nfunction keyDownHandler(e) {\r\n    if (e.keyCode == 39 || e.keyCode == 68) {\r\n        rightPressed = true;\r\n    } else if (e.keyCode == 37 || e.keyCode == 65) {\r\n        leftPressed = true;\r\n    }\r\n}\r\n\r\nfunction keyUpHandler(e) {\r\n    if (e.keyCode == 39 || e.keyCode == 68) {\r\n        rightPressed = false;\r\n    } else if (e.keyCode == 37 || e.keyCode == 65) {\r\n        leftPressed = false;\r\n    }\r\n}\r\n\r\nfunction pauseKeyPress(e) {\r\n    if (e.keyCode == 27) {\r\n        paused = !paused;\r\n        console.log(paused);\r\n    }\r\n}\r\n\r\nfunction mouseMoveHandler(e) {\r\n    var relativeX = e.clientX - canvas.offsetLeft;\r\n    if (relativeX &gt; 0 &amp;&amp; relativeX &lt; canvas.width) {\r\n        var newPaddleX = relativeX - paddleWidth \/ 2;\r\n\r\n        if (newPaddleX &gt;= 0 &amp;&amp; newPaddleX + paddleWidth &lt;= canvas.width) {\r\n            paddleX = newPaddleX;\r\n        }\r\n    }\r\n}\r\n\r\ndocument.addEventListener(\"keydown\", keyDownHandler, false);\r\ndocument.addEventListener(\"keyup\", keyUpHandler, false);\r\ndocument.addEventListener(\"keyup\", pauseKeyPress, false);\r\ndocument.addEventListener(\"mousemove\", mouseMoveHandler, false);\r\n\/\/setInterval(draw, 10);\r\ndraw();<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created a Breakout Game with Vanilla JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code creates a &#8220;Breakout Game&#8221; using Vanilla JavaScript. It renders a canvas with bricks, a ball, and a paddle&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":9628,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-9609","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Breakout Game with Vanilla JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Breakout Game with Vanilla JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Breakout Game with Vanilla JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Breakout Game with Vanilla JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-20T18:05:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Breakout Game with Vanilla JavaScript\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\"},\"wordCount\":264,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\",\"name\":\"Breakout Game with Vanilla JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:59+00:00\",\"description\":\"Here is a free code snippet to create a Breakout Game with Vanilla JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Breakout Game with Vanilla JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Breakout Game with Vanilla JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Breakout Game with Vanilla JavaScript &#8212; CodeHim","description":"Here is a free code snippet to create a Breakout Game with Vanilla JavaScript. You can view demo and download the source code.","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:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Breakout Game with Vanilla JavaScript &#8212; CodeHim","og_description":"Here is a free code snippet to create a Breakout Game with Vanilla JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T18:05:00+00:00","article_modified_time":"2024-01-22T11:05:59+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Breakout Game with Vanilla JavaScript","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:59+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/"},"wordCount":264,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/","name":"Breakout Game with Vanilla JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:59+00:00","description":"Here is a free code snippet to create a Breakout Game with Vanilla JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Breakout-Game-with-Vanilla-JavaScript.png","width":1280,"height":960,"caption":"Breakout Game with Vanilla JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/breakout-game-with-vanilla-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Breakout Game with Vanilla JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":855,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9609"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9609\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9628"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}