Triple Builder (3-Match Puzzle Game)

Showcase
1

hi.

i made a simple puzzle game using three.js.

this game inspired by triple town.

the game can be played at itch.io( TripleBuilder by Ozymandiaz )

thank you to three.js. and thank you for this forum.

best regards.

source code is here:

puzzlegame01

puzzlegame02

5 Likes
2

hello, well done for this work, I want to know how you can make the shadow of your model and when you click it will be placed on the scene , i need a help because i am begginner in three js

4

i think the best way is to analyze the shadow example of three.js (three.js examples).

but, in my opinion that the shadow of three.js is related to the shadow camera, the size of the shadow map texture, and the size of the scene using the shadow.

I think a good quality shadow can be seen only when the size and shadow setting of the scene containing shadow objects match well.

you can get the source code for the this game above here at (GitHub - Ozymandias1/triplebuilder).

and the way i handled the shadow map in this game is as below.

  1. Enable shadow setting in WebGLRenderer (core.ts)
  2. Shadow camera and shadow map size setup in directionallight.(core.ts)
  • my scene has hemispherelight and directionallight, but I only applied directionallight for shadow setting.
  1. Apply loaded objects to shadow (model.ts)

I hope it was helpful.

best regards.

5

Thank you very much for your answer :heart:, I have another question , when I put the cursors on the grid the model will be appears but with low opacity and when I click on a specific location it will be placed, I want to know how I can do it , i will be happy if you help me thank u again :heart_eyes:

6

i created and used a preview-only object(named by ‘cursor’ in gamelogic.ts) to see which model will be placed when the player clicks the mouse.

the preview object cloned the geometry and material of the object to be placed(source object) to set the transparent of the material to true, set the opacity to 0.5, and then picking the grounds in the mouse movement event to apply its position value to the preview object.

in this state, when the player invokes a mouse button-up event, it creates and places the original object in the scene, performs a memory release of the cursor object, and then creates a new cursor object.

how to handle this process in this game, follow this steps:

  1. Select a random object to create, clone to a preview object (transparent)
  2. Set the position through the picking or some formular of the preview object in the mouse movement event.
  3. If a mouse-up event is triggered,
    3-1. Create a source object by the preview object and apply the location of the preview object to the source object.
    3-2. dispose resources in current preview object
    3-3. Repeat from step 1.

i don’t know if the meaning will be conveyed well by using a translator, but I hope it was helpful.

7

thank u a lot <3