Table of contents

introduction

Sony's toio™ programming robot is a product that leads technological innovation and provides developers with a new programming and creation platform. toio™ is designed to blend technology, plasticity and fun to bring users unlimited creativity and entertainment.

Summary

This article describes how to write a smart Tetris game using the toio™ robot and JavaScript. Through the toio™ robot's sensitive control and real physical feeling, we can re-experience the classic Tetris game and increase the fun of parent-child interaction.

Creative brief

Sony toio™ Tetris: Sony toio™ is very smart and sensitive. You can use this feature to make Tetris jump out of the screen, allowing us to truly experience the classic again. JavaScript is used to control the robot's transportation and rotation of blocks and the elimination of rows of blocks piled at the bottom. The robot's acceleration controls the speed of the blocks falling. At the same time, through this kind of real game experience, it can protect children's fragile eyes and increase the fun of parent-child interaction.

Preparation | Start by hand

First, we need to prepare the following items:

toio™ Core Cube toio™ Hub toio™ Cube (used to represent Tetris) Make sure you have connected the toio™ Core Cube to the hub and have the toio™ development environment installed.

toio™ consists of two small cubes, each with wheels and magnetic connection points, which can be combined and disassembled freely. This design allows toio™ to be deformed into various shapes and structures, providing developers with great creative space. In addition, toio™ also has high-precision motion control capabilities, enabling precise movements and manipulations. Developers can control the movement, steering and interaction of toio™ through programming to create a variety of application scenarios.

Code writing | Reasonable integration

We will use JavaScript to write code to control the toio™ robot and implement the functionality of the Tetris game.

First, we need to create an HTML file and import the toio™ JavaScript library:

<!DOCTYPE html>
<html>
<head>
    <title>toio™俄罗斯方块</title>
    <script src="https://cdn.jsdelivr.net/npm/toio-sdk/build/toio.min.js"></script>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="800"></canvas>
</body>
</html>

Next, we need to write the game's logic in JavaScript. We will use the HTML5 Canvas element to draw the game interface, and use the toio™ API to control the movement of the robot.

// 获取Canvas元素
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 创建toio™连接
const cube = new toio.Cube();

// 游戏相关变量
const blockSize = 40; // 方块大小
const boardWidth = 10; // 游戏面板宽度
const boardHeight = 20; // 游戏面板高度
const board = []; // 游戏面板数组

// 初始化游戏面板
for (let row = 0; row < boardHeight; row++) {
    board[row] = [];
    for (let col = 0; col < boardWidth; col++) {
        board[row][col] = 0;
    }
}

// 绘制游戏界面
function drawGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制游戏面板
    for (let row = 0; row < boardHeight; row++) {
        for (let col = 0; col < boardWidth; col++) {
            if (board[row][col] === 1) {
                ctx.fillStyle = '#000000';
                ctx.fillRect(col * blockSize, row * blockSize, blockSize, blockSize);
            }
        }
    }

    // 绘制机器人方块
    const pos = cube.position;
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(pos.x * blockSize, pos.y * blockSize, blockSize, blockSize);
}

In the above code, we initialize the game panel, and use the toio™ API to listen to the robot's movement, button and acceleration events.

According to different events, we can implement the logic of cube rotation, movement and accelerated falling:

// 监听toio™连接事件
cube.connect().then(() => {
    // 监听机器人移动事件
    cube.on('id:position-id', () => {
        drawGame();
    });

    // 监听机器人按钮事件
    cube.on('id:button-id', (data) => {
        if (data.pressed) {
            // 按下按钮时，方块旋转
            // TODO: 实现方块旋转逻辑
        }
    });

    // 监听机器人加速度事件
    cube.on('id:collision-id', (data) => {
        if (data.x > 0) {
            // 加速度向右，方块向右移动
            // TODO: 实现方块向右移动逻辑
        } else if (data.x < 0) {
            // 加速度向左，方块向左移动
            // TODO: 实现方块向左移动逻辑
        } else if (data.y > 0) {
            // 加速度向下，方块加速下落
            // TODO: 实现方块加速下落逻辑
        }
    });
});

Save the above code as an HTML file and open it in a browser that supports JavaScript. Make sure the toio™ core cubes are connected and place the toio™ cubes on the game board.

By pressing the button of the toio™ cube, the rotation of the cube can be controlled. By tilting the toio™ block, you can control the block's movement and accelerate its fall.

Through this real physical feeling, we can re-experience the classic Tetris game and increase the fun of parent-child interaction.

User experience｜Almost magical

After the whole experience, I feel that compared to traditional screen programming, toio™ programming robot provides a more practical and interactive learning experience. Users (children) can intuitively understand the effects of programming code by observing the behavior of the robot, which also helps deepen their understanding of programming logic. In addition, its scalability and diversity can stimulate children's creativity and desire to explore, allowing them to discover more fun and challenges in the process of programming.

I also hope that more children can ignite sparks of inspiration through toio™, give full play to their creative talents, fully appreciate and enjoy "creation, experience the ultimate happiness and touch brought by "inspiring moments", and spend time with toio™. A happy childhood can achieve transformation and growth through hands-on and brain-based practice. Parents can also enjoy precious parent-child time with their children through toio™.

Sony toio™ application creative development call for papers｜toio Tetris game