DEV Community: Takane Ichinose

Mousiny

Takane Ichinose — Sat, 06 Apr 2024 14:46:55 +0000

Play Mousiny on itch.io

Mousiny

Description

Mousiny is the brave hero who explore the dungeon and defeat all the monsters in it.

This is just a simple and more like static turn based game (based on your luck).

To control this game, just tap anywhere (or into the certain menu you want to do) to do an action.

The main goal is to explore the dungeon, and go to the highest floor as you can.

You can't get inside the dungeon if you haven't bought anything. So do remember to buy your need before going. It's going to be dangerous!

There are 4 types of floors in the dungeon:

Monster (Boss monster every 5 floors)
Treasure
Healing Fountain
Nothing at all

There are 4 types of monsters, and 3 types of boss monsters. Normal monsters only have 1 life, but boss monsters have 3 lives. You may tap on the card to do an action.

Monsters:

Cockroach
Evil Mouse
Pigeon
Spider

Boss Monsters:

Cat
Owl
Snake

You can get 4 kinds of items you can get in the treasure:

100 coins
200 coins
500 coins
Cards

Healing fountain is where you can replenish all your health.

Of course if you can into the "nothing at all" floor, you can't get not fight anything.

Credits

Tools I used:

Construct 3
Aseprite
MuseScore
PICO-8 (For sound effects )

Screenshot

Play Mousiny on itch.io

#CodePenChallenge | Meowatar (Pure CSS avatar creator)

Takane Ichinose — Thu, 11 Jan 2024 17:22:13 +0000

Meowatar (Pure CSS avatar creator)

Description

This is avatar creation tool by just using CSS (Sass) and HTML (No JavaScript codes).

I made this possible by using CSS loop technique and taking advantage of :has() selector.

I intended to add dress, but it's not possible to do due to timeframe, so I decided not to include it. If it's only possible to add even just SVG, then I can make it (I guess).

I also made the UI responsive, so it should work in all devices.

Zombie Gun War PICO-8 Game

Takane Ichinose — Wed, 01 Mar 2023 07:40:38 +0000

https://takaneichinose.itch.io/zombie-gun-war

Zombie Gun War

Controls

Up arrow key: Move menu to above
Down arrow key: Move menu to below
Left arrow key: Move left
Right arrow key: Move right
Z: The 'O' button (Select from menu, or shoot fireball)

Description

Test your reflexes with this game! Fight with the computer, shoot your fire ball, or dodge the computer's fire ball. Anyway, just try to win against the computer.

The rule of this game is simple. You may just move left, or right, then shoot fireball with 'z' key or 'O' button.

I created this game using PICO-8. A fantasy console inspired the game console in the 80s.

There are 3 difficulties in this game

Easy: The computer will shoot fireball randomly.
Medium: The dodge threshold and move response is higher.
Hard: The dodge threshold and move response is much higher.

PICO-8 Game : Tomato Run

Takane Ichinose — Fri, 17 Feb 2023 19:18:09 +0000

Tomato Run

Description

This is an endless running platformer game, where i you just have to earn the highest running distance, and highest points.

You may step on the crows to add more points!

You may double jump to avoid falling into the cliff.

You may shoot tomato seed to hurt these crows.

Collect higher points by stepping consecutively on the crow.

Controls

Using keyboard

z to jump
x to shoot tomato seed
← to go slower
→ to go faster

Using gamepad

○ to shoot tomato seed
× to shoot tomato seed
← to go slower
→ to go faster

Story

One beautiful day, when Tommy was just a normal tomato, he is just sitting on the field without doing anything. But magically, there is a fairy who gave Tommy a consciousness, then he starts moving.

Because Tommy has just had his consciousness, he knows nothing but to move forward.

Avoid the crows who are trying to eat Tommy. For them, Tommy is just a moving food.

The fairy gave tommy a power to shoot seeds. It is strong enough to hurt these crows.

The Game

Please access the link below to play the game.

https://takaneichinose.itch.io/tomato-run

Brave Chicky Dice Adventure

Takane Ichinose — Thu, 14 Jul 2022 15:35:33 +0000

Brave Chicky Dice Adventure

Description

This is just a simple turn-based game where you just have to throw a dice, defeat the enemy, and go to the highest floor as you can.

Help Chicky to climb up the Natural Tower by giving it a command. Chicky doesn't quite understand yet what it will do.

There are 4 possible commands to fight the ghost defending the Natural Tower.

By rolling the dice, you can guide Chicky with the possible commands depends on the number appeared on the dice.

== 1 Do nothing
>= 2 Defend
>= 3 Defend, Attack
>= 5 Defend, Attack, Heal

Also, you may challenge your friends and brag your highest score.

I haven't been ditching practicing web development these days, and I had hard time creating all these stuff.

This game is best viewed in landscape mode.

Resources

