Introduction to Game Development

<canvas>

Canvas Basics

Canvas Animation

Animation - Draw/Update

Animation - Draw/Update #2

Animation - Draw/Update #3

canvas.width = 500;
    canvas.height = 400;

let box = {
        x     : 0,
        y     : 20,
        w     : 100,
        h     : 100,
        xdir  : 1,
        ydir  : 0,
        speed : 5
    };

const boxMethods = {
        draw   : box => {
            ctx.fillStyle = 'blue';
            ctx.fillRect(box.x, box.y, box.w, box.h);
        },
        update : box => {
            box.x += box.xdir * box.speed;
            box.y += box.ydir * box.speed;

if(box.x + box.w >= canvas.width)
                box.xdir = -1;
            else if(box.x <= 0)
                box.xdir = 1;
        }
    };

const draw = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        boxMethods.draw(box);
    };

const update = () => {
        boxMethods.update(box);
    };

const loop = () => {
        draw();
        update();
        requestAnimationFrame(loop);
    };
    loop();
</script>

Canvas - Events

canvas.width = 500;
    canvas.height = 400;

let box = {
        x     : 0,
        y     : 20,
        w     : 100,
        h     : 100,
        xdir  : 0,
        ydir  : 0,
        speed : 5
    };

const draw = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        boxMethods.draw(box);
    };

const update = () => {
        boxMethods.update(box);
    };

const loop = () => {
        draw();
        update();
        requestAnimationFrame(loop);
    };
    loop();

const leftKey = 37,
        upKey = 38,
        rightKey = 39,
        downKey = 40;

Canvas Image

canvas.width = 900;
    canvas.height = 700;

const backImg = new Image();
    backImg.src = '../img/game/background.jpg';

const heroImg = new Image();
    heroImg.src = '../img/game/hero.png';

let box = {
        x     : 20,
        y     : 430,
        w     : 140,
        h     : 200,
        xdir  : 0,
        ydir  : 0,
        speed : 5
    };

const draw = () => {
        ctx.drawImage(backImg, 0, 0, canvas.width, canvas.height);
        boxMethods.draw(box);
    };

const update = () => {
        boxMethods.update(box);
    };

const loop = () => {
        draw();
        update();
        requestAnimationFrame(loop);
    };
    loop();

const leftKey = 37,
        upKey = 38,
        rightKey = 39,
        downKey = 40;

Game - Shooting

canvas.width = 900;
    canvas.height = 700;

const backImg = new Image();
    backImg.src = '../img/game/background.jpg';

const heroImg = new Image();
    heroImg.src = '../img/game/hero.png';

const ninjaStarImg = new Image();
    ninjaStarImg.src = '../img/game/star.png';

const createHero = () => {
        return {
            x     : 20,
            y     : 430,
            w     : 140,
            h     : 200,
            xdir  : 0,
            ydir  : 0,
            speed : 5
        };
    };

const createStar = (x, y) => {
        return {
            x     : x,
            y     : y,
            w     : 40,
            h     : 40,
            xdir  : 1,
            ydir  : 0,
            speed : 10
        };
    };

let gameData = {
        hero      : createHero(),
        heroStars : []
    };

const game = {
        drawHero   : hero => {
            ctx.drawImage(heroImg, hero.x, hero.y, hero.w, hero.h);
        },
        updateHero : hero => {
            hero.x += hero.xdir * hero.speed;
            hero.y += hero.ydir * hero.speed;
        },

drawStar   : star => {
            ctx.drawImage(ninjaStarImg, star.x, star.y, star.w, star.h);
        },
        updateStar : star => {
            star.x += star.xdir * star.speed;
            star.y += star.ydir * star.speed;

if(star.x > canvas.width)
                star.deleteme = true;
        }
    };

const draw = () => {
        ctx.drawImage(backImg, 0, 0, canvas.width, canvas.height);
        game.drawHero(gameData.hero);

gameData.heroStars.forEach(star => {
            game.drawStar(star);
        });
    };

const update = () => {
        game.updateHero(gameData.hero);

gameData.heroStars.forEach(star => {
            game.updateStar(star);
        });

// remove stale objects
        gameData.heroStars = gameData.heroStars.filter(star => !star.deleteme);
    };

