Skip to main content
J
Jessicorrea
Known Participant
August 3, 2023
Answered

Game with inventory javascript

  • August 3, 2023
  • 4 replies
  • 1504 views

Is it possible to create a game that has inventory in html/canvas javascript?
I wanted to make a game like the ones where you have a room and the user chooses the furniture and colors to decorate it, but it would be with javascript...

      Correct answer JoãoCésar17023019

      Hi again.

       

      Sorry for missing your answer.

       

      Here are some references:

      - Basic AS3 to HTML5 reference: https://helpx.adobe.com/animate/kb/as-to-html5.html;

      - LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning;

      - Pluralsight also have some great video courses: https://www.pluralsight.com;

      - General tips and tricks in the comment that starts with "Excellent!";

      - Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

      - Other samples from the CreateJS official account on GitHub: https://github.com/CreateJS; 

      - CreateJS official samples on CodePen: https://codepen.io/createjs; 

      - CreateJS blog: http://blog.createjs.com; 

      - Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.net/user/lannymcnie/fiddles; 

      - This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.com/watch?v=QHudJJLRp-c; 

      - Adobe Animate's official YouTube channel;

      - Martin Melendez's YouTube channel;

      - My repo on GitHub that contains the source codes and files of some games, apps, and other stuff;

      - I also have a YouTube channel that you may find useful;

      - O'Reilly and Packt have lots of books about Flash, AS3, Animate, and so on, in paper or in a subscription fashion.

       

      I hope they help.

       

      Regards,

      JC

      4 replies

      B
      Betty341091642vdy
      Participating Frequently
      January 13, 2024

       

      Create the basic HTML structure with a canvas element to render your game.

       

      html

       

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Game Title</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="yourScript.js"></script>
</body>
</html>

       

       

      JavaScript (yourScript.js):

      Write the JavaScript code to handle the game logic, including the inventory system.

       

      // Get the canvas and 2d context
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Define your game objects
const room = {
    width: canvas.width,
    height: canvas.height,
    color: '#f0f0f0',
    furniture: [] // array to store placed furniture
};

const furnitureList = [
    { name: 'Chair', color: '#b87333', width: 50, height: 50 },
    { name: 'Table', color: '#a9a9a9', width: 100, height: 70 },
    // Add more furniture objects as needed
];

let selectedFurniture = null;

// Handle mouse click events
canvas.addEventListener('click', (event) => {
    const mouseX = event.clientX - canvas.getBoundingClientRect().left;
    const mouseY = event.clientY - canvas.getBoundingClientRect().top;

    // Check if a piece of furniture is clicked
    selectedFurniture = room.furniture.find(f => (
        mouseX >= f.x && mouseX <= f.x + f.width &&
        mouseY >= f.y && mouseY <= f.y + f.height
    ));

    // Handle other interactions or actions based on the selected furniture
    //https://tocaboca.app/how-do-you-get-a-house-in-toca-boca///
});

// Handle mouse move events to drag furniture
canvas.addEventListener('mousemove', (event) => {
    if (selectedFurniture) {
        selectedFurniture.x = event.clientX - canvas.getBoundingClientRect().left - selectedFurniture.width / 2;
        selectedFurniture.y = event.clientY - canvas.getBoundingClientRect().top - selectedFurniture.height / 2;
        // Redraw the canvas to update the furniture position
        draw();
    }
});

// Draw the room and furniture
function draw() {
    // Draw the room
    ctx.fillStyle = room.color;
    ctx.fillRect(0, 0, room.width, room.height);

    // Draw the furniture
    room.furniture.forEach(f => {
        ctx.fillStyle = f.color;
        ctx.fillRect(f.x, f.y, f.width, f.height);
    });

    // Draw other game elements as needed
}

// Initialize the game
function init() {
    // Add initial furniture to the room if needed
    // furnitureList.forEach(f => room.furniture.push({ ...f, x: 0, y: 0 }));

    // Draw the initial state
    draw();
}

// Start the game
init();

       

      This is a basic example to give you an idea of how you might structure your code. You can expand upon this foundation by adding more features, interactions, and additional game elements based on your requirements.

        JoãoCésar17023019
        Community Expert
        JoãoCésar17023019Community ExpertCorrect answer
        Community Expert
        August 13, 2023

        Hi again.

         

        Sorry for missing your answer.

         

        Here are some references:

        - Basic AS3 to HTML5 reference: https://helpx.adobe.com/animate/kb/as-to-html5.html;

        - LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning;

        - Pluralsight also have some great video courses: https://www.pluralsight.com;

        - General tips and tricks in the comment that starts with "Excellent!";

        - Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

        - Other samples from the CreateJS official account on GitHub: https://github.com/CreateJS; 

        - CreateJS official samples on CodePen: https://codepen.io/createjs; 

        - CreateJS blog: http://blog.createjs.com; 

        - Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.net/user/lannymcnie/fiddles; 

        - This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.com/watch?v=QHudJJLRp-c; 

        - Adobe Animate's official YouTube channel;

        - Martin Melendez's YouTube channel;

        - My repo on GitHub that contains the source codes and files of some games, apps, and other stuff;

        - I also have a YouTube channel that you may find useful;

        - O'Reilly and Packt have lots of books about Flash, AS3, Animate, and so on, in paper or in a subscription fashion.

         

        I hope they help.

         

        Regards,

        JC

          J
          JessicorreaAuthor
          Known Participant
          August 14, 2023

          Amazing! Thanks a lot!

            JoãoCésar17023019
            Community Expert
            JoãoCésar17023019Community Expert
            Community Expert
            August 14, 2023

            Nice! You're welcome!

            J
            JessicorreaAuthor
            Known Participant
            August 12, 2023

            Alguém indica algum curso de JavaScript para ser usado no animate cc?

            kglad
            Community Expert
            kgladCommunity Expert
            Community Expert
            August 12, 2023

            @Jessicorrea 

             

            you can google that to find something suitable for you.

            JoãoCésar17023019
            Community Expert
            JoãoCésar17023019Community Expert
            Community Expert
            August 3, 2023

            Hi.

             

            It's totally possible.

             

            In the HTML5 Canvas document, besides Animate's drawing, design, and animation capabilities, you have access to all that JavaScript has to offer. So pretty much everything can be achieved.

             

            With that being said, would mind providing more specific details of what you want to achieve so that we can help you better?

             

            Regards,

            JC

            J
            JessicorreaAuthor
            Known Participant
            August 4, 2023

            Thanks for answering!

                    I don't know javascript and I've been looking for tutorials that use this language in animate cc. I already understood a few things, like drag and drop and change color (just changing symbols, I wanted to see if there's another way with a color picker maybe). If I study javascript without animate cc, would I be able to use what I learned there?

                    I intend to use animate with javascript, and not actionscript, because it is to make the continuation of an existing game, made by a programmer, in that language. It's a quiz where the user earns coins for the right answer and spends it in the store with clothes for the character.

                    The idea is to grow this store, creating a room for the user to decorate, being able to choose the color of the walls, the type of bed, curtain, rug... and the character would have small interactions with the environment, being able to sit on the bed, kick a ball , pick up a book to read.. The game has a username and password, so it has to record the amount of money and the choices made in the store.

                    That's why I asked about the inventory, where the purchased items and purchase options should be. I also imagine clicking on the small item and it gets big and needs to be dragged to the correct area of it. Anyway, so many things to think about that I don't even know where to start.

                    We are in the phase of choosing the tool to use and I really liked animate cc. Can you recommend me courses for this part of javascript programming in this software? 

                    Se tiver cursos em português, melhor ainda 🙂

                    Regards,

                    Jéssica

              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices