{"id":85,"date":"2025-10-12T05:02:05","date_gmt":"2025-10-12T05:02:05","guid":{"rendered":"https:\/\/blackhatseomaster.com\/?p=85"},"modified":"2025-10-12T05:58:39","modified_gmt":"2025-10-12T05:58:39","slug":"building-your-first-2d-game-with-javascript-and-canvas","status":"publish","type":"post","link":"https:\/\/blackhatseomaster.com\/en-in\/building-your-first-2d-game-with-javascript-and-canvas\/","title":{"rendered":"Building Your First 2D Game with JavaScript and Canvas"},"content":{"rendered":"

Learn how to build a simple but fun 2D game using only HTML, CSS, and JavaScript Canvas. Perfect for beginners who want hands-on experience.<\/p>\n\n\n\n

Game development may sound intimidating at first, but with modern web technologies, you can build interactive games with just a few lines of code. In this tutorial, we\u2019ll create a simple 2D game where a player controls a square that must dodge falling objects.<\/p>\n\n\n\n

Step 1: Setting Up the HTML Structure<\/h4>\n\n\n\n

Start with a simple HTML file. We need a <canvas><\/code> element where the game will be rendered.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n<head>\n  <title>2D Game<\/title>\n  <style>\n    canvas {\n      background: #000;\n      display: block;\n      margin: auto;\n    }\n  <\/style>\n<\/head>\n<body>\n  <canvas id="gameCanvas" width="400" height="600"><\/canvas>\n  <script src="game.js"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Step 2: Drawing on Canvas<\/h4>\n\n\n\n
In game.js<\/code>, we grab the canvas and draw the player:<\/p>\n\n\n\n
const canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\nlet player = { x: 180, y: 550, width: 40, height: 40, color: 'lime' };\n\nfunction drawPlayer() {\n  ctx.fillStyle = player.color;\n  ctx.fillRect(player.x, player.y, player.width, player.height);\n}\n<\/code><\/pre>\n\n\n\n
Step 3: Movement and Controls<\/h4>\n\n\n\n
We want the player to move left and right using arrow keys.<\/p>\n\n\n\n
document.addEventListener('keydown', (e) => {\n  if (e.key === 'ArrowLeft' && player.x > 0) player.x -= 20;\n  if (e.key === 'ArrowRight' && player.x < canvas.width - player.width) player.x += 20;\n});\n<\/code><\/pre>\n\n\n\n
Step 4: Adding Falling Objects<\/h4>\n\n\n\n
let obstacles = [];\n\nfunction createObstacle() {\n  obstacles.push({\n    x: Math.random() * (canvas.width - 40),\n    y: 0,\n    width: 40,\n    height: 40,\n    color: 'red'\n  });\n}\nsetInterval(createObstacle, 1000);\n<\/code><\/pre>\n\n\n\n
Step 5: Game Loop and Collision<\/h4>\n\n\n\n
function update() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  drawPlayer();\n\n  obstacles.forEach(ob => {\n    ob.y += 5;\n    ctx.fillStyle = ob.color;\n    ctx.fillRect(ob.x, ob.y, ob.width, ob.height);\n\n    if (\n      ob.x < player.x + player.width &&\n      ob.x + ob.width > player.x &&\n      ob.y < player.y + player.height &&\n      ob.y + ob.height > player.y\n    ) {\n      alert('Game Over!');\n      document.location.reload();\n    }\n  });\n\n  requestAnimationFrame(update);\n}\nupdate();\n<\/code><\/pre>\n\n\n\n
Step 6: Adding Style and Enhancements<\/h4>\n\n\n\n
You can make the game more engaging by adding background music, increasing difficulty, or showing a score.<\/p>\n\n\n\n
\u2705 Key Takeaways:<\/strong><\/p>\n\n\n\n