Page Title

GAME dev Tutorials P1

1) Loop

for creating a game loop you need to know about canvas first. its more efficient for creating and rendering games

Ok lets start you have to create a new project in sololearn first. it looks like this:

>HTML< / CSS / JS


                <canvas id="canvas"></canvas>

Open your JavaScript file and type this code. Note: (If you are copying codes only dont copy it now then and paste it directly. first listen to the tutorial. )

HTML / CSS / >JS<


            //Create a canvas Tag in html file first and name its id ="canvas"

window.onload=()=>{

//Gets canvas

canvas = document.getElementById("canvas");



//gets stuffs fron canvas

ctx = canvas.getContext("2d");



function update(){

//for updating elements
    

}


function draw(){

    //it draws the elements in screen

    window.requestAnimationFrame(draw)

}



}

EXAMPLE:

HTML / CSS / >JS<


            //Create a canvas Tag in html file first and name its id ="canvas"

window.onload=()=>{

//Gets canvas

canvas = document.getElementById("canvas");



//gets stuffs fron canvas

ctx = canvas.getContext("2d");


ballX = 0;//its a variable which stores 0 and it will be the x position of the ball



function update(){

ctx.fillRect(ballX,100,100,100) //it will draw into the canvas

//for updating elements
    

}


function draw(){

ctx.clearRect(0,0,1000,1000)
//it will now clear the screen for next frame

    //it draws the elements in screen

    update()//it will update now

    ballX++;

    if(ballX>=160){

        ballX=0;//makes the position 0 after it goes outside the canvas

    }
    

    window.requestAnimationFrame(draw)

}

draw()//calls the both function 



}

canvas - its the variable for storing canvas
ctx - for accesing the function like fillRect from canvas
update() - for updating elements . for example makeRect(x); x++; this will move the rect
draw() - the main function it helps tp clesr the screen and manage fps.
window.requestAnimationFrame() - it helps the update function to update the character

Result

Full Stack game dev tutorial P1