make a 2D retro-game-style game that has tilt controls and there’s a paintbrush and you tilt around your phone to color in squares on a board and when you’ve colored in all squares, you complete the game's game | AI game creator

Click here for free DL of the app version that can save data.

No:4051

1396

make a 2D retro-game-style game that has tilt cont..ALL
Developer User3758｜Date and time 23/6/27 5:01:23
Build time 30.235 sec｜Game capacity 3.984KB｜

. Sure, I can create a game like that. Here's an example HTML file with JavaScript that implements the game you described:

This game creates a square board and allows the player to tilt their device to paint in the squares one by one, until all squares have been painted. The tilt controls are handled using the `mousemove` event, and the board is created using HTML and CSS. The game keeps track of the current square being painted and the number of unfilled squares left, and displays an alert when the game is complete. Feel free to modify the code and styles to fit your needs.

→ 　

0　

0　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

.

Sure, I can create a game like that. Here's an example HTML file with JavaScript that implements the game you described:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tilt Paint Game</title>
  <style>
    #game-board {
      margin: 0 auto;
      width: 200px;
      height: 200px;
      border: 1px solid gray;
      display: flex;
      flex-wrap: wrap;
    }
    .square {
      width: 50px;
      height: 50px;
      border: 1px solid black;
      background-color: white;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

<script>
    const boardSize = 4; // number of squares per row/column
    const board = []; // array of arrays holding color info for each square
 
    let currentSquare = null; // the square being painted currently
    let unfilledSquares = boardSize ** 2; // number of squares left to paint
 
    // Initialize board and add event listener to window for deviceorientation
    window.addEventListener('deviceorientation', handleTilt);
    initBoard();
 
    function initBoard() {
      const boardEl = document.querySelector('#game-board');
      for (let i = 0; i < boardSize; i++) {
        const row = [];
        for (let j = 0; j < boardSize; j++) {
          const square = document.createElement('div');
          square.classList.add('square');
          square.addEventListener('touchstart', startPainting);
          row.push('white');
          boardEl.appendChild(square);
        }
        board.push(row);
      }
      // paint first square
      currentSquare = getSquare(0, 0);
      setColor(currentSquare, 'red');
    }
 
    function startPainting(event) {
      currentSquare = event.target;
      setColor(currentSquare, 'red');
    }
 
    function setColor(square, color) {
      square.style.backgroundColor = color;
      const [row, col] = getCoords(square);
      board[row][col] = color;
      unfilledSquares -= 1;
      if (unfilledSquares === 0) {
        alert('You won!');
      }
    }
 
    function handleTilt(event) {
      if (currentSquare) {
        const [x, y, z] = [event.beta, event.gamma, event.alpha];
        const [row, col] = getCoords(currentSquare);
        if (x > 10) { // tilting down
          if (row < boardSize - 1) {
            setColor(currentSquare, 'white');
            currentSquare = getSquare(row + 1, col);
            setColor(currentSquare, 'red');
          }
        } else if (x < -10) { // tilting up
          if (row > 0) {
            setColor(currentSquare, 'white');
            currentSquare = getSquare(row - 1, col);
            setColor(currentSquare, 'red');
          }
        } else if (y > 10) { // tilting right
          if (col < boardSize - 1) {
            setColor(currentSquare, 'white');
            currentSquare = getSquare(row, col + 1);
            setColor(currentSquare, 'red');
          }
        } else if (y < -10) { // tilting left
          if (col > 0) {
            setColor(currentSquare, 'white');
            currentSquare = getSquare(row, col - 1);
            setColor(currentSquare, 'red');
          }
        }
      }
    }
 
    function getSquare(row, col) {
      return document.querySelector(`#game-board .square:nth-child(${row * boardSize + col + 1})`);
    }
 
    function getCoords(square) {
      const index = [...square.parentElement.children].indexOf(square);
      const row = Math.floor(index / boardSize);
      const col = index % boardSize;
      return [row, col];
    }
  </script>
</body>
</html>
```

This game creates a square board and allows the player to tilt their device to paint in the squares one by one, until all squares have been painted. The tilt controls are handled using the `deviceorientation` event, and the board is created using HTML and CSS. The game keeps track of the current square being painted and the number of unfilled squares left, and displays an alert when the game is complete. Feel free to modify the code and styles to fit your needs.