The author of this article is the developer "tjss" of the sound network community . Based on the code template of Vue and the interactive whiteboard of SoundNet , he built a Sudoku game that supports multi-person interaction. This article records his implementation process. You are welcome to try to implement your own mini-games or applications.
I developed a scene window plug-in based on the SDK and Window Manager of the Shengwang interactive whiteboard , and realized a multiplayer Sudoku game. In the game, every player enters the whiteboard room, can see the Sudoku game plug-in, and can participate in it at the same time, and complete the Sudoku problem-solving together with the friends in the room.
Preparation
1. Register a Shengwang account and authenticate with real name , so as to create a project in the background and obtain the Appid and Token that will be used for development.
2. Understand the basics of Vue development.
3. To understand the interactive whiteboard products of Agora, some basic interfaces and functions , it is enough to read the official documents .
4. Build a development environment:
-
NodeJs version 16.0.0
-
@View/cli 4.5.1
-
VSCode code development tool
Enable and configure interactive whiteboard service
First of all, we need a real-name authenticated Shengwang account , enter the console (console.agora.io), and open the interactive whiteboard service in the Shengwang console.
It should be noted here that the interactive whiteboard is displayed as a service, while the console only displays a list of items, and does not directly display the service.
At this time, we first create a project, and then click "Configure" to enter the project details, and you can see the service content on the inside page.
At this time, find the interactive whiteboard service and click to open it. Since mine is already turned on, it shows the configure button.
Use the code template provided by the official website
At present, we don’t need to build the scene window plug-in from scratch. Acoustic Network provides a code template. Based on this template, we can easily implement a plug-in for use on the interactive whiteboard.
Template address:
https://github.com/netless-io/community-app-template
After setting up the development environment, you can download the template code, either through Git or Zip.
Note the development environment configuration in README.md:
1. Configure the whiteboard room UUID and Token in the .env file. Please copy the .env.example file in this directory, rename it to .env or .env.local, and fill in the necessary whiteboard configuration information. You can apply for a dedicated whiteboard configuration at Netless Workshop .
2. Execute npm install to install dependencies
3. Execute npm start for local development
project structure
The author develops it based on the Vue version of the plug-in template. Open the project directly and modify the content in src, which is basically the same as Vue development. If the code is pulled through the Git command, you need to switch the branch to the Vue branch.
- The project structure is as follows:
-
The playground directory basically does not need to be modified, and the plug-ins we implement are completed in the src directory.
-
The index.ts file is some data settings for our plugin, such as the plugin name. Other logic basically does not need to be modified.
onst Sudoku: NetlessApp = {
kind: "Sudoku",
setup(context) {
const box = context.getBox();
box.mountStyles(styles);
const $content = document.createElement("div");
$content.className = "app-counter";
box.mountContent($content);
const app = createApp(App).provide("context", context);
app.mount($content);
context.emitter.on("destroy", () => {
app.unmount();
});
},
};
export default Sudoku;
Sudoku Game Rules
Sudoku grid consists of 9x9 spaces. Players can only use numbers 1 to 9, each 3×3 house can only contain numbers 1 to 9, each column can only contain numbers 1 to 9, each row can only contain numbers 1 to 9, each 3×3 house, Each number in each column or row can only be used once. The game ends when all sudoku grids are filled with correct numbers. (Extracted from the Internet)
The core idea of data synchronization
1. Through the createStorage method provided by the interactive whiteboard SDK, initialize a Sudoku board and store the data, and at the same time update your own chessBoard.
const chessBoard = ref();
const context = inject<AppContext>("context");
const storage = context.createStorage("chessBoard", { chessBoard: ChessBoard.init() });
chessBoard.value = deepCopy(storage.state.chessBoard)
2. Add the update monitor of the stored value in the onMounted callback function of the Vue interface, so that the player broadcasts the latest grid data when filling the grid, and other players can receive the update notification, and then re-render the interface.
onMounted(() => {
initAppData()
storage.addStateChangedListener((diff) => {
chessBoard.value = deepCopy(diff.chessBoard?.newValue)
if (finish(chessBoard.value.gridItems)) {
statistics(chessBoard.value.gridItems)
finishTag.value = true
}
})
});
3. When filling the grid, update the data of the Sudoku board through the setState method of the SDK.
if (e.data && e.data > 0) {
grid.number = parseInt(e.data)
grid.userId = uid.value
grid.color = rgb
} else {
grid.number = 0
grid.userId = ''
grid.color = new Rgb(233, 233, 233)
}
storage.setState({ chessBoard: chessBoard.value })
Sudoku game interface
The author is giving priority to realizing the core functions of this interactive game, so the game interface designed is relatively simple.
Sudoku data structure
export class ChessBoard {
gridItems: GridItem[][]
}
Because it is necessary to count the number of entries filled in by each player after the game is over, it is also recorded which player filled it out when updating the grid value. The default field indicates that the grid is automatically generated and does not need to be filled in by the player.
export class GridItem {
number: number
color: Rgb
userId: string
default: boolean
}
run project
Click the button at the bottom of the toolbar to find the plug-in icon we implemented, and then click to open it.
After opening the plug-in, a Sudoku problem will be initialized and stored through the createStorage method. All players entering the room can get this data, and subsequent Sudoku updates will be synchronously modified by the players. Because the focus of this project is to learn about plug-in development and data synchronization, the game interface and content are relatively simple.
The next step is to open multiple web pages and enter localhost:3000 to enter our interactive whiteboard room, because the uid of the template is randomly generated, which means that different players have entered.
After other players fill in the box, other players can no longer fill in this grid. At the end of the game, the correct numbers filled in by each player will be counted and displayed.
game over
Summarize
Through the official scene-based plug-in template, we can easily implement some fun interactive scene functions. In this simple project, due to the rush of time, I haven't had time to optimize it better. I will polish it later when I have time. For example, the numbers filled in by different players are distinguished by different colors, adding a time limit mechanism and so on. Friends who are interested, let's develop some fun real-time interactive functions~
Sign up for Agora SDK now and get 10,000 minutes of free usage per month. If you have any questions during the development process, you can communicate with official engineers in the Shengwang developer community .