Interactive Pygame Tutorial<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n \n \n <style>\n body { font-family: 'Inter', sans-serif; }\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400;600&display=swap');\n .code-block {\n font-family: 'Fira Code', monospace;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 400px;\n height: 250px;\n max-height: 250px;\n margin-left: auto;\n margin-right: auto;\n }\n .sidebar-link {\n transition: all 0.2s ease-in-out;\n border-left: 3px solid transparent;\n }\n .sidebar-link.active {\n border-left-color: #0ea5e9; \/* sky-500 *\/\n color: #0ea5e9;\n transform: translateX(4px);\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-700\">\n\n <div class=\"flex\">\n \n <aside class=\"w-64 hidden lg:block sticky top-0 h-screen bg-white border-r border-slate-200 p-8\">\n <h2 class=\"text-xl font-bold text-slate-800 mb-6\">Pygame Tutorial<\/h2>\n <nav id=\"sidebar-nav\" class=\"flex flex-col space-y-3\">\n <a href=\"#introduction\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Introduction<\/a>\n <a href=\"#installation\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Installation<\/a>\n <a href=\"#game-loop\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">The Game Loop<\/a>\n <a href=\"#surfaces-rects\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Surfaces & Rects<\/a>\n <a href=\"#drawing\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Drawing<\/a>\n <a href=\"#input\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">User Input<\/a>\n <a href=\"#sound\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Sound & Music<\/a>\n <a href=\"#example\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Simple Game Example<\/a>\n <\/nav>\n <\/aside>\n\n \n <main class=\"flex-1 p-4 sm:p-6 md:p-10\">\n <div class=\"max-w-4xl mx-auto\">\n \n <h1 class=\"text-4xl font-bold text-slate-900 mb-4\">Interactive Pygame Tutorial \ud83c\udfae<\/h1>\n <p class=\"text-lg text-slate-600 mb-12\">An interactive guide to the fundamentals of game development with Pygame. Scroll down or use the sidebar to navigate.<\/p>\n\n \n <section id=\"introduction\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">What is Pygame?<\/h2>\n <div class=\"space-y-4 text-slate-600 leading-relaxed\">\n <p>This section introduces Pygame as a versatile set of Python modules for creating video games. It's built on the powerful SDL library and is celebrated for being free, open-source, and particularly friendly for beginners diving into game development.<\/p>\n <ul class=\"list-disc list-inside space-y-2 pl-4\">\n <li>Provides functionality for graphics, sound, and user input.<\/li>\n <li>Great for beginners to learn the basics of game development.<\/li>\n <li>Lots of tutorials and a strong community.<\/li>\n <li>It's fun!<\/li>\n <\/ul>\n <\/div>\n <\/section>\n\n \n <section id=\"installation\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Getting Started: Installation<\/h2>\n <p class=\"mb-4\">This part explains how to install Pygame. The process is straightforward using `pip`, Python's package installer. You can copy the commands below to get started and verify that the installation was successful.<\/p>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm\">pip install pygame<\/pre>\n <p class=\"mt-4 mb-2\">To verify the installation, run this in a Python shell:<\/p>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm\">import pygame\nprint(pygame.ver)<\/pre>\n <\/section>\n\n \n <section id=\"game-loop\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">The Heart of a Game: The Game Loop<\/h2>\n <p class=\"mb-4\">The game loop is the core of every Pygame application. This section breaks down its three essential phases: handling events, updating the game's state, and drawing everything to the screen. The code and visualization demonstrate a basic loop that keeps the application window open.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\">import pygame\n\npygame.init()\nscreen = pygame.display.set_mode((800, 600))\nrunning = True\n\n# Game Loop\nwhile running:\n # 1. Handle Events\n for event in pygame.event.get():\n if event.type == pygame.QUIT:\n running = False\n\n # 2. Update Game State (logic goes here)\n\n # 3. Draw to the Screen\n screen.fill((0, 0, 255)) # Fill screen with blue\n pygame.display.flip()\n\npygame.quit()<\/pre>\n <\/div>\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"gameLoopCanvas\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"surfaces-rects\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Surfaces and Rects<\/h2>\n <p class=\"mb-4\">Here, we introduce two fundamental concepts: `Surface` (a drawable canvas) and `Rect` (for positioning). The visualization shows how a new yellow surface (`player_surf`) is drawn onto the main blue screen surface using its `Rect` for placement.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># The screen is a Surface\nscreen = pygame.display.set_mode((800, 600))\n\n# Create a new Surface for our player\nplayer_surf = pygame.Surface((50, 50))\nplayer_surf.fill((255, 255, 0)) # Yellow square\n\n# Get a Rect for the player's position\nplayer_rect = player_surf.get_rect(center=(400, 300))\n\n# Draw the player onto the screen\nscreen.blit(player_surf, player_rect)<\/pre>\n <\/div>\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"surfacesCanvas\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"drawing\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Drawing and Images<\/h2>\n <p class=\"mb-4\">Pygame offers simple commands for drawing shapes and handling images. In this section, you can see the code for creating a rectangle and a circle. The canvas on the right provides a direct visual representation of these drawing commands in action.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># Draw a red rectangle on the screen\npygame.draw.rect(screen, 'Red', pygame.Rect(100, 100, 80, 100))\n\n# Draw a white circle\npygame.draw.circle(screen, 'White', (400, 300), 50)\n\n# To draw an image (file not included here):\n# player_image = pygame.image.load('player.png')\n# screen.blit(player_image, (100, 500))\n<\/pre>\n <\/div>\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"input\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Handling User Input<\/h2>\n <p class=\"mb-4\">Making a game interactive requires handling player input. This section shows how to detect key presses. Try it yourself! Click on the visualization and use your left and right arrow keys to move the red square.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># Continuous check (good for movement)\nkeys = pygame.key.get_pressed()\nif keys[pygame.K_LEFT]:\n player_rect.x -= 5\nif keys[pygame.K_RIGHT]:\n player_rect.x += 5\n\n# Event-based check (good for single actions)\nfor event in pygame.event.get():\n if event.type == pygame.KEYDOWN:\n if event.key == pygame.K_SPACE:\n print(\"Jump!\")<\/pre>\n <\/div>\n <div class=\"text-center\">\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"inputCanvas\"><\/canvas>\n <\/div>\n <p class=\"mt-2 font-semibold text-sky-600\">Click here & use \u25c0\ufe0f and \u25b6\ufe0f keys!<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"sound\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Adding Sound and Music<\/h2>\n <p class=\"mb-4\">Sound enhances the gaming experience. Pygame distinguishes between short sound effects (`Sound`) and longer background music (`music`). Click the button in the visualization to see a visual cue representing a sound effect being played.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># Load a short sound effect\njump_sound = pygame.mixer.Sound('audio\/jump.wav')\n\n# Play the sound\njump_sound.play()\n\n# Load and play background music\npygame.mixer.music.load('audio\/music.mp3')\npygame.mixer.music.play(loops=-1) # Loop forever<\/pre>\n <\/div>\n <div class=\"text-center\">\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"soundCanvas\"><\/canvas>\n <\/div>\n <button id=\"playSoundBtn\" class=\"mt-4 px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition\">Play Sound Effect<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"example\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Simple Game Example<\/h2>\n <p class=\"mb-4\">This final section combines all the concepts we've learned into a simple \"dodge the blocks\" game. The code shows the complete structure, and the interactive canvas lets you play the game right here in your browser. Use the arrow keys to move your player and avoid the falling blocks!<\/p>\n <div class=\"grid lg:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-[450px] overflow-auto\">import pygame, sys\nfrom random import randint\n\npygame.init()\nscreen = pygame.display.set_mode((800, 600))\nclock = pygame.time.Clock()\n\n# Player\nplayer_surf = pygame.Surface((50, 50))\nplayer_surf.fill('Red')\nplayer_rect = player_surf.get_rect(midbottom = (400, 600))\n\n# Enemy\nenemy_surf = pygame.Surface((40, 40))\nenemy_surf.fill('Yellow')\nenemy_rect = enemy_surf.get_rect(center = (randint(50, 750), -50))\n\nwhile True:\n for event in pygame.event.get():\n if event.type == pygame.QUIT:\n pygame.quit()\n sys.exit()\n\n keys = pygame.key.get_pressed()\n if keys[pygame.K_LEFT]: player_rect.x -= 5\n if keys[pygame.K_RIGHT]: player_rect.x += 5\n\n enemy_rect.y += 5\n if enemy_rect.top > 600:\n enemy_rect.bottom = 0\n enemy_rect.x = randint(50, 750)\n\n if player_rect.colliderect(enemy_rect):\n pygame.quit()\n sys.exit()\n\n screen.fill('Blue')\n screen.blit(player_surf, player_rect)\n screen.blit(enemy_surf, enemy_rect)\n\n pygame.display.update()\n clock.tick(60)<\/pre>\n <\/div>\n <div class=\"text-center\">\n <div class=\"w-full max-w-sm h-96 bg-slate-200 rounded-lg overflow-hidden mx-auto\">\n <canvas id=\"gameExampleCanvas\"><\/canvas>\n <\/div>\n <p class=\"mt-2 font-semibold text-sky-600\">Use \u25c0\ufe0f and \u25b6\ufe0f to dodge the blocks!<\/p>\n <button id=\"restartGameBtn\" class=\"mt-2 px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition\">Restart Game<\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/main>\n <\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n \/\/ --- Sidebar Navigation Active State ---\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('#sidebar-nav a');\n \n const options = {\n root: null,\n rootMargin: '0px',\n threshold: 0.3\n };\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.classList.toggle('active', link.getAttribute('href').substring(1) === entry.target.id);\n });\n }\n });\n }, options);\n\n sections.forEach(section => {\n observer.observe(section);\n });\n\n \/\/ --- Canvas Visualizations ---\n \n function setupCanvas(canvasId) {\n const canvas = document.getElementById(canvasId);\n if (!canvas) return null;\n const parent = canvas.parentElement;\n canvas.width = parent.clientWidth;\n canvas.height = parent.clientHeight;\n const ctx = canvas.getContext('2d');\n return { canvas, ctx, width: canvas.width, height: canvas.height };\n }\n\n \/\/ 1. Game Loop Canvas\n const gameLoopViz = setupCanvas('gameLoopCanvas');\n if (gameLoopViz) {\n let alpha = 0;\n let direction = 1;\n function animateGameLoop() {\n const { ctx, width, height } = gameLoopViz;\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n \n alpha += 0.02 * direction;\n if (alpha > 1 || alpha < 0.2) direction *= -1;\n\n ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;\n ctx.font = 'bold 16px Inter';\n ctx.textAlign = 'center';\n ctx.fillText('Game Loop Running...', width \/ 2, height \/ 2);\n requestAnimationFrame(animateGameLoop);\n }\n animateGameLoop();\n }\n \n \/\/ 2. Surfaces & Rects Canvas\n const surfacesViz = setupCanvas('surfacesCanvas');\n if (surfacesViz) {\n const { ctx, width, height } = surfacesViz;\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n \n ctx.fillStyle = '#facc15'; \/\/ yellow-400\n ctx.fillRect(width\/2 - 25, height\/2 - 25, 50, 50);\n }\n \n \/\/ 3. Drawing Canvas\n const drawingViz = setupCanvas('drawingCanvas');\n if (drawingViz) {\n const { ctx, width, height } = drawingViz;\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n\n \/\/ Draw rect\n ctx.fillStyle = '#ef4444'; \/\/ red-500\n ctx.fillRect(40, 40, 80, 100);\n \n \/\/ Draw circle\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.arc(width - 80, height\/2, 40, 0, Math.PI * 2);\n ctx.fill();\n\n \/\/ Simulate loaded image\n ctx.fillStyle = '#22c55e'; \/\/ green-500\n ctx.fillRect(40, height - 90, 60, 60);\n }\n\n \/\/ 4. Input Canvas\n const inputViz = setupCanvas('inputCanvas');\n if (inputViz) {\n let playerX = inputViz.width \/ 2;\n const keys = {};\n const player = { x: inputViz.width\/2 - 25, y: inputViz.height\/2 - 25, width: 50, height: 50, speed: 4 };\n\n document.addEventListener('keydown', (e) => keys[e.key] = true);\n document.addEventListener('keyup', (e) => keys[e.key] = false);\n\n function animateInput() {\n const { ctx, width, height } = inputViz;\n if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;\n if (keys['ArrowRight'] && player.x < width - player.width) player.x += player.speed;\n\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n\n ctx.fillStyle = '#ef4444'; \/\/ red-500\n ctx.fillRect(player.x, player.y, player.width, player.height);\n requestAnimationFrame(animateInput);\n }\n animateInput();\n }\n \n \/\/ 5. Sound Canvas\n const soundViz = setupCanvas('soundCanvas');\n if (soundViz) {\n let ripple = { active: false, radius: 0, alpha: 1 };\n const { ctx, width, height } = soundViz;\n \n document.getElementById('playSoundBtn').addEventListener('click', () => {\n ripple = { active: true, radius: 0, alpha: 1 };\n });\n\n function animateSound() {\n ctx.fillStyle = '#3b82f6';\n ctx.fillRect(0, 0, width, height);\n \n if (ripple.active) {\n ctx.strokeStyle = `rgba(255, 255, 255, ${ripple.alpha})`;\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.arc(width\/2, height\/2, ripple.radius, 0, Math.PI * 2);\n ctx.stroke();\n\n ripple.radius += 2;\n ripple.alpha -= 0.02;\n if (ripple.alpha <= 0) ripple.active = false;\n } else {\n ctx.fillStyle = `rgba(255, 255, 255, 0.8)`;\n ctx.font = 'bold 20px Inter';\n ctx.textAlign = 'center';\n ctx.fillText('Click Below', width \/ 2, height \/ 2);\n }\n\n requestAnimationFrame(animateSound);\n }\n animateSound();\n }\n \n \/\/ 6. Game Example Canvas\n const gameViz = setupCanvas('gameExampleCanvas');\n if (gameViz) {\n const keys = {};\n let player, enemies, score, gameOver;\n\n function initGame() {\n player = { x: gameViz.width \/ 2 - 20, y: gameViz.height - 40, width: 40, height: 20, speed: 4 };\n enemies = [];\n score = 0;\n gameOver = false;\n for(let i=0; i < 3; i++) {\n spawnEnemy();\n }\n }\n\n function spawnEnemy() {\n enemies.push({\n x: Math.random() * (gameViz.width - 30),\n y: -30,\n width: 30,\n height: 30,\n speed: 2 + Math.random() * 2\n });\n }\n \n document.getElementById('restartGameBtn').addEventListener('click', initGame);\n document.addEventListener('keydown', (e) => keys[e.key] = true);\n document.addEventListener('keyup', (e) => keys[e.key] = false);\n \n function animateGame() {\n const { ctx, width, height } = gameViz;\n ctx.fillStyle = '#0f172a'; \/\/ slate-900\n ctx.fillRect(0, 0, width, height);\n\n if(gameOver) {\n ctx.fillStyle = 'white';\n ctx.font = 'bold 30px Inter';\n ctx.textAlign = 'center';\n ctx.fillText('GAME OVER', width \/ 2, height \/ 2);\n ctx.font = '16px Inter';\n ctx.fillText(`Score: ${Math.floor(score)}`, width \/ 2, height \/ 2 + 30);\n requestAnimationFrame(animateGame);\n return;\n }\n \n score += 0.1;\n\n \/\/ Player logic\n if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;\n if (keys['ArrowRight'] && player.x < width - player.width) player.x += player.speed;\n \n ctx.fillStyle = '#ef4444'; \/\/ red-500\n ctx.fillRect(player.x, player.y, player.width, player.height);\n \n \/\/ Enemy logic\n enemies.forEach((enemy, index) => {\n enemy.y += enemy.speed;\n ctx.fillStyle = '#facc15'; \/\/ yellow-400\n ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);\n\n \/\/ Collision\n if (player.x < enemy.x + enemy.width &&\n player.x + player.width > enemy.x &&\n player.y < enemy.y + enemy.height &&\n player.y + player.height > enemy.y) {\n gameOver = true;\n }\n \n if(enemy.y > height) {\n enemies.splice(index, 1);\n spawnEnemy();\n }\n });\n\n \/\/ Score\n ctx.fillStyle = 'white';\n ctx.font = '16px Inter';\n ctx.textAlign = 'left';\n ctx.fillText(`Score: ${Math.floor(score)}`, 10, 20);\n\n requestAnimationFrame(animateGame);\n }\n \n initGame();\n animateGame();\n }\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Interactive Pygame Tutorial Pygame Tutorial Introduction Installation The Game Loop Surfaces & Rects Drawing User Input Sound & Music Simple Game Example Interactive Pygame Tutorial \ud83c\udfae An interactive guide to the fundamentals of game development with Pygame. Scroll down or use the sidebar to navigate. What is Pygame? This section introduces Pygame as a versatile […]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4177","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/comments?post=4177"}],"version-history":[{"count":4,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4177\/revisions"}],"predecessor-version":[{"id":4181,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4177\/revisions\/4181"}],"wp:attachment":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/media?parent=4177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/categories?post=4177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/tags?post=4177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n Interactive Pygame Tutorial<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n \n \n <style>\n body { font-family: 'Inter', sans-serif; }\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400;600&display=swap');\n .code-block {\n font-family: 'Fira Code', monospace;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 400px;\n height: 250px;\n max-height: 250px;\n margin-left: auto;\n margin-right: auto;\n }\n .sidebar-link {\n transition: all 0.2s ease-in-out;\n border-left: 3px solid transparent;\n }\n .sidebar-link.active {\n border-left-color: #0ea5e9; \/* sky-500 *\/\n color: #0ea5e9;\n transform: translateX(4px);\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-700\">\n\n <div class=\"flex\">\n \n <aside class=\"w-64 hidden lg:block sticky top-0 h-screen bg-white border-r border-slate-200 p-8\">\n <h2 class=\"text-xl font-bold text-slate-800 mb-6\">Pygame Tutorial<\/h2>\n <nav id=\"sidebar-nav\" class=\"flex flex-col space-y-3\">\n <a href=\"#introduction\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Introduction<\/a>\n <a href=\"#installation\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Installation<\/a>\n <a href=\"#game-loop\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">The Game Loop<\/a>\n <a href=\"#surfaces-rects\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Surfaces & Rects<\/a>\n <a href=\"#drawing\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Drawing<\/a>\n <a href=\"#input\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">User Input<\/a>\n <a href=\"#sound\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Sound & Music<\/a>\n <a href=\"#example\" class=\"sidebar-link px-3 py-2 text-slate-600 hover:text-sky-500 font-medium\">Simple Game Example<\/a>\n <\/nav>\n <\/aside>\n\n \n <main class=\"flex-1 p-4 sm:p-6 md:p-10\">\n <div class=\"max-w-4xl mx-auto\">\n \n <h1 class=\"text-4xl font-bold text-slate-900 mb-4\">Interactive Pygame Tutorial \ud83c\udfae<\/h1>\n <p class=\"text-lg text-slate-600 mb-12\">An interactive guide to the fundamentals of game development with Pygame. Scroll down or use the sidebar to navigate.<\/p>\n\n \n <section id=\"introduction\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">What is Pygame?<\/h2>\n <div class=\"space-y-4 text-slate-600 leading-relaxed\">\n <p>This section introduces Pygame as a versatile set of Python modules for creating video games. It's built on the powerful SDL library and is celebrated for being free, open-source, and particularly friendly for beginners diving into game development.<\/p>\n <ul class=\"list-disc list-inside space-y-2 pl-4\">\n <li>Provides functionality for graphics, sound, and user input.<\/li>\n <li>Great for beginners to learn the basics of game development.<\/li>\n <li>Lots of tutorials and a strong community.<\/li>\n <li>It's fun!<\/li>\n <\/ul>\n <\/div>\n <\/section>\n\n \n <section id=\"installation\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Getting Started: Installation<\/h2>\n <p class=\"mb-4\">This part explains how to install Pygame. The process is straightforward using `pip`, Python's package installer. You can copy the commands below to get started and verify that the installation was successful.<\/p>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm\">pip install pygame<\/pre>\n <p class=\"mt-4 mb-2\">To verify the installation, run this in a Python shell:<\/p>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm\">import pygame\nprint(pygame.ver)<\/pre>\n <\/section>\n\n \n <section id=\"game-loop\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">The Heart of a Game: The Game Loop<\/h2>\n <p class=\"mb-4\">The game loop is the core of every Pygame application. This section breaks down its three essential phases: handling events, updating the game's state, and drawing everything to the screen. The code and visualization demonstrate a basic loop that keeps the application window open.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\">import pygame\n\npygame.init()\nscreen = pygame.display.set_mode((800, 600))\nrunning = True\n\n# Game Loop\nwhile running:\n # 1. Handle Events\n for event in pygame.event.get():\n if event.type == pygame.QUIT:\n running = False\n\n # 2. Update Game State (logic goes here)\n\n # 3. Draw to the Screen\n screen.fill((0, 0, 255)) # Fill screen with blue\n pygame.display.flip()\n\npygame.quit()<\/pre>\n <\/div>\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"gameLoopCanvas\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"surfaces-rects\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Surfaces and Rects<\/h2>\n <p class=\"mb-4\">Here, we introduce two fundamental concepts: `Surface` (a drawable canvas) and `Rect` (for positioning). The visualization shows how a new yellow surface (`player_surf`) is drawn onto the main blue screen surface using its `Rect` for placement.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># The screen is a Surface\nscreen = pygame.display.set_mode((800, 600))\n\n# Create a new Surface for our player\nplayer_surf = pygame.Surface((50, 50))\nplayer_surf.fill((255, 255, 0)) # Yellow square\n\n# Get a Rect for the player's position\nplayer_rect = player_surf.get_rect(center=(400, 300))\n\n# Draw the player onto the screen\nscreen.blit(player_surf, player_rect)<\/pre>\n <\/div>\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"surfacesCanvas\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"drawing\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Drawing and Images<\/h2>\n <p class=\"mb-4\">Pygame offers simple commands for drawing shapes and handling images. In this section, you can see the code for creating a rectangle and a circle. The canvas on the right provides a direct visual representation of these drawing commands in action.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># Draw a red rectangle on the screen\npygame.draw.rect(screen, 'Red', pygame.Rect(100, 100, 80, 100))\n\n# Draw a white circle\npygame.draw.circle(screen, 'White', (400, 300), 50)\n\n# To draw an image (file not included here):\n# player_image = pygame.image.load('player.png')\n# screen.blit(player_image, (100, 500))\n<\/pre>\n <\/div>\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"drawingCanvas\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"input\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Handling User Input<\/h2>\n <p class=\"mb-4\">Making a game interactive requires handling player input. This section shows how to detect key presses. Try it yourself! Click on the visualization and use your left and right arrow keys to move the red square.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># Continuous check (good for movement)\nkeys = pygame.key.get_pressed()\nif keys[pygame.K_LEFT]:\n player_rect.x -= 5\nif keys[pygame.K_RIGHT]:\n player_rect.x += 5\n\n# Event-based check (good for single actions)\nfor event in pygame.event.get():\n if event.type == pygame.KEYDOWN:\n if event.key == pygame.K_SPACE:\n print(\"Jump!\")<\/pre>\n <\/div>\n <div class=\"text-center\">\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"inputCanvas\"><\/canvas>\n <\/div>\n <p class=\"mt-2 font-semibold text-sky-600\">Click here & use \u25c0\ufe0f and \u25b6\ufe0f keys!<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"sound\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Adding Sound and Music<\/h2>\n <p class=\"mb-4\">Sound enhances the gaming experience. Pygame distinguishes between short sound effects (`Sound`) and longer background music (`music`). Click the button in the visualization to see a visual cue representing a sound effect being played.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-full\"># Load a short sound effect\njump_sound = pygame.mixer.Sound('audio\/jump.wav')\n\n# Play the sound\njump_sound.play()\n\n# Load and play background music\npygame.mixer.music.load('audio\/music.mp3')\npygame.mixer.music.play(loops=-1) # Loop forever<\/pre>\n <\/div>\n <div class=\"text-center\">\n <div class=\"chart-container bg-slate-200 rounded-lg overflow-hidden\">\n <canvas id=\"soundCanvas\"><\/canvas>\n <\/div>\n <button id=\"playSoundBtn\" class=\"mt-4 px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition\">Play Sound Effect<\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"example\" class=\"mb-16\">\n <h2 class=\"text-3xl font-bold text-slate-800 mb-4 border-b pb-2\">Simple Game Example<\/h2>\n <p class=\"mb-4\">This final section combines all the concepts we've learned into a simple \"dodge the blocks\" game. The code shows the complete structure, and the interactive canvas lets you play the game right here in your browser. Use the arrow keys to move your player and avoid the falling blocks!<\/p>\n <div class=\"grid lg:grid-cols-2 gap-8 items-center\">\n <div>\n <pre class=\"bg-slate-800 text-white rounded-lg p-4 code-block text-sm h-[450px] overflow-auto\">import pygame, sys\nfrom random import randint\n\npygame.init()\nscreen = pygame.display.set_mode((800, 600))\nclock = pygame.time.Clock()\n\n# Player\nplayer_surf = pygame.Surface((50, 50))\nplayer_surf.fill('Red')\nplayer_rect = player_surf.get_rect(midbottom = (400, 600))\n\n# Enemy\nenemy_surf = pygame.Surface((40, 40))\nenemy_surf.fill('Yellow')\nenemy_rect = enemy_surf.get_rect(center = (randint(50, 750), -50))\n\nwhile True:\n for event in pygame.event.get():\n if event.type == pygame.QUIT:\n pygame.quit()\n sys.exit()\n\n keys = pygame.key.get_pressed()\n if keys[pygame.K_LEFT]: player_rect.x -= 5\n if keys[pygame.K_RIGHT]: player_rect.x += 5\n\n enemy_rect.y += 5\n if enemy_rect.top > 600:\n enemy_rect.bottom = 0\n enemy_rect.x = randint(50, 750)\n\n if player_rect.colliderect(enemy_rect):\n pygame.quit()\n sys.exit()\n\n screen.fill('Blue')\n screen.blit(player_surf, player_rect)\n screen.blit(enemy_surf, enemy_rect)\n\n pygame.display.update()\n clock.tick(60)<\/pre>\n <\/div>\n <div class=\"text-center\">\n <div class=\"w-full max-w-sm h-96 bg-slate-200 rounded-lg overflow-hidden mx-auto\">\n <canvas id=\"gameExampleCanvas\"><\/canvas>\n <\/div>\n <p class=\"mt-2 font-semibold text-sky-600\">Use \u25c0\ufe0f and \u25b6\ufe0f to dodge the blocks!<\/p>\n <button id=\"restartGameBtn\" class=\"mt-2 px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition\">Restart Game<\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/main>\n <\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n \/\/ --- Sidebar Navigation Active State ---\n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('#sidebar-nav a');\n \n const options = {\n root: null,\n rootMargin: '0px',\n threshold: 0.3\n };\n\n const observer = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n navLinks.forEach(link => {\n link.classList.toggle('active', link.getAttribute('href').substring(1) === entry.target.id);\n });\n }\n });\n }, options);\n\n sections.forEach(section => {\n observer.observe(section);\n });\n\n \/\/ --- Canvas Visualizations ---\n \n function setupCanvas(canvasId) {\n const canvas = document.getElementById(canvasId);\n if (!canvas) return null;\n const parent = canvas.parentElement;\n canvas.width = parent.clientWidth;\n canvas.height = parent.clientHeight;\n const ctx = canvas.getContext('2d');\n return { canvas, ctx, width: canvas.width, height: canvas.height };\n }\n\n \/\/ 1. Game Loop Canvas\n const gameLoopViz = setupCanvas('gameLoopCanvas');\n if (gameLoopViz) {\n let alpha = 0;\n let direction = 1;\n function animateGameLoop() {\n const { ctx, width, height } = gameLoopViz;\n ctx.clearRect(0, 0, width, height);\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n \n alpha += 0.02 * direction;\n if (alpha > 1 || alpha < 0.2) direction *= -1;\n\n ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;\n ctx.font = 'bold 16px Inter';\n ctx.textAlign = 'center';\n ctx.fillText('Game Loop Running...', width \/ 2, height \/ 2);\n requestAnimationFrame(animateGameLoop);\n }\n animateGameLoop();\n }\n \n \/\/ 2. Surfaces & Rects Canvas\n const surfacesViz = setupCanvas('surfacesCanvas');\n if (surfacesViz) {\n const { ctx, width, height } = surfacesViz;\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n \n ctx.fillStyle = '#facc15'; \/\/ yellow-400\n ctx.fillRect(width\/2 - 25, height\/2 - 25, 50, 50);\n }\n \n \/\/ 3. Drawing Canvas\n const drawingViz = setupCanvas('drawingCanvas');\n if (drawingViz) {\n const { ctx, width, height } = drawingViz;\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n\n \/\/ Draw rect\n ctx.fillStyle = '#ef4444'; \/\/ red-500\n ctx.fillRect(40, 40, 80, 100);\n \n \/\/ Draw circle\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.arc(width - 80, height\/2, 40, 0, Math.PI * 2);\n ctx.fill();\n\n \/\/ Simulate loaded image\n ctx.fillStyle = '#22c55e'; \/\/ green-500\n ctx.fillRect(40, height - 90, 60, 60);\n }\n\n \/\/ 4. Input Canvas\n const inputViz = setupCanvas('inputCanvas');\n if (inputViz) {\n let playerX = inputViz.width \/ 2;\n const keys = {};\n const player = { x: inputViz.width\/2 - 25, y: inputViz.height\/2 - 25, width: 50, height: 50, speed: 4 };\n\n document.addEventListener('keydown', (e) => keys[e.key] = true);\n document.addEventListener('keyup', (e) => keys[e.key] = false);\n\n function animateInput() {\n const { ctx, width, height } = inputViz;\n if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;\n if (keys['ArrowRight'] && player.x < width - player.width) player.x += player.speed;\n\n ctx.fillStyle = '#3b82f6'; \/\/ blue-500\n ctx.fillRect(0, 0, width, height);\n\n ctx.fillStyle = '#ef4444'; \/\/ red-500\n ctx.fillRect(player.x, player.y, player.width, player.height);\n requestAnimationFrame(animateInput);\n }\n animateInput();\n }\n \n \/\/ 5. Sound Canvas\n const soundViz = setupCanvas('soundCanvas');\n if (soundViz) {\n let ripple = { active: false, radius: 0, alpha: 1 };\n const { ctx, width, height } = soundViz;\n \n document.getElementById('playSoundBtn').addEventListener('click', () => {\n ripple = { active: true, radius: 0, alpha: 1 };\n });\n\n function animateSound() {\n ctx.fillStyle = '#3b82f6';\n ctx.fillRect(0, 0, width, height);\n \n if (ripple.active) {\n ctx.strokeStyle = `rgba(255, 255, 255, ${ripple.alpha})`;\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.arc(width\/2, height\/2, ripple.radius, 0, Math.PI * 2);\n ctx.stroke();\n\n ripple.radius += 2;\n ripple.alpha -= 0.02;\n if (ripple.alpha <= 0) ripple.active = false;\n } else {\n ctx.fillStyle = `rgba(255, 255, 255, 0.8)`;\n ctx.font = 'bold 20px Inter';\n ctx.textAlign = 'center';\n ctx.fillText('Click Below', width \/ 2, height \/ 2);\n }\n\n requestAnimationFrame(animateSound);\n }\n animateSound();\n }\n \n \/\/ 6. Game Example Canvas\n const gameViz = setupCanvas('gameExampleCanvas');\n if (gameViz) {\n const keys = {};\n let player, enemies, score, gameOver;\n\n function initGame() {\n player = { x: gameViz.width \/ 2 - 20, y: gameViz.height - 40, width: 40, height: 20, speed: 4 };\n enemies = [];\n score = 0;\n gameOver = false;\n for(let i=0; i < 3; i++) {\n spawnEnemy();\n }\n }\n\n function spawnEnemy() {\n enemies.push({\n x: Math.random() * (gameViz.width - 30),\n y: -30,\n width: 30,\n height: 30,\n speed: 2 + Math.random() * 2\n });\n }\n \n document.getElementById('restartGameBtn').addEventListener('click', initGame);\n document.addEventListener('keydown', (e) => keys[e.key] = true);\n document.addEventListener('keyup', (e) => keys[e.key] = false);\n \n function animateGame() {\n const { ctx, width, height } = gameViz;\n ctx.fillStyle = '#0f172a'; \/\/ slate-900\n ctx.fillRect(0, 0, width, height);\n\n if(gameOver) {\n ctx.fillStyle = 'white';\n ctx.font = 'bold 30px Inter';\n ctx.textAlign = 'center';\n ctx.fillText('GAME OVER', width \/ 2, height \/ 2);\n ctx.font = '16px Inter';\n ctx.fillText(`Score: ${Math.floor(score)}`, width \/ 2, height \/ 2 + 30);\n requestAnimationFrame(animateGame);\n return;\n }\n \n score += 0.1;\n\n \/\/ Player logic\n if (keys['ArrowLeft'] && player.x > 0) player.x -= player.speed;\n if (keys['ArrowRight'] && player.x < width - player.width) player.x += player.speed;\n \n ctx.fillStyle = '#ef4444'; \/\/ red-500\n ctx.fillRect(player.x, player.y, player.width, player.height);\n \n \/\/ Enemy logic\n enemies.forEach((enemy, index) => {\n enemy.y += enemy.speed;\n ctx.fillStyle = '#facc15'; \/\/ yellow-400\n ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);\n\n \/\/ Collision\n if (player.x < enemy.x + enemy.width &&\n player.x + player.width > enemy.x &&\n player.y < enemy.y + enemy.height &&\n player.y + player.height > enemy.y) {\n gameOver = true;\n }\n \n if(enemy.y > height) {\n enemies.splice(index, 1);\n spawnEnemy();\n }\n });\n\n \/\/ Score\n ctx.fillStyle = 'white';\n ctx.font = '16px Inter';\n ctx.textAlign = 'left';\n ctx.fillText(`Score: ${Math.floor(score)}`, 10, 20);\n\n requestAnimationFrame(animateGame);\n }\n \n initGame();\n animateGame();\n }\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Interactive Pygame Tutorial Pygame Tutorial Introduction Installation The Game Loop Surfaces & Rects Drawing User Input Sound & Music Simple Game Example Interactive Pygame Tutorial \ud83c\udfae An interactive guide to the fundamentals of game development with Pygame. Scroll down or use the sidebar to navigate. What is Pygame? This section introduces Pygame as a versatile […]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4177","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/comments?post=4177"}],"version-history":[{"count":4,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4177\/revisions"}],"predecessor-version":[{"id":4181,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4177\/revisions\/4181"}],"wp:attachment":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/media?parent=4177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/categories?post=4177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/tags?post=4177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}