Space Rocks Tutorial

The first thing you need to do to make a JavaScript web game is a Text Editor.
I like to use the Microsoft Text Editor called "Visual Studio Code".
I think that it is a good Text Editor for beginners because it shows mistakes you make in your syntax.

List of things to do:

Download a Text Editor(I like Visual Studio Code, and it's free)
Save the file as .html (for example spacerocks_tutorial.html)

A great resource to build games is Mozilla's game tutorials. There are also Udemy classes, and also alot of great tutorials on youtube.
Mozilla will teach you how to set up an Html page, and start working with canvas.

If you see a double slash (//) in the game code. That line is a comment for the reader, and not part of the game code.

<!DOCTYPE html>
        <html>
        <head>
        
        
            <title>Space Rocks</title>
        </head>
        
        <body>
            <canvas id="mycanvas" width="700" height="500"style="border:2px solid Black"></canvas>
        
            <script> 
                var canvas = document.getElementById("mycanvas");
                var ctx = canvas.getContext("2d");
                var SpaceshipxCoordinate = 230;
                var SpaceshipyCoordinate = 310;
                var spaceShipRadius = 20;
                var MeteorxCoordinate = 400;
                var MeteoryCoordinate = 490;
                var speedMeteormovesRight = 1;
                var speedMeteormovesUp = 1;
                var meteorRadius = 10;
                speed = 20;
                score = 0;
        
                    function createSpaceship() {
                                ctx.beginPath();
                                ctx.arc(SpaceshipxCoordinate, SpaceshipyCoordinate, spaceShipRadius, 0, Math.PI*2, true);
                                ctx.fillStyle = "Gray";
                                ctx.fill();
                                ctx.closePath();
                }
        
                    function reset() {
                                SpaceshipxCoordinate = canvas.width - 470;
                                SpaceshipyCoordinate = canvas.height-190;
                                spaceShipRadius = 20;
                                MeteorxCoordinate = 400;
                                MeteoryCoordinate = 490;
                                speedMeteormovesRight = 1;
                                speedMeteormovesUp = 1;
                                meteorRadius = 10;
                                score = 0;
                                greenRockcoordinates();
                        }
        
                    function spaceShipboundaryCross(){
                                if (SpaceshipxCoordinate < 20) {
                                        SpaceshipxCoordinate = canvas.width - 30;
                                    } else if (SpaceshipxCoordinate > 670) {
                                        SpaceshipxCoordinate = 40;
                                    }
                                    
                                    if (SpaceshipyCoordinate < 25) {
                                        SpaceshipyCoordinate = 470;
                                    } else if (SpaceshipyCoordinate > 475) {
                                        SpaceshipyCoordinate = 26;
                                    }
                        }
        
                    function greenRockcoordinates(){ 
                            rock = {
                              x: Math.floor(Math.random() * 600),
                              y: Math.floor(Math.random() * 400)
                            }}
        
                    greenRockcoordinates();
        
                    function createGreenrock () {
                    
                              ctx.fillStyle = 'green';
                              ctx.fillRect(rock.x, rock.y, 20, 20);
                        }
        
        
                    function collectRock() {
                            if(SpaceshipxCoordinate+20 > rock.x && SpaceshipxCoordinate < rock.x+20*1.5 && 
                            SpaceshipyCoordinate > rock.y && SpaceshipyCoordinate < rock.y+20*1.8 )
                            {
                            greenRockcoordinates();
                            createGreenrock();
                            score++;
                            }           
                        }
        
        
                    function drawScore() {
                            ctx.font = "16px Arial";
                            ctx.fillStyle = "Red";
                            ctx.fillText("Score: "+score, 310, 20);
                         }
        
        
        
                    function createMeteor() {
                            ctx.beginPath();
                            ctx.arc(MeteorxCoordinate, MeteoryCoordinate, meteorRadius, 0, Math.PI*2);
                            ctx.fillStyle = "Red";
                            ctx.fill();
                            ctx.closePath();
                        
                            MeteorxCoordinate += speedMeteormovesRight;
                            MeteoryCoordinate -= speedMeteormovesUp;
                        }
        
                    function meteorBoundarycross(){
                                if (MeteorxCoordinate < 0 - meteorRadius) {
                                    MeteorxCoordinate = canvas.width + meteorRadius;
                                } else if (MeteorxCoordinate > canvas.width + meteorRadius) {
                                    MeteorxCoordinate = 0 - meteorRadius;
                                }
                                if (MeteoryCoordinate < 0 - meteorRadius) {
                                    MeteoryCoordinate = canvas.height + meteorRadius;
                                } else if (MeteoryCoordinate > canvas.height + meteorRadius) {
                                    MeteoryCoordinate = 0 - meteorRadius;
                                }
                        }
        
                    function meteorCrashSpaceship() {
                                if( 
                                SpaceshipxCoordinate+10 > MeteorxCoordinate && 
                                SpaceshipxCoordinate+10 < MeteorxCoordinate+20*1.5 && 
                                SpaceshipyCoordinate > MeteoryCoordinate && 
                                SpaceshipyCoordinate < MeteoryCoordinate+20*1.8)
                                {
                                    
                                    alert("Game Over! Score is " + score);
                                    reset();
                                    mainFunction();
                        }
                    }
        
        
                    function mainFunction() {
                                ctx.fillStyle = "black";
                                ctx.fillRect(0, 0, canvas.width, canvas.height); 
                                drawScore();
                                createSpaceship();
                                createMeteor();
                                spaceShipboundaryCross();
                                meteorBoundarycross();
                                createGreenrock();
                                collectRock();
                                meteorCrashSpaceship();
                                }
        
                
        
                    setInterval(function(){ mainFunction(); }, 10);
        
        
        
                    addEventListener("keydown", function(){
                            if (event.keyCode === 37) { 
                               SpaceshipxCoordinate -= speed;}
                            });
                                //up
                    addEventListener("keydown", function(){
                            if (event.keyCode === 38) {
                               SpaceshipyCoordinate -= speed; }
                            });
                            //right
                    addEventListener("keydown", function(){
                            if (event.keyCode === 39) { 
                                SpaceshipxCoordinate += speed;}
                            });
                                //down
                    addEventListener("keydown", function(){
                            if (event.keyCode === 40) {
                                SpaceshipyCoordinate += speed; }
                            });
        
        </script>
        
        <br>
        (Use Left/Right/Up/Down arrow keys to play)
        <br>
        
        </body>
        </html>