Mario Lesson

Player First

%%html
<style>
    #canvas {
        margin: 0;
        border: 1px solid black;
    }
</style>
<canvas id="canvas"></canvas>
<script>
    let canvas = document.getElementById('canvas');
    let c = canvas.getContext('2d');
    canvas.width = 770;
    canvas.height = 300;

    let gravity = 1.5;

    class Player {
        constructor() {
            this.position = {
                x: 100,
                y: 100
            };
            this.velocity = {
                x: 0,
                y: 0
            };
            this.width = 30;
            this.height = 30;
        }

        draw() {
            c.fillStyle = 'red';
            c.fillRect(this.position.x, this.position.y, this.width, this.height);
        }

        update() {
            this.draw();
            this.position.y += this.velocity.y;
            this.position.x += this.velocity.x;

            if (this.position.y + this.height + this.velocity.y <= canvas.height)
                this.velocity.y += gravity;
            else 
                this.velocity.y = 0;
        }
    }

    player = new Player();
    let keys = {
        right: {
            pressed: false
        },
        left: {
            pressed: false
        }
    };

    function animate() {
        requestAnimationFrame(animate);
        c.clearRect(0, 0, canvas.width, canvas.height);
        player.update();

        if (keys.right.pressed) {
            player.velocity.x = 15;
        } else if (keys.left.pressed) {
            player.velocity.x = -15;
        } else {
            player.velocity.x = 0;
        }
    }

    animate();

    addEventListener('keydown', ({ keyCode }) => {
        switch (keyCode) {
            case 65:
                console.log('left');
                keys.left.pressed = true;
                break;
            case 83:
                console.log('down');
                break;
            case 68:
                console.log('right');
                keys.right.pressed = true;
                break;
            case 87:
                console.log('up');
                player.velocity.y -= 20;
                break;
        }
    });

    addEventListener('keyup', ({ keyCode }) => {
        switch (keyCode) {
            case 65:
                console.log('left');
                keys.left.pressed = false;
                break;
            case 83:
                console.log('down');
                break;
            case 68:
                console.log('right');
                keys.right.pressed = false;
                break;
            case 87:
                console.log('up');
                player.velocity.y = -20;
                break;
        }
    });
</script>

Player &&& Platform

%%html
<style>
    #canvas1 {
        margin: 0;
        border: 1px solid black;
    }
</style>
<canvas id="canvas1"></canvas>
<script>
    canvas = document.getElementById('canvas1');
    c = document.getElementById('canvas1').getContext('2d');
    canvas.width = 770;
    canvas.height = 300;
    player1 = new Player()
    class Platform {
        constructor(image) {
            this.position = {
                x: 0,
                y: 200
            }
            this.image = image;
            this.width = 540;
            this.height = 160;
        }
        draw() {
            c.drawImage(this.image, this.position.x, this.position.y);
        }
    }

    let image = new Image();
        let platform = new Platform(image);
        keys = {
            right: {
                pressed: false
            },
            left: {
                pressed: false
            }
        };

        function animate1() {
            requestAnimationFrame(animate1);
            c.clearRect(0, 0, canvas.width, canvas.height);
            
            platform.draw();
            player1.update();
            
            if (keys.right.pressed) {
                player1.velocity.x = 5;
            } else if (keys.left.pressed) {
                player1.velocity.x = -5;
            } else {
                player1.velocity.x = 0;
            }
            if (
                player1.position.y + player1.height <= platform.position.y &&
                player1.position.y + player1.height + player1.velocity.y > platform.position.y &&
                player1.position.x + player1.width >= platform.position.x &&
                player1.position.x <= platform.position.x + platform.width
            ) {
                player1.velocity.y = 0;
            }
        }

        animate1();

        addEventListener('keydown', ({ keyCode }) => {
            switch (keyCode) {
                case 65:
                    console.log('left');
                    keys.left.pressed = true;
                    break;
                case 83:
                    console.log('down');
                    break;
                case 68:
                    console.log('right');
                    keys.right.pressed = true;
                    break;
                case 87:
                    console.log('up');
                    player1.velocity.y = -20;
                    break;
            }
        });

        addEventListener('keyup', ({ keyCode }) => {
            switch (keyCode) {
                case 65:
                    console.log('left');
                    keys.left.pressed = false;
                    break;
                case 83:
                    console.log('down');
                    break;
                case 68:
                    console.log('right');
                    keys.right.pressed = false;
                    break;
                case 87:
                    console.log('up');
                    player1.velocity.y = -20;
                    break;
            }
        })

    image.src = 'https://samayass.github.io/samayaCSA/images/platform.png';

</script>

Tube

%%html
<style>
    #canvas2 {
        margin: 0;
        border: 1px solid black;
    }
</style>
<canvas id="canvas2"></canvas>
<script>
    canvas = document.getElementById('canvas2');
    c = document.getElementById('canvas2').getContext('2d');
    canvas.width = 770;
    canvas.height = 300;
    let player2 = new Player()
    class Tube {
        constructor(image) {
            this.position = {
                x: 50,
                y: 150
            }
            this.image = image;
            this.width = 20;
            this.height = 40;
        }
        draw() {
            c.drawImage(this.image, this.position.x, this.position.y);
        }
    }

    let imagePlat = new Image();
    let imageTube = new Image();

        let platform2 = new Platform(imagePlat)
        let tube = new Tube(imageTube);
        keys = {
            right: {
                pressed: false
            },
            left: {
                pressed: false
            }
        };

        function animate2() {
            requestAnimationFrame(animate2);
            c.clearRect(0, 0, canvas.width, canvas.height);
            
            platform2.draw();
            tube.draw();
            player2.update();
            
            if (keys.right.pressed) {
                player2.velocity.x = 5;
            } else if (keys.left.pressed) {
                player2.velocity.x = -5;
            } else {
                player2.velocity.x = 0;
            }
            if (
                player2.position.y + player2.height <= platform2.position.y &&
                player2.position.y + player2.height + player2.velocity.y > platform2.position.y &&
                player2.position.x + player2.width >= platform2.position.x &&
                player2.position.x <= platform2.position.x + platform2.width
            ) {
                player2.velocity.y = 0;
            }
        }

        animate2();

        addEventListener('keydown', ({ keyCode }) => {
            switch (keyCode) {
                case 65:
                    console.log('left');
                    keys.left.pressed = true;
                    break;
                case 83:
                    console.log('down');
                    break;
                case 68:
                    console.log('right');
                    keys.right.pressed = true;
                    break;
                case 87:
                    console.log('up');
                    player2.velocity.y = -20;
                    break;
            }
        });

        addEventListener('keyup', ({ keyCode }) => {
            switch (keyCode) {
                case 65:
                    console.log('left');
                    keys.left.pressed = false;
                    break;
                case 83:
                    console.log('down');
                    break;
                case 68:
                    console.log('right');
                    keys.right.pressed = false;
                    break;
                case 87:
                    console.log('up');
                    player2.velocity.y = -20;
                    break;
            }
        })

    imagePlat.src = 'https://samayass.github.io/samayaCSA/images/platform.png'
    imageTube.src = 'https://samayass.github.io/samayaCSA/images/tube.png'

</script>