• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Game with inventory javascript

Explorer ,
Aug 03, 2023 Aug 03, 2023

Copy link to clipboard

Copied

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...

Views

746

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 13, 2023 Aug 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

...

Votes

Translate

Translate
Community Expert ,
Aug 03, 2023 Aug 03, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 03, 2023 Aug 03, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 12, 2023 Aug 12, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2023 Aug 12, 2023

Copy link to clipboard

Copied

@Jessicorrea 

 

you can google that to find something suitable for you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 13, 2023 Aug 13, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 14, 2023 Aug 14, 2023

Copy link to clipboard

Copied

Amazing! Thanks a lot!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 14, 2023 Aug 14, 2023

Copy link to clipboard

Copied

Nice! You're welcome!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 13, 2024 Jan 13, 2024

Copy link to clipboard

Copied

LATEST

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines