Comença el teu viatge de desenvolupament de jocs amb la senzillesa de 24a2

Comença el teu viatge de desenvolupament de jocs amb la senzillesa de 24a2
Lectors com tu ajuden a donar suport a MUO. Quan feu una compra mitjançant enllaços al nostre lloc, podem guanyar una comissió d'afiliats. Llegeix més.

24a2 és un motor de joc molt bàsic, però totalment operatiu, per a programadors de JavaScript. Té un aspecte inusual, però podeu utilitzar-lo per aprendre els fonaments de la programació de jocs.





Amb suport per a un bucle de joc, gràfics acolorits i entrada senzilla, 24a2 té tot el que necessiteu per crear petits jocs amb el mínim esforç.





Fes una ullada a 24a2 i comença el teu viatge cap al desenvolupament complet del joc avui mateix.





Windows 10 no s'ha trobat cap sistema operatiu

Què és 24a2?

24a2 és un petit motor de codi obert que us ajuda a crear jocs bàsics. És molt fàcil d'aprendre i tot el que necessites per començar a crear els teus jocs és un navegador web i un editor de text.

24a2 pren el seu nom de la seva resolució: 24 x 24. Fins i tot en comparació amb altres motors minimalistes com PICO-8 , amb la seva resolució de 128 x 128, això és petit! 24a2 utilitza 'píxels' circulars, amb grans espais entre ells, de manera que té un aspecte força distintiu.



  Un joc d'esquí bàsic amb el jugador mostrat en un camí al mig de dues zones verdes.

Probablement no utilitzareu 24a2 per crear el proper videojoc d'èxit, però aquest no és realment el punt. 24a2 és perfecte per a principiants i podeu utilitzar-lo per aprendre alguns dels conceptes fonamentals del desenvolupament de jocs.

També és ideal per crear prototips d'un concepte bàsic. Si us distreu amb la física del joc complexa o les animacions de sprites, eliminar tot això us ajudarà a concentrar-vos.





A més, el codi font 24a2 és a únic fitxer TypeScript . Podeu utilitzar-lo com a inspiració, o fins i tot modificar-lo, per crear el vostre propi motor de joc més avançat.

Com s'utilitza 24a2?

Comenceu amb una plantilla bàsica per al vostre joc:





 <html> 
  <head>
    <script
      src="https://cdn.jsdelivr.net/gh/jamesroutley/24a2/build/engine.js">
    </script>
    <script src="game.js"></script>
  </head>
  <body></body>
</html>

Observeu com això utilitza una xarxa de lliurament de contingut (cdn.jsdelivr.net) per a la font motor.js fitxer, de manera que ni tan sols cal que baixeu ni instal·leu res.

El segon guió, joc.js , és per al teu propi codi de joc. Comenceu amb el codi de treball mínim absolut, per comprovar que tot funciona correctament:

new Game({}).run();

Aquest petit programa mostrarà la graella 24a2 predeterminada al vostre navegador web:

  La quadrícula predeterminada de 24x24 de cercles gris clar que formen 24a2's playfield.

A continuació, voldreu familiaritzar-vos amb les funcions de devolució de trucada del 24a2 que formen el nucli del motor. Aquests conceptes es poden transferir a través dels motors de joc, de manera que aprendre com funcionen us beneficiarà més enllà del vostre ús de 24a2.

per què no rebo notificacions al meu iPhone?

Hi ha un grapat de funcions essencials que podeu definir i passar al constructor Game() mitjançant a config objecte.

 let config = { 
  create: create,
  update: update,
  onKeyPress: onKeyPress,
  onDotClicked: onDotClicked
};

let game = new Game(config);
game.run();

24a2 crida a la funció que especifiqueu a config.create quan s'iniciï. Podeu utilitzar-lo per inicialitzar la configuració del vostre joc, configurar estructures de dades, etc.

 function create(game) {}

La funció d'actualització s'executa periòdicament durant el joc. Això és el bucle principal del joc que, en altres motors, sol consistir en passos separats per actualitzar l'estat del joc i tornar a dibuixar la pantalla. Amb 24a2, gestionareu les dues operacions en aquesta funció.

 function update(game) {}

Finalment, per capturar l'entrada, voldreu gestionar les tecles de fletxa, els clics del ratolí o tots dos. 24a2 passa una direcció a la funció onKeyPress quan el jugador prem una tecla de fletxa. Passa les coordenades x i y a onDotClicked si fan clic en un punt amb el ratolí.

 function onKeyPress(direction) {} 
function onDotClicked(x, y) {}

Quins tipus de jocs podeu crear amb 24a2?

El 24a2 lloc conté tres exemples de jocs que inclouen un tutorial. Els altres que mostra són un simple joc de serps i un repte d'esquí.

El Repositori GitHub inclou enllaços a altres jocs, com ara Space invaders, Tic-Tac-Toe i un programa de pintura mínim. You Killed a Bear és més avançat i Maze Craze és una bona demostració de com posar gràfics addicionals a la part superior de la graella estàndard.

24MadRush és un 'clon' de Tetris que fa un gran ús de la paleta de colors. També comença amb un innovador tutorial jugable que demostra les seves característiques.

  24MadRush, un joc de blocs que cauen amb un pegat de punts de colors barrejats a les 4 files inferiors.

Les especificacions tècniques dels jocs 24a2

24a2 és molt limitat, per disseny. Però això ofereix una excel·lent oportunitat per a la creativitat. Un dels els millors consells per ser més creatius és acceptar les limitacions.

el que fa massa calor per a la CPU

A més de la seva resolució limitada, 24a2 us limita a:

  • Una paleta de colors de només nou colors: els de l'arc de Sant Martí més negre i gris.
  • Entrada molt bàsica: prems de les tecles de fletxa i clics del ratolí a la graella de punts.
  • Silenci: no hi ha suport per a música ni efectes de so.

Tanmateix, sempre podeu escriure codi JavaScript addicional per ampliar el vostre joc més enllà d'aquestes limitacions. I, com que el motor és de codi obert, sou lliure de desenvolupar-lo de la manera que us convingui.

Animeu-vos a coses més grans amb 24a2

Prova de provar-te amb 24a2. Recreeu un joc clàssic o inventeu-ne un. Els jocs per torns, com els de taula, funcionaran molt bé amb el motor.

Si 24a2 encén la teva passió pel desenvolupament de jocs, hi ha moltes oportunitats per continuar el viatge. PICO-8, Godot, Unity i GameMaker són opcions populars.