const loop = () => {
        draw();
        update();
        requestAnimationFrame(loop);
    };
    loop();

const leftKey = 37,
        upKey = 38,
        rightKey = 39,
        downKey = 40,
        spaceKey = 32;

Game - Shooting Villains

canvas.width = 900;
    canvas.height = 700;

const backImg = new Image();
    backImg.src = '../img/game/background.jpg';

const heroImg = new Image();
    heroImg.src = '../img/game/hero.png';

const ninjaStarImg = new Image();
    ninjaStarImg.src = '../img/game/star.png';

const villainImg = new Image();
    villainImg.src = '../img/game/villain.png';

const createHero = () => {
        return {
            x     : 20,
            y     : 430,
            w     : 140,
            h     : 200,
            xdir  : 0,
            ydir  : 0,
            speed : 5
        };
    };

const createStar = (x, y) => {
        return {
            x     : x,
            y     : y,
            w     : 40,
            h     : 40,
            xdir  : 1,
            ydir  : 0,
            speed : 10
        };
    };

const createVillain = x => {
        return {
            x     : x,
            y     : 430,
            w     : 140,
            h     : 200,
            xdir  : 0,
            ydir  : 0,
            speed : 5
        };
    };

let gameData = {
        hero      : createHero(),
        heroStars : [],
        villains  : [createVillain(600), createVillain(400)]
    };

const game = {
        drawHero   : hero => {
            ctx.drawImage(heroImg, hero.x, hero.y, hero.w, hero.h);
        },
        updateHero : hero => {
            hero.x += hero.xdir * hero.speed;
            hero.y += hero.ydir * hero.speed;
        },

drawStar   : star => {
            ctx.drawImage(ninjaStarImg, star.x, star.y, star.w, star.h);
        },
        updateStar : star => {
            star.x += star.xdir * star.speed;
            star.y += star.ydir * star.speed;

if(star.x > canvas.width)
                star.deleteme = true;
        },

drawVillain   : villain => {
            ctx.drawImage(villainImg, villain.x, villain.y, villain.w, villain.h);
        },
        updateVillain : villain => {
            villain.x += villain.xdir * villain.speed;
            villain.y += villain.ydir * villain.speed;
        }
    };

const draw = () => {
        ctx.drawImage(backImg, 0, 0, canvas.width, canvas.height);
        game.drawHero(gameData.hero);

gameData.heroStars.forEach(star => {
            game.drawStar(star);
        });

gameData.villains.forEach(villain => {
            game.drawVillain(villain);
        });
    };

const intersect = (rect1, rect2) => {
        const x = Math.max(rect1.x, rect2.x),
            num1 = Math.min(rect1.x + rect1.w, rect2.x + rect2.w),
            y = Math.max(rect1.y, rect2.y),
            num2 = Math.min(rect1.y + rect1.h, rect2.y + rect2.h);
        return (num1 >= x && num2 >= y);
    };

const update = () => {
        game.updateHero(gameData.hero);

gameData.heroStars.forEach(star => {
            game.updateStar(star);
        });

gameData.villains.forEach(villain => {
            game.updateVillain(villain);
        });

gameData.heroStars.forEach(star => {
            gameData.villains.forEach(villain => {
                if(intersect(star, villain)) {
                    star.deleteme = true;
                    villain.deleteme = true;
                }
            });
        });

// remove deleted objects
        gameData.heroStars = gameData.heroStars.filter(star => !star.deleteme);
        gameData.villains = gameData.villains.filter(villain => !villain.deleteme);
    };

const loop = () => {
        draw();
        update();
        requestAnimationFrame(loop);
    };
    loop();

const leftKey = 37,
        upKey = 38,
        rightKey = 39,
        downKey = 40,
        spaceKey = 32;

Game - Sound

canvas.width = 900;
    canvas.height = 700;

// images

const backImg = new Image();
    backImg.src = '../img/game/background.jpg';

const heroImg = new Image();
    heroImg.src = '../img/game/hero.png';

const ninjaStarImg = new Image();
    ninjaStarImg.src = '../img/game/star.png';

const villainImg = new Image();
    villainImg.src = '../img/game/villain.png';

// sounds

const deathSound = new Audio('../audio/death.mp3');
    const starSound = new Audio('../audio/gun-sound.mp3');