Autojs do small games – Lianliankan


Yashu tutorial is simple and easy to understand

Effect display

Dynamic background

Autojs do small games - Lianliankan

Connecting line

Autojs do small games - Lianliankan


Autojs do small games - Lianliankan

Dependency graph

The figure uses the vscode plug-inDependency Cruiser Extensiongenerate

Autojs do small games - Lianliankan

Production process


  <vertical padding="30">
      < text textsize = "30sp" text = "timing" / >
      <text textSize="30sp" text="00:00" layout_weight="1" />
      < button textsize = "30sp" text = "rearrange" / >
    <canvas w="*" h="*"></canvas>

Canvas is the drawing board of Android. When we do continuous viewing, we mainly operate on the drawing board. The main process is as follows

Autojs do small games - Lianliankan

Write and read code rules

Data and rendering are separated to facilitate code maintenance and reuse

Generate data

The drawing board can draw pictures, paths, curves, circles, etc. What I choose is to draw paths,;

All shapes are subsets of octagons. Octagons take any point, sort, and then fill in color;

Each graphic has attributes similar to ID card, which is convenient to compare whether the two graphics are the same in the later stage;

There are many properties of lattice, and there is no redundancy. They are basically necessary;

I regard a grid as a place for toys. The octagon is a toy, that is, toydata:

Autojs do small games - Lianliankan

There are many ways to lattice

Autojs do small games - Lianliankan

The grid has three states

  • normal

  • Select

  • empty

The state of the grid belongs to data. The method of setting the state only sets the state and is not responsible for rendering,

Rendering has a special render method

Render data

  • Rendering dynamic background: add a timer to a picture and modify the picture coordinates regularly, so there will be a moving effect visually

  • Rendering grid: draw the border first, and then draw the toy inside the border, that is, a subset of octagons, triangles, quadrangular rows, pentagons, etc

  • Rendering connection: calculate the connection path of two grids, and then draw the path, giving a 200ms delay to see the connection effect

Click event

function setOnTouchListener(board, cellList, boardForLine) {
  let touchListener = getTouchListener(cellList, boardForLine);

Used at the, no response, adoptedsetOnTouchListenerThen there was a reaction;

Main logic

  • Click which grid it belongs to
  • Three states of grid switching and rendering: normal, selected and empty

Can the two lattices be connected

I divide connectivity into three types:

  1. The two squares are next to each other

  2. Do the spaces around the two grids intersect

  3. Traverse the space around one grid and check whether there is intersection with the space around another grid

As shown in the following figure: the red fork is not only the space in the green grid, but also the space in the red grid, which means that the two grids can be connected

Autojs do small games - Lianliankan


In order to deal with the randomly generated continuous look without solution, the rearrangement function is added

Because data and rendering are separated, rearrangement only disrupts data, rendering can still be reused;

Rearrangement is mainly to modify the row and column properties of the grid, and other properties are not modified

Canvas method used

  • canvas. Drawcolor draw background color

  • canvas. Drawbitmap draw dynamic background

  • canvas. DrawText draw text

  • canvas. DrawLine draw line

  • canvas. drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); Empty canvas

  • paint. setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); Set the brush to eraser mode, and there will be no image wherever you wipe

  • paint. setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC)); Set the display foreground map; First draw the background, then the foreground

Trample pit

The calculation of coordinates should depend on the properties of the grid: row and column, and should not depend on the cached left, top, right and bottom;

If there is no rearrangement function, you can use the cached left, top, etc


Mobile: Mi 11 Pro

Android version: 12

Autojs version: 9.1.2

Famous quotes

Thinking is the most important. Other Baidu, Bing, stackoverflow, GitHub, Android documents, autojs documents, and finally ask in the group — Yashu tutorial


Part of the content comes from the Internet. This tutorial is only for learning and is not allowed to be used for other purposes

Recommended Today

(C#) Listening to the clipboard

public partial class Form1 : Form { public Form1() { InitializeComponent(); AddClipboardFormatListener(this.Handle); } protected override void WndProc(ref Message m) { if (m.Msg == WM_CLIPBOARDUPDATE) { Console.WriteLine(&quot;Clipboard content changed&quot;); } base.WndProc(ref m); } //——————— public const int WM_CLIPBOARDUPDATE = 0x031D; [DllImport(“user32.dll”, SetLastError = true)] public static extern bool AddClipboardFormatListener(IntPtr hWnd); [DllImport(“user32.dll”, SetLastError = true)] public static […]