Date1 Task How Progress Materials required Time required

8th April Learn the basics of Start the Khan academy course Completed on time. A functioning computer that 2 Hours
JavaScript. regarding basics of JavaScript. can run the Khan academy
website
i. construct a Complete the Khan academy
11th April Finish learning the basics of Completed on time. A functioning computer that 2 Hours
logical plan, JavaScript course regarding basics of
JavaScript.
can run the Khan academy
website
which 15th April Start learning the game Start the Khan academy course Completed on time. A functioning computer that 3 Hours
outlines the development type of
JavaScript
regarding the game
development type of JavaScript
can run the Khan academy
website
efficient use 18th April Finish learning the game Complete the Khan academy Completed on time. A functioning computer that 2 Hours
course regarding the game
of time and development type of
JavaScript development type of JavaScript
can run the Khan academy
website
resources, 21st April Start learning the basics of Start the Khan academy course
regarding basics of HTML.
Completed on time. A functioning computer that 3 Hours
HTML. can run the Khan academy
sufficient for website

peers to be 22nd April Finish learning the basics of Complete the Khan academy Completed on time. A functioning computer that can 1 Hour

able to follow HTML. course regarding basics of

HTML.
run the Khan Academy website

to create the 22nd April Start creating a simple snake Use skills attained from the Completed on time. A functioning computer that can 2 Hours

solution. game using my skills of Khan academy courses run the Khan Academy website
JavaScript and HTML. regarding JavaScript and HTML. and a website called Replit, via
which I will code.
25th April Continue working on the Use skills attained from the Completed on time. A functioning computer that 2 Hours
simple snake game using Khan academy courses can run the Khan Academy
my skills of JavaScript and regarding JavaScript and website and a website called
HTML. HTML. Replit, via which I will code.
29 April
th
Complete the simple Use skills attained from the Completed on time. A functioning computer that 1 Hour
snake game using my Khan academy courses can run the Khan Academy
skills of JavaScript and regarding JavaScript and website and a website
HTML HTML. called Replit, via which I
will
ii. demonstrate excellent technical skills when making the solution.
Tools used: Description:
<canvas id="gameCanvas" width="400" height="400"></canvas>w This creates an HTML canvas element (frame) with the ID "gameCanvas"
and sets its width and height to 400 pixels each. This canvas will be used for
drawing the game graphics and will be set as the maximum bounds for the
game to be played with. If the snake is seen to exit this boundary, the game
ends.
let snake = [{ x: 200, y: 200 }]; This initializes the snakes spawn point to the coordinates (200,200) (The
let food = { x: 0, y: 0 }; middle of the canvas) and sets initial position of food to (0,0). The use of 0,0
point makes the food always spawn in random locations.
function checkCollisions() { checkCollisions() function checks if the snake collides with the boundaries of
const head = snake[0]; the canvas or with itself. It first gets the position of the snake's head. Then, it
if ( checks if the head collides with any of the canvas boundaries or if it
head.x < 0 || overlaps/comes in contact with any other segment of the snake. If a collision
head.x >= canvas.width || is detected, the game is ended, and an alert is displayed to notify the player
head.y < 0 || that the game is over.
head.y >= canvas.height ||
snake.slice(1).some(segment => segment.x === head.x && segment.y ===
head.y)
){
clearInterval(gameLoop);
alert("Game Over!");
}
}
ii. demonstrate excellent technical skills when making the solution.

Tools used: Description:

function drawSnake() { This code gives colors and sizes to food and the snake- The basic shade out of the
ctx.fillStyle = "green"; RGB color wheel is provided for the components. Therefore, using the command
snake.forEach(segment => { “red, green” works. I have also added a command saying the automated adding of
ctx.fillRect(segment.x, segment.y, 10, 10); components to the snake whenever it eats a food. Each part for the snake and food
}); is set to measure (10,10) pixels.
}

function drawFood() {
ctx.fillStyle = "red";
ctx.fillRect(food.x, food.y, 10, 10);
}
clearInterval(gameLoop); When the snake collides with the boundaries, it prints/displays a message to notify
alert("Game Over!"); the user/player when the game is over.
if (head.x === food.x && head.y === food.y) { This checks if the position of the food is same as that of the head of the snake,
generateFood(); confirming whether the snake has eaten the food or not. This triggers another food
} to appear randomly within the canvas.
 iii. follow the plan to create the solution, which functions as intended and is presented
•Link to the file that contains my final Product (click here) Fig.1: Picture of my Game (Green dot is snake and
 After link is clicked and website opens, click on red dot is food):
As a food is eaten by snake, it grows one unit
the green button that says “Fork & Run”
larger.
 After that button is clicked, a pop-up will come up
with a blue button option labelled “Fork Repl”

 After this, the coding console and the game will

pop up on the right side. It automatically starts
and can be played with the arrow keys.

 When the snake touches the border, a web

popup arrives which says game over. Click Ok
over there and refresh the website to play again.

Fig. e: Shows a screenshot of my game

iv. explain changes made to the chosen design and the plan when making the solution.

Final Design Final Product

Changes made:
Overall, I followed my original plans core design and meaning to create my final product. The main change that is seen is the level of
detail on my final product. It is way more simplified than what I had planned to do, which is show in the Final design. A main reason for
this to happen is because I realized how complicated it would be for me to code a realistic and more enhanced snake, fruit and are for the
game. Therefore, I stuck to creating a simpler version of the game by using only basic pixels. I also simplified the overall movement of
the snake. My initial plan was a smooth movement of the snake, but the actual game has a slower and a bit rougher movement. I also
made the game more simplistic because adding more colors would be harder for me to code with my basic skill of coding and would also
require me learning newer skills and in some cases a new programming language, just to add small aesthetic based improvements.
Predicted Grade: 6-7
• I think I will get a grade of 6/7. I seem to have followed the rubric
well and shown proofs of my code and game that I created.