Programming a simple catch game?

ve
11

Hi, I'm currently programming a simple game on my laptop with the text editor (HTML; CSS). However, I don't really know how to program the two players.

The whole background is black, there's no score or anything. At the beginning, two small white squares should appear next to each other in the middle of the screen. Both players can move their figure at will and also outside the screen (hide). If one square touches the other (you have to identify who's your turn to catch) the two squares are "spawned" again.

Unfortunately, I've never programmed a video game, which is why I'll start with something as simple as this. It would be great if you had some code examples or other tips.

Lo

Unfortunately I have to disappoint you. That won't work with HTML and CSS. You'd better look at a programming language like Javascript (and its frameworks).

ve

Okay, I'll take a look

Further tips for this are welcome!

fr

You can't program games with HTML and CSS alone. Either you take a look at JavaScript. If you want to make the game more professional, I would recommend you to learn C # or C ++. Most games are programmed with these programming languages. Preferably with a game engine like Unity, but if you want it to be easy, you can do it well with HTML, CSS and JavaScript

Lo

I recommend that you first acquire a basic knowledge of HTML and CSS. My suggestions from good channels:
1.https://www.youtube.com/user/KepowOb (Kevin Powell / HTML & CSS)
2.https://www.youtube.com/user/TechGuyWeb (Traversy Media / HTML & CSS & JS)
3.https://www.youtube.com/user/TheMorpheus407 (Morpehus / HTML & CSS & JS)
On the 3rd:
He explains the absolute basics in German and you can find more complicated and useful things on the other channels.

Lo

C ++ / C # as a first language is too difficult in my opinion. Everything after that is still "correct".

fr

Yes, you are right, these are pretty difficult languages. But if you give yourself enough information and have good tutorials or books, that is definitely possible.

Lo

Yes, I can say that from my own experience.

Wa

Only with CSS and HTML it doesn't work, CSS is just a stylesheet language and HTML is a markup language. You can't incorporate real program logic with either of the two. Both are only used to design a website.

If you want to stay in the field of web development then you should learn JavaScript to be able to implement such games properly.

But if you want to program games in general, learning from a language like C # or C ++ is more advisable, as there are good engines here.

ve

Many Thanks!

Le

The https://p5js.org/ is ideal for your project. It uses the canvas element (HTML) for rendering the game scene (this is more efficient than trying to move div blocks back and forth) and provides various helpful functions for drawing.

Another advantage is that p5.js is very well suited for getting started with programming with JavaScript. It is simple and offers a lot of leeway to let off steam creatively.

In addition to the linked references on the project page (on books, tutorials, etc.) you will find a lot of helpful material on:

https://shiffman.net (e.g. Das https://shiffman.net / a2z / intro / or look directly at the linked The Coding Train channel, which offers really interesting code challenges and other articles on the subject of games / creative coding).

https://happycoding.io/ (tutorials from a Google developer on JavaScript, HTML, …)

https://openprocessing.org/ (for collecting further inspirations)

https://timrodenbroeker.de/ (for tutorials on mini projects)

I have already listed some good sources specifically on JavaScript (as well as HTML and CSS).

If you want to develop more complex web-based games later, check out https://playcanvas.com/ or https://phaser.io/.

ve

Thank's for the Tipps.