ThreeJS for 3D rendering and graphics
GSAP for animation
ReactJS for UI
MagicaVoxel to create all the 3D models.
Aseprite for background, dice, and effect.
PICO-8 for the colour palette used for graphics.
Press Start 2P for the fonts in the UI.

Bit Maze - Platformer Maze

Takane Ichinose — Thu, 31 Mar 2022 15:35:48 +0000

Bit Maze - Platformer Maze

Description

Guide Appley to find the sprout in this weird dungeon.

You may use your keyboard, or the controller at the screen to move Appley to another position.

This weird dungeon have so many traps, be careful of them!

Also please don't look at the source code (Especially the map!) before playing this game. That's cheating!

Controls

Up arrow key or Space bar - To jump

Left arrow key - To move to the left

Right arrow key - To move to the right

Development

This game is actually based on the unfinished game I tried to do before. I couldn't continue that, because I thought that I needed so many resources and algorithms to develop that game. I didn't use any game engines nor libraries for that game.

I used Phaser to create this game. I can't split codes from here, so all the codes are just compressed into a single scene. The assets are from Aseprite. The default colour palette used by Phaser is ARNE16, so I also used that colour palette to draw these images.

The main character I used for the game before is a dinosaur, but I decided to change the character into an apple (hence the name of the character is Appley).

Resources

Phaser - The game engine or framework.
Aseprite - Tool for creating pixel art.
VT323 - Font
ARNE 16 - Colour palette

Infinite Cars | Car Race Game

Takane Ichinose — Mon, 31 Jan 2022 15:56:08 +0000

Infinite Cars

Description

My first ever game created using a game engine!

Why "Infinite Cars"? Well simply because this is an endless racing game.

This is just a simple time killer when you are bored. This game does not have a specific goal. Just drive the car, survive the game, and dodge all the obstacles with all your might!

I already created many versions of this game, but this is so far is my creation that I feel satisfied the most. Well it's because this is the first time I actually used a game engine.

The computer car has a light artificial intelligence algorithm which it avoids an obstacle to go through. Although, it's not perfect, I'm already satisfied with it.

I read the API documentation, and the code in the examples a lot, for me to understand how to work on this game. Although, I'm pretty sure that my writing is not perfect.

Instructions

As mentioned before, just avoid the obstacles on the road.

You may drag the red car (or the character) to left or to the right to control it.

There is no other controls other than that.

If you feel that the background sound effect is noisy, you may mute it (Located at the top right of the game screen).

Resources

Phaser - JavaScript game engine or framework.

Aseprite - Drawing tool for the game objects .

LMMS - DAW application for the sound effects.

Luckiest Guy - Font used for the texts.

AAP64 - The color palette used for the images and the UI.

https://codepen.io/takaneichinose/project/editor/AMQxen

Responsive Message Box with JavaScript Class

Takane Ichinose — Wed, 26 Jan 2022 15:25:57 +0000

Responsive Message Box with JavaScript Class

This Message Box implementation in JavaScript, inspired by material design's toast message.

I used native JavaScript Class to implement the message box. This may not work with older browsers due to compatibility issue with compatibility with native JavaScript class.

The toast message will appear at the top right corner of the screen if the width of the screen is 768 pixels and above. Otherwise, the toast message will appear at the bottom center of the screen.

Usage

Create MessageBox class instance:

let msg = new MessageBox("#id", option)

Available options (type: Object):

const option = {
  // number: Count in milliseconds before closing the message box
  closeTime: 1000,
  // bool: Flag if the close button (or label) will be hidden for click
  hideCloseButton: false,
}

Call the "show" method to show the dialog box.

msg.show(
  "This is the message that will appear on the message box",
  () => {
    alert("This will be called after the message box is completely hidden");
  },
  "This is the close button"
);

Waving 3D + Pixel Art Siamese Cat

Takane Ichinose — Thu, 23 Dec 2021 14:06:46 +0000

Waving Pixel Art Siamese Cat

Description

I tried to put a pixel-art texture on a 3D model.

The image of the cat is based on our cat at home.

GSAP is really easy to use to animate almost anything on the web.

I used GSAP timeline to animate the cat, looks like it is waving. Though, I still need to practice my animation skills, and I want it to be better.

I also animated the cat to rotate 360 degrees so we could also see the rear-side of the cat. Although, there is nothing to see there.

I used primitive geometries provided by ThreeJS to create the model of this cat. Creating the head and the body was not a problem, but the shoe. I used combination of box, sphere, plane, and circle to create this shoe.

The only things that has a texture on the model is the head, and the body. Others are just a simple colored mesh.

The color palette I used in this model is Arne32.

How the model looks is inspired by the popular Nintendo Switch game: Animal Crossing.

Other description

ThreeJS: Next thing to study

Next to study: SkinnedMesh

Based on the documentation, SkinnedMesh can be used to twist and bend a mesh to simulate the skeleton, and can be used to animate an object.

