{"id":131,"date":"2026-04-10T13:53:16","date_gmt":"2026-04-10T13:53:16","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_mehraban\/?p=131"},"modified":"2026-04-10T13:53:16","modified_gmt":"2026-04-10T13:53:16","slug":"free-friday-assigment-4-10-26","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_mehraban\/2026\/04\/10\/free-friday-assigment-4-10-26\/","title":{"rendered":"Free Friday assigment 4\/10\/26"},"content":{"rendered":"\n<p>Ahmad Belal Mehraban <\/p>\n\n\n\n<p>Hello so I made a Dodge game in python <\/p>\n\n\n\n<p>so here you can look at the index.html code <br><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dodge Game<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n\n<body>\n    <h1> DODGE<\/h1>\n\n    <canvas id=\"gameCanvas\" width=\"600\" height=\"400\"><\/canvas>\n\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p>Here you can see the java script<\/p>\n\n\n\nconst canvas = document.getElementById(&#8220;gameCanvas&#8221;);\nconst ctx = canvas.getContext(&#8220;2d&#8221;);\n\n\nlet player = {\n    x: 300,\n    y: 200,\n    size: 25,\n    speed: 6,\n    trail: []\n};\n\n\nlet enemy = {\n    x: Math.random() * 550,\n    y: Math.random() * 350,\n    size: 30,\n    speed: 2.5,\n    pulse: 0\n};\n\nlet score = 0;\nlet gameOver = false;\nlet shake = 0;\n\n\nlet keys = {};\ndocument.addEventListener(&#8220;keydown&#8221;, (e) => keys[e.key] = true);\ndocument.addEventListener(&#8220;keyup&#8221;, (e) => keys[e.key] = false);\n\nfunction movePlayer() {\n    if (keys[&#8220;ArrowUp&#8221;]) player.y -= player.speed;\n    if (keys[&#8220;ArrowDown&#8221;]) player.y += player.speed;\n    if (keys[&#8220;ArrowLeft&#8221;]) player.x -= player.speed;\n    if (keys[&#8220;ArrowRight&#8221;]) player.x += player.speed;\n\n\n    player.x = Math.max(0, Math.min(canvas.width &#8211; player.size, player.x));\n    player.y = Math.max(0, Math.min(canvas.height &#8211; player.size, player.y));\n\n    player.trail.push({ x: player.x, y: player.y });\n    if (player.trail.length > 20) player.trail.shift();\n}\n\nfunction moveEnemy() {\n\n    if (enemy.x < player.x) enemy.x += enemy.speed;\n    if (enemy.x > player.x) enemy.x -= enemy.speed;\n    if (enemy.y < player.y) enemy.y += enemy.speed;\n    if (enemy.y > player.y) enemy.y -= enemy.speed;\n\n\n    enemy.pulse += 0.1;\n}\n\nfunction checkCollision() {\n    if (\n        player.x < enemy.x + enemy.size &#038;&#038;\n        player.x + player.size > enemy.x &#038;&#038;\n        player.y < enemy.y + enemy.size &#038;&#038;\n        player.y + player.size > enemy.y\n    ) {\n        gameOver = true;\n        shake = 20;\n    }\n}\n\nfunction drawBackground() {\n    let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);\n    gradient.addColorStop(0, &#8220;#00111a&#8221;);\n    gradient.addColorStop(1, &#8220;#000000&#8221;);\n    ctx.fillStyle = gradient;\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n}\n\nfunction drawPlayer() {\n\n    for (let i = 0; i < player.trail.length; i++) {\n        let t = player.trail[i];\n        ctx.fillStyle = `rgba(0, 255, 255, ${i \/ player.trail.length})`;\n        ctx.shadowColor = \"#00ffff\";\n        ctx.shadowBlur = 20;\n        ctx.fillRect(t.x, t.y, player.size, player.size);\n    }\n\n\n    ctx.fillStyle = \"#00eaff\";\n    ctx.shadowColor = \"#00eaff\";\n    ctx.shadowBlur = 25;\n    ctx.fillRect(player.x, player.y, player.size, player.size);\n}\n\nfunction drawEnemy() {\n    let pulseSize = Math.sin(enemy.pulse) * 5;\n\n    ctx.fillStyle = \"#ff0044\";\n    ctx.shadowColor = \"#ff0044\";\n    ctx.shadowBlur = 30;\n    ctx.fillRect(\n        enemy.x - pulseSize \/ 2,\n        enemy.y - pulseSize \/ 2,\n        enemy.size + pulseSize,\n        enemy.size + pulseSize\n    );\n}\n\nfunction drawScore() {\n    ctx.shadowBlur = 0;\n    ctx.fillStyle = \"white\";\n    ctx.font = \"22px Orbitron\";\n    ctx.fillText(\"Score: \" + score, 10, 25);\n}\n\nfunction update() {\n    if (gameOver) {\n        ctx.fillStyle = \"white\";\n        ctx.font = \"45px Orbitron\";\n        ctx.fillText(\"GAME OVER\", 180, 200);\n\n        ctx.font = \"22px Orbitron\";\n        ctx.fillText(\"Press R to Restart\", 210, 250);\n\n        document.addEventListener(\"keydown\", (e) => {\n            if (e.key === &#8220;r&#8221;) location.reload();\n        });\n\n        return;\n    }\n\n\n    if (shake > 0) {\n        ctx.save();\n        ctx.translate(Math.random() * shake &#8211; shake \/ 2, Math.random() * shake &#8211; shake \/ 2);\n        shake&#8211;;\n    }\n\n    drawBackground();\n    movePlayer();\n    moveEnemy();\n    checkCollision();\n\n    score++;\n\n    drawPlayer();\n    drawEnemy();\n    drawScore();\n\n    if (shake > 0) ctx.restore();\n\n    requestAnimationFrame(update);\n}\n\nupdate();\n\n\n\n\n<p>and here you see the style.css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nbody {\n    background: radial-gradient(circle at top, #1a1a1a, #000);\n    color: #e0e0e0;\n    font-family: 'Orbitron', sans-serif;\n    text-align: center;\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n}\n\n\nh1 {\n    margin-top: 25px;\n    font-size: 40px;\n    color: #00eaff;\n    text-shadow: 0 0 10px #00eaff, 0 0 20px #0088aa;\n    animation: glow 2s infinite alternate;\n}\n\n@keyframes glow {\n    from { text-shadow: 0 0 10px #00eaff; }\n    to { text-shadow: 0 0 25px #00eaff; }\n}\n\n\n#gameCanvas {\n    background: #111;\n    border: 4px solid #00eaff;\n    border-radius: 10px;\n    display: block;\n    margin: 30px auto;\n    box-shadow: 0 0 20px #00eaff, 0 0 40px #005577;\n    transition: 0.3s;\n}\n\n#gameCanvas:hover {\n    transform: scale(1.02);\n    box-shadow: 0 0 30px #00eaff, 0 0 60px #0088aa;\n}\n\n\nbutton {\n    padding: 12px 25px;\n    font-size: 18px;\n    border: none;\n    border-radius: 8px;\n    background: #00eaff;\n    color: #000;\n    cursor: pointer;\n    margin-top: 15px;\n    font-weight: bold;\n    transition: 0.2s;\n    box-shadow: 0 0 10px #00eaff;\n}\n\nbutton:hover {\n    background: #0088aa;\n    box-shadow: 0 0 20px #00eaff;\n    transform: translateY(-3px);\n}\n<\/code><\/pre>\n\n\n\n<p>here you can how its look like<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"802\" height=\"621\" src=\"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/04\/image.png\" alt=\"\" class=\"wp-image-132\" srcset=\"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/04\/image.png 802w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/04\/image-300x232.png 300w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/04\/image-768x595.png 768w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/figure>\n\n\n\n<p>thanks for watching.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ahmad Belal Mehraban Hello so I made a Dodge game in python so here you can look at the index.html [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-131","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/131\/revisions\/133"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}