cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5 Canvas Pokemon Game</title>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="canvas.pokemon.js"></script>

</head>
<body>
    <canvas id="canvas" width="460" height="460"></canvas>
</body>
</html>
            
          
!
            
              /**
 * Pokemon HTML5 canvas game
 * @version 1.0.0
 * @author Panagiotis Vourtsis <vourtsis_pan@hotmail.com>
 */
window.onload = function() {
    "use strict";

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var w = document.getElementById("canvas").offsetWidth;
    var h = document.getElementById("canvas").offsetHeight;
    var terrainImageLoaded = false, houseImageLoaded = false, pokeballImageLoaded = false, playerImageLoaded = false;
    var objectSizes = 20;
    var speed = 100;
    var modifier = 100;
    var score = 0;

    //terrain image
    var terrainImage = new Image();
    terrainImage.onload = function () {
        terrainImageLoaded = true;
        assetsLoaded();
    };
    terrainImage.src = "images/pokemon_terrain.jpg";

    //house image
    var houseImage = new Image();
    houseImage.onload = function () {
        houseImageLoaded = true;
        assetsLoaded();
    };
    houseImage.src = "images/house.png";

    //main sound
    var mainTheme = new Audio("sounds/main-theme.mp3");
    mainTheme.loop = true;
    mainTheme.volume = 0.5;
    mainTheme.play();

    //pokeball-selection
    var pokePick = new Audio("sounds/pickup.mp3");
    pokePick.volume = 0.8;

    //player image
    var playerImage = new Image();
    playerImage.onload = function () {
        pokeballImageLoaded = true;
        assetsLoaded();
    };
    playerImage.src = "images/player.png";

    //pokeball image
    var pokeballImage = new Image();
    pokeballImage.onload = function () {
        playerImageLoaded = true;
        assetsLoaded();
    };
    pokeballImage.src = "images/pokeball.png";

    /**
     * It will hold all the pockeball data like x and y axis position
     * sprite position and item distance is for determine which item is selected from the sprite - @todo future use for knowing on score which one player picked
     * Also hold the generate position function that generates random positions if there is no collision.
     * @Object
     * @name pokeball
     */
    var pokeball = {
        x: 0,
        y: 0,
        spritePosition: 0,
        spriteItemDistance: 33
    };
    pokeball.generatePosition = function() {
        do {
            pokeball.x = Math.floor(Math.random() * 20) + 1;
            pokeball.y = Math.floor(Math.random() * 16) + 4;
        } while(check_collision(pokeball.x, pokeball.y));

        pokeball.spritePosition = Math.floor(Math.random() * 4) + 0;// get position from 0-4
    };

    /**
     * Holds all the player's info like x and y axis position, his current direction (facing).
     * I have also incuded an object to hold the sprite position of each movement so i can call them
     * I also included the move function in order to move the player - all the functionality for the movement is in there
     * @Object
     * @name pokeball
     */
    var player = {
        x: Math.round((w/2)/objectSizes),
        y: Math.round((h/2)/objectSizes),
        currentDirection: "stand",
        direction: {
            "stand" : {
                x: 0,
                y: 0
            },
            "down-1" : {
                x: 17,
                y: 0
            },
            "down-2" : {
                x: 34,
                y: 0
            },
            "up-1" : {
                x: 125,
                y: 0
            },
            "up-2" : {
                x: 142,
                y: 0
            },
            "left-1" : {
                x: 69,
                y: 0
            },
            "left-2" : {
                x: 87,
                y: 0
            },
            "right-1" : {
                x: 160,
                y: 0
            },
            "right-2" : {
                x: 178,
                y: 0
            }
        }
    };
    player.move = function(direction) {

        /**
         * A temporary object to hold the current x, y so if there is a collision with the new coordinates to fallback here
         */
        var hold_player = {
            x: player.x,
            y: player.y
        };

        /**
         * Decide here the direction of the user and do the neccessary changes on the directions
         */
        switch(direction) {
            case "left":
                player.x -= speed / modifier;
                if(player.currentDirection == "stand") {
                    player.currentDirection = "left-1";
                } else if(player.currentDirection == "left-1") {
                    player.currentDirection = "left-2";
                } else if(player.currentDirection == "left-2") {
                    player.currentDirection = "left-1";
                } else {
                    player.currentDirection = "left-1";
                }
                break;
            case "right":
                player.x += speed / modifier;
                if(player.currentDirection == "stand") {
                    player.currentDirection = "right-1";
                } else if(player.currentDirection == "right-1") {
                    player.currentDirection = "right-2";
                } else if(player.currentDirection == "right-2") {
                    player.currentDirection = "right-1";
                } else {
                    player.currentDirection = "right-1";
                }
                break;
            case "up":
                player.y -= speed / modifier;

                if(player.currentDirection == "stand") {
                    player.currentDirection = "up-1";
                } else if(player.currentDirection == "up-1") {
                    player.currentDirection = "up-2";
                } else if(player.currentDirection == "up-2") {
                    player.currentDirection = "up-1";
                } else {
                    player.currentDirection = "up-1";
                }

                break;
            case "down":
                player.y += speed / modifier;

                if(player.currentDirection == "stand") {
                    player.currentDirection = "down-1";
                } else if(player.currentDirection == "down-1") {
                    player.currentDirection = "down-2";
                } else if(player.currentDirection == "down-2") {
                    player.currentDirection = "down-1";
                } else {
                    player.currentDirection = "down-1";
                }

                break;
        }

        /**
         * if there is a collision just fallback to the temp object i build before while not change back the direction so we can have a movement
         */
        if(check_collision(player.x, player.y)) {
            player.x = hold_player.x;
            player.y = hold_player.y;
        }

        /**
         * If player finds the coordinates of pokeball the generate new one, play the sound and update the score
         */
        if(player.x == pokeball.x && player.y == pokeball.y) { // found a pokeball !! create a new one
            console.log("found a pokeball of "+pokeball.spritePosition+"! Bravo! ");
            pokePick.pause();
            pokePick.currentTime = 0;
            pokePick.play();
            score += 1;
            pokeball.generatePosition();
        }

        update();
    };

    /**
     * Handle all the updates of the canvas and creates the objects
     * @function
     * @name update
     */
    function update() {
        ctx.drawImage(terrainImage, 0, 0);
        ctx.drawImage(houseImage, 80, 60);

        //Genboard
        board();

        //pokeball
        ctx.drawImage(pokeballImage, pokeball.spritePosition*pokeball.spriteItemDistance, 0, objectSizes, objectSizes, pokeball.x * objectSizes, pokeball.y * objectSizes, objectSizes, objectSizes);

        //player
        console.log("y:",(player.y * objectSizes)/objectSizes);
        console.log("x",(player.x * objectSizes)/objectSizes);
        ctx.drawImage(playerImage, player.direction[player.currentDirection].x, player.direction[player.currentDirection].y, objectSizes-2, objectSizes, player.x * objectSizes, player.y * objectSizes, objectSizes, objectSizes);
    }

    /**
     * Our function that decides if there is a collision on the objects or not
     * @function
     * @name check_collision
     * @param {Integer} x - The x axis
     * @param {Integer} y - The y axis
     */
    function check_collision(x, y) {
        var foundCollision = false;

        if(((x > 3 && x < 9) && y == 6) || ((x > 4 && x < 9) && (y == 5 || y == 4 || y == 3))) { //collision on house
            console.log("on house");
            foundCollision = true;
        }

        if((x<1 || x>20) ||
            (y<2 || y>20) ||
            ((y > 0 && y < 4) && (x == 20 || x == 19)) || //right corner
            ((y > 0 && y < 4) && (x == 2 || x == 3)) || //left corner
            ((y > 18) && (x == 2 || x == 3)) || //left corner
            ((x > 17) && (y == 19 || y == 20)) || //left corner
            ((x > 19) && (y == 17 || y == 18)) //left corner 2
        ) {
            console.log("lost on the woods");
            foundCollision = true
        }

        return foundCollision;
    }

    /**
     * Here we are creating our board on the bottom right with our score
     * @todo maybe some mute button for the future?
     * @function
     * @name board
     */
    function board() {
        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
        ctx.fillRect(w-100, h-70, 100, 70);

        ctx.font = "18px Arial";
        ctx.fillStyle = "rgba(255, 255, 255, 1)";
        ctx.fillText("You Found",w-93, h-45);

        ctx.font = "14px Arial";
        ctx.fillStyle = "rgba(255, 255, 255, 1)";
        ctx.fillText(score + " poketballs",w-85, h-25);
    }

    /**
     * Decide here if all the assets are ready to start updating
     * @function
     * @name assetsLoaded
     */
    function assetsLoaded() {
        if(terrainImageLoaded == true && houseImageLoaded == true && pokeballImageLoaded == true && playerImageLoaded == true) {
            pokeball.generatePosition();
            update();
        }
    }

    /**
     * Assign of the arrow keys to call the player move
     */
    document.onkeydown = function(e) {
        e = e || window.event;

        if(e.keyCode == "37") player.move("left");
        else if(e.keyCode == "38") player.move("up");
        else if(e.keyCode == "39") player.move("right");
        else if(e.keyCode == "40") player.move("down");
    };
};
            
          
!
            
              /**
 * Pokemon HTML5 canvas game
 * @version 1.0.0
 * @author Panagiotis Vourtsis <vourtsis_pan@hotmail.com>
 */
