DEV Community: damanita

CSS clamp() Method

damanita — Wed, 18 Jan 2023 16:59:26 +0000

Hi there!

Recently, I've learnt a new functionality in CSS, which I've never known about before. I decided to share it with you, because I believe that it is very valuable and practical to use.

The clamp() method has three values. The first is the minimum, the second is the preferred and the third is the maximum value. This function allows you to set a value that will not decrease beyond the minimum and increase above the maximum, i.e. it clamps the middle value of the range. Below you will find a link to check it out:

https://jsfiddle.net/2kdbe680/2/

In my opinion, this is a very practical method, because you don't have to adjust font size to the screen size. It's a different approach to media query and depending on the situation might be very useful.

Do you have experience using it? Please drop a comment.

Thank you for reading!

How can you execute a function after pressing a button or actually any other HTML element.

damanita — Fri, 26 Aug 2022 18:04:13 +0000

Hi there!

Today I am going to show you how you can execute a function after clicking on an HTML element.

You have to query an element from the document. There are few ways you can do it like getElementByClassName or querySelector. I will use getElementById:

For example:

const button = document.getElementById("buton");

Assign a listener to this element (button), which will be triggered a function after the element was clicked:

buton.addEventListener("click", function() {
   alert("Hello there!")
 });

In this case, an alert will be displayed with the text 'Hello there!'

You can also assign a named function:

function clickButton() {
   alert("Hello there!");
 }

 button.addEventListener("click", clickButton);

As I mentioned above, you have several ways to query for an element from a document. Here is a link, with more examples, eg.: how to assign a listener to each element from a list of elements: https://jsfiddle.net/8jo9vhsa/1/

If you have any suggestions, feel free to write a comment.

Thank you!

A simple RPG game - Part 2- a new look for my project.

damanita — Thu, 16 Jun 2022 18:05:46 +0000

In the last article, I described the idea for my RPG game. However, I'm not entirely satisfied with the result, that's why I want to improve it by rewriting it, giving more functionalities, refreshing visualization(look and feel) and spending more time on good code practices(eg.: functions naming, splitting into modules/classes, etc).

I decided on pixel art, because this type of art seems to be simple and suitable for the type of game I'm creating. Besides, I like it :-)

You can see the new graphics below. I used different color palettes and I am finally satisfied with the overall result. Let me know what you think.

Next steps would be to design a few different game levels and how users can interact with it.

That's it for now. Just a short update. I will keep you posted on my progress on the project.

If you have any suggestions, please write a comment.

Thanks for reading!

A simple RPG game - personal project to improve my programming skills

damanita — Sun, 12 Jun 2022 21:31:02 +0000

Intro

I have been working on a game for a while, where you fly a spaceship, destroy enemies and collect coins that allow you to buy additional skills for the ship. However, one of my good friends who is an experienced programmer told me that my project could be improved. He also advised me to share my progress, which would help me to stay motivated to learn and focus on my project. That is why I decided to write this article in which I want to describe what I have done and what are my next steps.

I have already implemented following features:

Game rules

The main character of this game is a spaceship that collects coins(points). Points appear after destroying opponents. If the spaceship collects enough coins, it can buy skills to improve his statistics. The game also has two types of enemies. One of them is the ‘alien’, which takes away points from the ship during collision. The other is ‘UFO’, which shoots towards the ship and also takes points away from it. Then when the spaceship destroys enemies, it will be able to collect coins(points) from these enemies after they disappear. The goal of the game is to destroy all opponents.

Spaceship skills

Laser length - collect coins from a greater distance
Ship speed - faster ship movement
Bullets speed - destroy opponents more efficiently

Technologies used

Pixi JS
Here is a list of a few things which came to my mind while I started using it. And this is just my opinion which means you don’t have to agree.

advantages

easy API - there is just the right amount of functions to use like drawing an image or a shape, rotating it compared to other libraries where API is to complex
very similar to canvas with few additional functions - easier to learn
graphics - you can very easily and effectively draw various geometric figures
examples - you can find small examples on many topics
MIT license - you can use it in commercial projects

disadvantages

3D - you can not use 3D graphics

Look and feel of the game

On the right side skills and statistics of your ship are displayed. Skills can be bought by the given amount of coins.
On the left side there is actual gameplay happening.

This is what my game looks like now, but like I said, I want to improve it, add different features and make my code cleaner.

Next things I want to implemented:

Game levels

Each of these levels will be more difficult. Increasing value of skills per level
The character will need to spend more resources/gold coins
Stronger opponent at the end of each level aka boss :D

Ship skills

different ships or additional equipment
bullets range - destroys enemies from a greater distance
packages - the character can obtain skills from the package which would show up after killing a boss instead of paying for it

Summary

I am writing this game, because I want to learn something new, expand my programming skills and build my portfolio.

Additionally, I would be very grateful for any advice and support which would help me in continuing this project.

Thank you for reading!

Hi there!

damanita — Thu, 26 May 2022 22:21:08 +0000

I'm new here and I'm learning programming. I want to share with you my new knowledge about programming and get to know your opinions. Thank you very much for your understanding!

Hi!

damanita — Thu, 26 May 2022 22:14:20 +0000