Resources

GSAP For animation

ThreeJS For 3D rendering and modelling

Aseprite For pixel art texture

Arne32 Color palette

Make Voxel Chicky Bounce Call To Action

Takane Ichinose — Tue, 14 Dec 2021 15:16:13 +0000

Make Voxel Chicky Bounce Call To Action

Description

A call-to-action microinteraction, and animation of bouncing voxel model using GSAP and ThreeJS.

This layout is designed for full-page view of mobile devices. Though it will also look good on computer devices I believe.

I tried to make the squishing animation by playing on the GSAP timeline.

I created the Voxel model months ago using MagicaVoxel. The reference I used for this is also a 3D model (Using HTML and CSS) I created years ago.

See Chick in 3D Pixel World (No Javascript)

Resources

Input Form Covered In Darkness

Takane Ichinose — Thu, 28 Oct 2021 13:08:48 +0000

Input Form Covered In Darkness

Description

This time, because it should be the combination of all the pens I did for this month, I tried to combine the concepts of them all.

Although I didn't include the pen as it is, I took few assets from my past pens this month, and added those here.

In addition, I really didn't want to do this, but I couldn't think anything that is a scary UI/UX, so I made it scary because of the bad UX.

The main point of this pen is the darkness. User have to find the input form to be sent.

I created the UI of checkboxes and radio buttons using HTML and CSS.

Beware of flying stones! (Though it will not hit you)

Resources

I used Creepster as the font. I think this font is so scary.

I used GreenSock as my animation library. It is really fun to use this library.

Although it is an import from my previous pen, I used Aseprite to create the asset (Just a single stone).

3-Ways Ghost Display Confirm Button

Takane Ichinose — Thu, 21 Oct 2021 13:46:33 +0000

3-Ways Ghost Display Confirm Button

Description

I used lots of "3"s this time! 😅

I tried to render a 3D image using ThreeJS.

At first, I was intimidated by ThreeJS, because it is a 3D rendering engine! I mean, at first, I thought 3D was too complicated that it's impossible for me to understand the underlying concept about it.

Although it was actually complicated to understand (Yes, because I understood the concept of 3D in different way. I mostly created 3D rendering by using HTML and CSS), it is actaully really fun to learn! It makes me wonder of what others object I could create using modelling tool like Blender, or just use the default geometry provided by ThreeJS, and just add a texture on it.

I thought of using GSAP in animaton, because why not? I mean I already know the main concept in how to use this animation tool.

There are lots of commented-out codes here. I will not clear these comments for me to use those as my reference in the future.

Other descriptions

When you hover on the "confirm" button, there are minion of ghosts will appear, and march anywhre randomly. I created these animations using GSAP.

When you try to click the "cancel" button, a blocking ghost will get in your way. I created the model using just HTML and CSS.

Next Steps

My next goal I think is to create an animated GLTF file, then use ThreeJS to animate this.

Also maybe, I could be more ambitious, to actually create a 3D game.

I will also try to improve my skills in creating a 3D model using Blender.

And I'm also thinking to create an object using these primitive geometries provided by ThreeJS, also the textures.

Resources

Blender - I used this as my 3D modelling tool to create the model of the large ghost.
ThreeJS - I used this to render my 3D model into the webpage.
GSAP - I used this to create an animation of the Ghoost, and also its minions.

I created the model of this ghost by referencing that famous donut tutorial on the popular video streaming site.

DEV Community: Takane Ichinose

Mousiny

Mousiny

Description

Credits

Screenshot

#CodePenChallenge | Meowatar (Pure CSS avatar creator)

Meowatar (Pure CSS avatar creator)

Description

Zombie Gun War PICO-8 Game

Zombie Gun War

Controls

Description

There are 3 difficulties in this game

PICO-8 Game : Tomato Run

Tomato Run

Description

Controls

Using keyboard

Using gamepad

Story

The Game

Brave Chicky Dice Adventure

Brave Chicky Dice Adventure

Description

Resources

Bit Maze - Platformer Maze

Bit Maze - Platformer Maze

Description

Controls

Development

Resources

Infinite Cars | Car Race Game

Infinite Cars

Description

Instructions

Resources

Responsive Message Box with JavaScript Class

Responsive Message Box with JavaScript Class

Usage

Waving 3D + Pixel Art Siamese Cat

Waving Pixel Art Siamese Cat

Description

Other description

ThreeJS: Next thing to study

Resources

Make Voxel Chicky Bounce Call To Action

Make Voxel Chicky Bounce Call To Action

Description

Resources

JavaScript Library

Modelling Tool

Fonts

Input Form Covered In Darkness

Input Form Covered In Darkness

Description

Resources

3-Ways Ghost Display Confirm Button

3-Ways Ghost Display Confirm Button

Description

Other descriptions

Next Steps

Resources