{"id":157,"date":"2026-05-22T13:41:58","date_gmt":"2026-05-22T13:41:58","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/a_mehraban\/?p=157"},"modified":"2026-05-22T13:41:58","modified_gmt":"2026-05-22T13:41:58","slug":"free-friday-assigment-5-22-2026","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/a_mehraban\/2026\/05\/22\/free-friday-assigment-5-22-2026\/","title":{"rendered":"Free friday assigment 5\/22\/2026"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hello, so today i Use some Ai and I made a block blast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">here is the index.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\" \/>\n  &lt;title>Block Blast Clone&lt;\/title>\n  &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n&lt;body>\n\n  &lt;h1>Block Blast Clone&lt;\/h1>\n\n  &lt;div id=\"info\">\n    Score: &lt;span id=\"score\">0&lt;\/span>\n  &lt;\/div>\n\n  &lt;div id=\"game\">\n    &lt;div id=\"board\">&lt;\/div>\n\n    &lt;div>\n      &lt;div id=\"pieces\">&lt;\/div>\n      &lt;button id=\"newPiecesBtn\">New Pieces&lt;\/button>\n    &lt;\/div>\n  &lt;\/div>\n\n  &lt;script>\n    const BOARD_SIZE = 10;\n    const boardEl = document.getElementById('board');\n    const piecesEl = document.getElementById('pieces');\n    const scoreEl = document.getElementById('score');\n    const newPiecesBtn = document.getElementById('newPiecesBtn');\n\n    let board = &#91;];\n    let score = 0;\n    let currentPieces = &#91;];\n    let draggedPiece = null;\n\n    const SHAPES = &#91;\n      &#91;&#91;0,0]],\n      &#91;&#91;0,0],&#91;0,1]],\n      &#91;&#91;0,0],&#91;1,0]],\n      &#91;&#91;0,0],&#91;0,1],&#91;0,2]],\n      &#91;&#91;0,0],&#91;1,0],&#91;2,0]],\n      &#91;&#91;0,0],&#91;0,1],&#91;1,0],&#91;1,1]],\n      &#91;&#91;0,0],&#91;1,0],&#91;1,1]],\n      &#91;&#91;0,1],&#91;1,0],&#91;1,1],&#91;1,2]]\n    ];\n\n    function initBoard() {\n      board = &#91;];\n      boardEl.innerHTML = '';\n      for (let r = 0; r &lt; BOARD_SIZE; r++) {\n        const row = &#91;];\n        for (let c = 0; c &lt; BOARD_SIZE; c++) {\n          row.push(0);\n          const cell = document.createElement('div');\n          cell.className = 'cell';\n          cell.dataset.row = r;\n          cell.dataset.col = c;\n\n          \/\/ Allow dropping\n          cell.addEventListener('dragover', e => e.preventDefault());\n          cell.addEventListener('drop', e => handleDrop(r, c));\n\n          boardEl.appendChild(cell);\n        }\n        board.push(row);\n      }\n      updateBoardUI();\n    }\n\n    function updateBoardUI() {\n      const cells = boardEl.querySelectorAll('.cell');\n      cells.forEach(cell => {\n        const r = parseInt(cell.dataset.row, 10);\n        const c = parseInt(cell.dataset.col, 10);\n        cell.classList.toggle('filled', board&#91;r]&#91;c] === 1);\n      });\n      scoreEl.textContent = score;\n    }\n\n    function randomPiece() {\n      const shape = SHAPES&#91;Math.floor(Math.random() * SHAPES.length)];\n      return { shape };\n    }\n\n    function generatePieces() {\n      currentPieces = &#91;randomPiece(), randomPiece(), randomPiece()];\n      renderPieces();\n    }\n\n    function renderPieces() {\n      piecesEl.innerHTML = '';\n      currentPieces.forEach((piece, index) => {\n        if (!piece) return;\n\n        const { shape } = piece;\n        const rows = Math.max(...shape.map(p => p&#91;0])) + 1;\n        const cols = Math.max(...shape.map(p => p&#91;1])) + 1;\n\n        const pieceDiv = document.createElement('div');\n        pieceDiv.className = 'piece';\n        pieceDiv.style.gridTemplateColumns = `repeat(${cols}, 20px)`;\n        pieceDiv.style.gridTemplateRows = `repeat(${rows}, 20px)`;\n\n        \/\/ Enable dragging\n        pieceDiv.draggable = true;\n        pieceDiv.addEventListener('dragstart', () => {\n          draggedPiece = { piece, index };\n        });\n\n        for (let r = 0; r &lt; rows; r++) {\n          for (let c = 0; c &lt; cols; c++) {\n            const cellDiv = document.createElement('div');\n            const isFilled = shape.some(p => p&#91;0] === r &amp;&amp; p&#91;1] === c);\n            if (isFilled) {\n              cellDiv.className = 'piece-cell';\n            } else {\n              cellDiv.style.width = '20px';\n              cellDiv.style.height = '20px';\n            }\n            pieceDiv.appendChild(cellDiv);\n          }\n        }\n\n        piecesEl.appendChild(pieceDiv);\n      });\n    }\n\n    function canPlacePiece(piece, baseRow, baseCol) {\n      for (const &#91;dr, dc] of piece.shape) {\n        const r = baseRow + dr;\n        const c = baseCol + dc;\n        if (r &lt; 0 || r >= BOARD_SIZE || c &lt; 0 || c >= BOARD_SIZE) return false;\n        if (board&#91;r]&#91;c] === 1) return false;\n      }\n      return true;\n    }\n\n    function placePiece(piece, baseRow, baseCol) {\n      for (const &#91;dr, dc] of piece.shape) {\n        const r = baseRow + dr;\n        const c = baseCol + dc;\n        board&#91;r]&#91;c] = 1;\n      }\n      clearLines();\n      score += piece.shape.length;\n      updateBoardUI();\n    }\n\n    function clearLines() {\n      let cleared = 0;\n\n      for (let r = 0; r &lt; BOARD_SIZE; r++) {\n        if (board&#91;r].every(cell => cell === 1)) {\n          cleared++;\n          for (let c = 0; c &lt; BOARD_SIZE; c++) board&#91;r]&#91;c] = 0;\n        }\n      }\n\n      for (let c = 0; c &lt; BOARD_SIZE; c++) {\n        let full = true;\n        for (let r = 0; r &lt; BOARD_SIZE; r++) {\n          if (board&#91;r]&#91;c] === 0) full = false;\n        }\n        if (full) {\n          cleared++;\n          for (let r = 0; r &lt; BOARD_SIZE; r++) board&#91;r]&#91;c] = 0;\n        }\n      }\n\n      if (cleared > 0) score += cleared * 10;\n    }\n\n    function handleDrop(row, col) {\n      if (!draggedPiece) return;\n\n      const { piece, index } = draggedPiece;\n\n      if (canPlacePiece(piece, row, col)) {\n        placePiece(piece, row, col);\n        currentPieces&#91;index] = null;\n        renderPieces();\n      }\n\n      draggedPiece = null;\n    }\n\n    newPiecesBtn.addEventListener('click', () => {\n      generatePieces();\n    });\n\n    initBoard();\n    generatePieces();\n  &lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">here is the style.css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* ===== General Page Styling ===== *\/\nbody {\n  font-family: \"Fredoka One\", Arial, sans-serif;\n  background: linear-gradient(135deg, #ffecd2, #fcb69f);\n  color: #333;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n  padding: 20px;\n}\n\nh1 {\n  font-size: 42px;\n  color: #ff6f61;\n  text-shadow: 3px 3px #ffffff;\n  margin-bottom: 10px;\n}\n\n\/* ===== Game Layout ===== *\/\n#game {\n  display: flex;\n  gap: 30px;\n  margin-top: 10px;\n}\n\n#info {\n  margin-top: 10px;\n  font-size: 22px;\n  font-weight: bold;\n  color: #ff6f61;\n}\n\n\/* ===== Board Styling ===== *\/\n#board {\n  display: grid;\n  grid-template-columns: repeat(10, 40px);\n  grid-template-rows: repeat(10, 40px);\n  gap: 4px;\n  background: #ffe6d9;\n  padding: 10px;\n  border-radius: 20px;\n  box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n}\n\n.cell {\n  width: 40px;\n  height: 40px;\n  background: #ffd1b3;\n  border-radius: 10px;\n  transition: background 0.2s, transform 0.2s;\n}\n\n.cell.filled {\n  background: #ff8b3d;\n  animation: pop 0.25s ease-out;\n}\n\n\/* Ghost preview *\/\n.cell.ghost {\n  background: rgba(255, 255, 255, 0.5);\n  border: 2px dashed #ff8b3d;\n}\n\n\/* ===== Pieces Section ===== *\/\n#pieces {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.piece {\n  display: inline-grid;\n  gap: 4px;\n  background: #ffe6d9;\n  padding: 10px;\n  border-radius: 16px;\n  cursor: grab;\n  transition: transform 0.2s, box-shadow 0.2s;\n  box-shadow: 0 6px 12px rgba(0,0,0,0.15);\n}\n\n.piece:hover {\n  transform: scale(1.08);\n}\n\n.piece:active {\n  transform: scale(1.15);\n  box-shadow: 0 0 20px #ff8b3d;\n}\n\n.piece-cell {\n  width: 28px;\n  height: 28px;\n  background: #ff6f61;\n  border-radius: 8px;\n  box-shadow: inset 0 4px 6px rgba(255,255,255,0.6),\n              inset 0 -4px 6px rgba(0,0,0,0.15);\n}\n\n\/* ===== Buttons ===== *\/\nbutton {\n  margin-top: 10px;\n  padding: 10px 18px;\n  border-radius: 12px;\n  border: none;\n  cursor: pointer;\n  background: #ff6f61;\n  color: #fff;\n  font-weight: bold;\n  font-size: 18px;\n  box-shadow: 0 6px 12px rgba(0,0,0,0.15);\n  transition: background 0.2s, transform 0.2s;\n}\n\nbutton:hover {\n  background: #ff8b3d;\n  transform: scale(1.05);\n}\n\n\/* ===== Animations ===== *\/\n@keyframes pop {\n  0% { transform: scale(0.6); }\n  60% { transform: scale(1.25); }\n  100% { transform: scale(1); }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">here u can see how its look like <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" src=\"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/05\/image-6-1024x498.png\" alt=\"\" class=\"wp-image-158\" srcset=\"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/05\/image-6-1024x498.png 1024w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/05\/image-6-300x146.png 300w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/05\/image-6-768x374.png 768w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/05\/image-6-1536x747.png 1536w, https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-content\/uploads\/2026\/05\/image-6.png 1873w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Hello, so today i Use some Ai and I made a block blast. here is the index.html here is the [&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-157","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/157","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=157"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/posts\/157\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/a_mehraban\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}