Implement a streamlined version of Pac-Man mini game in 348 bytes

Today I will share a @aemkeiPac-Man mini-game with only 348 bytes produced by some big guys. As shown in the animation above, it basically realizes the main functions of the game. Let’s take a look at how the big guys implemented it with such a short code. The effect of the entire game.

Github warehouse address:https://github.com/codegolf/pac-man

The entire game uses keyboard controls to move Pac-Man. The following is the game interface layout. There are no other DOM elements. The entire game interface and operations are implemented only through pure characters.

#############
#     #    .#       #   = Wall
# ### # ###.#
# # X    .#.#       X   = Ghost
# # # ###.#.#
# # # o #.#.#       o   = Player
# # ### #.#.#
# # ......#.#       .   = Gold
# ### #.###.#
#.....#.....#
#############

Overall source code:

<body onload=for(l=D=11;d=k=D--;x=78)l+="῿
၁᝝ᐅᗕᔕᕵ".charCodeAt(D<7?D:10-D).toString(2)
+3;l=l.split(""),setInterval("if(x^X)for(h
=i=l[x]=2,l[x+=d=2%k||9&l[x+(o=k%2||~-k*14
)]?9&l[x+d]?0:d:o]=4,l[X]&=7,b=D%4-2,b=b++
%2||b*14,9&l[X+b]?D++:X+=b,l[X]|=8;i<154;)
p.innerHTML=h+='.# \\nx'[l[++i]]||0",X=151
) onkeydown=k=event.which-38><pre id=p>

This code is a very compact JavaScript code. It uses the concise syntax characteristics of HTML and JavaScript to compress the entire game logic to the limit. The following is the parsing and implementation logic of this code:

HTML structure

  • <body onload="...">: Execute internal JavaScript code when the page is loaded.
  • <pre id=p>: Use preformatted tags to display the game’s graphical interface id=pfor reference in JavaScript.

JavaScript code parsing

  1. Initialize variables :
    • for(l=D=11;d=k=D--;x=78) ...: This is a for loop used to initialize some variables. land Dis set to 11, dand ( kdecreasing Das the loop goes), xis set to 78.
    • l+=...: This part of the code is responsible for creating the game map. It uses character encoding and bit operations to generate a string representing the game map.
  2. Game loop :
    • setInterval("..."): Use to setIntervalset the game loop and update the game status regularly.
    • if(x^X) ...: This is the core of the game logic. Check whether Pac-Man’s position ( x) and Ghost’s position ( X) are different and update the game state accordingly.
  3. Keyboard input handling :
    • onkeydown=k=event.which-38: This part is used to handle keyboard input and change Pac-Man’s movement direction.
  4. Game logic :
    • Updated Pac-Man and Ghost locations.
    • Check the corresponding location on the game map to determine whether Pac-Man and the ghost’s movements are valid.
    • Update the display on the screen.

core logic

  • if(x^X)Determine xwhether Xthe sum is equal, that is, determine whether the position of Pac-Man and the position of the beans are consistent.
  • h=i=l[x]=2lSet the element at index in the array xto the number 2 and assign it to the variable hsum i.
  • l[x+=d=2%k||9&l[x+(o=k%2||~-k*14)]?9&l[x+d]?0:d:o]=4dMove Pac-Man’s position based on the direction variable . The specific logic is: if kit is an even number, let it dbe equal to 2; if it is not an even number, let it dbe equal to 9 & l[x + o] ? 0 : d. oThe calculation method is as follows k % 2 || ~-k * 14. Then lset the element at the corresponding position in the array to the number 4.
  • l[X]&=77Perform a bitwise AND operation on the elements and numbers at the position of the bean , so as to subsequently determine whether it has been eaten.
  • b=D%4-2,b=b++%2||b*14DCalculate the value of the horizontal movement direction variable based on the variable b.
  • 9&l[X+b]?D++:X+=bDetermine whether the next position of the bean can be moved and update the value of the variable Dor X.
  • l[X]|=8Set the element at the new bean position to the number 8, which means generating new beans.
  • i<154Loop conditions, limit the number of loops.
  • p.innerHTML=h+='.# \\nx'[l[++i]]||0Update the game scene to the page in the form of HTML format string.

Technical points

  • Bit operations and character encoding : Use character encoding and bit operations to create maps and implement game logic.
  • Close integration of HTML and JavaScript : Use simple HTML structure and compact JavaScript code to implement games.
  • Event monitoring and processing : Control game characters by monitoring keyboard events.

at last

This code is a typical example of how to implement complex logic with very little code. It takes advantage of the features of JavaScript and HTML to create a complete gaming experience.

The entire game logic is very simple, mainly through array operations and some judgment conditions to simulate the movement of Pac-Man and the process of Pac-Man. The code repeatedly executes the loop body to realize the continuous progress of the game. Players can control Pac-Man’s movement direction through the arrow keys on the keyboard. The object of the game is to eat all the beans while avoiding the walls until the game is over.

This programming style excels in code compression and efficiency, although it sacrifices readability.

By JavaScript