window.onload = function() {
  "use strict";

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var w = document.getElementById("canvas").offsetWidth;
  var h = document.getElementById("canvas").offsetHeight;
  var terrainImageLoaded = false,
    houseImageLoaded = false,
    pokeballImageLoaded = false,
    playerImageLoaded = false;
  var objectSizes = 20;
  var speed = 100;
  var modifier = 100;
  var score = 0;

  //terrain image
  var terrainImage = new Image();
  terrainImage.onload = function() {
    terrainImageLoaded = true;
    assetsLoaded();
  };
  terrainImage.src = "https://www.dropbox.com/s/5e38o3e5mwej7gi/pokemon_terrain.jpg?raw=1";

  //house image
  var houseImage = new Image();
  houseImage.onload = function() {
    houseImageLoaded = true;
    assetsLoaded();
  };
  houseImage.src = "https://www.dropbox.com/s/uagq684b5jbh5t5/house.png?raw=1";

  //main sound
  var mainTheme = new Audio("https://www.dropbox.com/s/uru3oz9mxzpt5gx/main-theme.mp3?raw=1");
  mainTheme.loop = true;
  mainTheme.volume = 0.5;
  mainTheme.play();

  //pokeball-selection
  var pokePick = new Audio("https://www.dropbox.com/s/weemcqn1wlxelll/pickup.mp3?raw=1");
  pokePick.volume = 0.8;

  //player image
  var playerImage = new Image();
  playerImage.onload = function() {
    pokeballImageLoaded = true;
    assetsLoaded();
  };
  playerImage.src = "https://www.dropbox.com/s/wm91kb7t7j76d0d/player.png?raw=1";

  //pokeball image
  var pokeballImage = new Image();
  pokeballImage.onload = function() {
    playerImageLoaded = true;
    assetsLoaded();
  };
  pokeballImage.src = "https://www.dropbox.com/s/biqj124larffqk9/pokeball.png?raw=1";

  /**
   * It will hold all the pockeball data like x and y axis position
   * sprite position and item distance is for determine which item is selected from the sprite - @todo future use for knowing on score which one player picked
   * Also hold the generate position function that generates random positions if there is no collision.
   * @Object
   * @name pokeball
   */
  var pokeball = {
    x: 0,
    y: 0,
    spritePosition: 0,
    spriteItemDistance: 33
  };
  pokeball.generatePosition = function() {
    do {
      pokeball.x = Math.floor(Math.random() * 20) + 1;
      pokeball.y = Math.floor(Math.random() * 16) + 4;
    } while (check_collision(pokeball.x, pokeball.y));

    pokeball.spritePosition = Math.floor(Math.random() * 4) + 0; // get position from 0-4
  };

  /**
   * Holds all the player's info like x and y axis position, his current direction (facing).
   * I have also incuded an object to hold the sprite position of each movement so i can call them
   * I also included the move function in order to move the player - all the functionality for the movement is in there
   * @Object
   * @name pokeball
   */
  var player = {
    x: Math.round((w / 2) / objectSizes),
    y: Math.round((h / 2) / objectSizes),
    currentDirection: "stand",
    direction: {
      "stand": {
        x: 0,
        y: 0
      },
      "down-1": {
        x: 17,
        y: 0
      },
      "down-2": {
        x: 34,
        y: 0
      },
      "up-1": {
        x: 125,
        y: 0
      },
      "up-2": {
        x: 142,
        y: 0
      },
      "left-1": {
        x: 69,
        y: 0
      },
      "left-2": {
        x: 87,
        y: 0
      },
      "right-1": {
        x: 160,
        y: 0
      },
      "right-2": {
        x: 178,
        y: 0
      }
    }
  };
  player.move = function(direction) {

    /**
     * A temporary object to hold the current x, y so if there is a collision with the new coordinates to fallback here
     */
    var hold_player = {
      x: player.x,
      y: player.y
    };

    /**
     * Decide here the direction of the user and do the neccessary changes on the directions
     */
    switch (direction) {
      case "left":
        player.x -= speed / modifier;
        if (player.currentDirection == "stand") {
          player.currentDirection = "left-1";
        } else if (player.currentDirection == "left-1") {
          player.currentDirection = "left-2";
        } else if (player.currentDirection == "left-2") {
          player.currentDirection = "left-1";
        } else {
          player.currentDirection = "left-1";
        }
        break;
      case "right":
        player.x += speed / modifier;
        if (player.currentDirection == "stand") {
          player.currentDirection = "right-1";
        } else if (player.currentDirection == "right-1") {
          player.currentDirection = "right-2";
        } else if (player.currentDirection == "right-2") {
          player.currentDirection = "right-1";
        } else {
          player.currentDirection = "right-1";
        }
        break;
      case "up":
        player.y -= speed / modifier;

        if (player.currentDirection == "stand") {
          player.currentDirection = "up-1";
        } else if (player.currentDirection == "up-1") {
          player.currentDirection = "up-2";
        } else if (player.currentDirection == "up-2") {
          player.currentDirection = "up-1";
        } else {
          player.currentDirection = "up-1";
        }

        break;
      case "down":
        player.y += speed / modifier;

        if (player.currentDirection == "stand") {
          player.currentDirection = "down-1";
        } else if (player.currentDirection == "down-1") {
          player.currentDirection = "down-2";
        } else if (player.currentDirection == "down-2") {
          player.currentDirection = "down-1";
        } else {
          player.currentDirection = "down-1";
        }

        break;
    }

    /**
     * if there is a collision just fallback to the temp object i build before while not change back the direction so we can have a movement
     */
    if (check_collision(player.x, player.y)) {
      player.x = hold_player.x;
      player.y = hold_player.y;
    }

    /**
     * If player finds the coordinates of pokeball the generate new one, play the sound and update the score
     */
    if (player.x == pokeball.x && player.y == pokeball.y) { // found a pokeball !! create a new one
      console.log("found a pokeball of " + pokeball.spritePosition + "! Bravo! ");
      pokePick.pause();
      pokePick.currentTime = 0;
      pokePick.play();
      score += 1;
      pokeball.generatePosition();
    }

    update();
  };

  /**
   * Handle all the updates of the canvas and creates the objects
   * @function
   * @name update
   */
  function update() {
    ctx.drawImage(terrainImage, 0, 0);
    ctx.drawImage(houseImage, 80, 60);

    //Genboard
    board();

    //pokeball
    ctx.drawImage(pokeballImage, pokeball.spritePosition * pokeball.spriteItemDistance, 0, objectSizes, objectSizes, pokeball.x * objectSizes, pokeball.y * objectSizes, objectSizes, objectSizes);

    //player
    console.log("y:", (player.y * objectSizes) / objectSizes);
    console.log("x", (player.x * objectSizes) / objectSizes);
    ctx.drawImage(playerImage, player.direction[player.currentDirection].x, player.direction[player.currentDirection].y, objectSizes - 2, objectSizes, player.x * objectSizes, player.y * objectSizes, objectSizes, objectSizes);
  }

  /**
   * Our function that decides if there is a collision on the objects or not
   * @function
   * @name check_collision
   * @param {Integer} x - The x axis
   * @param {Integer} y - The y axis
   */
  function check_collision(x, y) {
    var foundCollision = false;

    if (((x > 3 && x < 9) && y == 6) || ((x > 4 && x < 9) && (y == 5 || y == 4 || y == 3))) { //collision on house
      console.log("on house");
      foundCollision = true;
    }

    if ((x < 1 || x > 20) ||
      (y < 2 || y > 20) ||
      ((y > 0 && y < 4) && (x == 20 || x == 19)) || //right corner
      ((y > 0 && y < 4) && (x == 2 || x == 3)) || //left corner
      ((y > 18) && (x == 2 || x == 3)) || //left corner
      ((x > 17) && (y == 19 || y == 20)) || //left corner
      ((x > 19) && (y == 17 || y == 18)) //left corner 2
    ) {
      console.log("lost on the woods");
      foundCollision = true
    }

    return foundCollision;
  }

  /**
   * Here we are creating our board on the bottom right with our score
   * @todo maybe some mute button for the future?
   * @function
   * @name board
   */
  function board() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
    ctx.fillRect(w - 100, h - 70, 100, 70);

    ctx.font = "18px Arial";
    ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.fillText("You Found", w - 93, h - 45);

    ctx.font = "14px Arial";
    ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.fillText(score + " poketballs", w - 85, h - 25);
  }

  /**
   * Decide here if all the assets are ready to start updating
   * @function
   * @name assetsLoaded
   */
  function assetsLoaded() {
    if (terrainImageLoaded == true && houseImageLoaded == true && pokeballImageLoaded == true && playerImageLoaded == true) {
      pokeball.generatePosition();
      update();
    }
  }

  /**
   * Assign of the arrow keys to call the player move
   */
  document.onkeydown = function(e) {
    e = e || window.event;

    if (e.keyCode == "37") player.move("left");
    else if (e.keyCode == "38") player.move("up");
    else if (e.keyCode == "39") player.move("right");
    else if (e.keyCode == "40") player.move("down");
  };
};
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console