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...
Hi again.
Sorry for missing your answer.
Here are some references:
- Basic AS3 to HTML5 reference: https://helpx.adobe.com/
- LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.
- Pluralsight also have some great video courses: https://www.
- General tips and tricks in the comment that starts with "Excellent!";
- Official demos developed by the CreateJS team: https://github.com/
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
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
Copy link to clipboard
Copied
Alguém indica algum curso de JavaScript para ser usado no animate cc?
Copy link to clipboard
Copied
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/
- LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.
- Pluralsight also have some great video courses: https://www.
- General tips and tricks in the comment that starts with "Excellent!";
- Official demos developed by the CreateJS team: https://github.com/
- Other samples from the CreateJS official account on GitHub: https://github.com/
- CreateJS official samples on CodePen: https://codepen.io/
- CreateJS blog: http://blog.createjs.
- Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.
- This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.
- 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
Copy link to clipboard
Copied
Amazing! Thanks a lot!
Copy link to clipboard
Copied
Nice! You're welcome!
Copy link to clipboard
Copied
Create the basic HTML structure with a canvas element to render your game.
<!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>
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.