One of the first games I made using Xojo was a clone of Atari Tank (based on the version included with the Combat Atari 2600 cartridge).

The core of Tank served as the basis for the XojoWars game contest, where it was re-imagined as a space battle.

Tank is a rather simple game and really needs to be two-players, which is why I added the ability for two people to play it over the network using UDPSocket. This version, which I called NetTank, is available on GitLab.

On the mobile side, I’ve made a 2048 sliding-tiles game and Turtle, which I suppose is kind of an infinite version of Frogger.

However, I’ve had the most fun making clones of Asteroids and Space Invaders. I wrote some about Invaders in xDev Magazine last year, but at some point I’ll get it enhanced enough to share in a blog post.

With that lengthy pre-amble I can now share my game for this month’s project, which is a clone of Asteroids that I uncreatively call Space Rocks. Although an older version of this game has been included with the Xojo examples for several years, this is an updated version with some new features:

• Smaller ship to better match proportions of the rocks.
• Improved ‘heartbeat’ sound.
• High Score is saved and restored.
• Level increases as you clear all the rocks, which adds even more rocks that also move faster.
• Command or Shift key now work for firing missiles.

Yes, 14340 is my high score. So far. I dare you to beat it!

The full project is on GitHub: https://github.com/paullefebvre/SpaceRocks

Keep in mind that you don’t have to make an arcade-style game. Strategy and turn-based games are a lot of fun and also great candidates for Xojo. For reference, take a look at the web-based Cosmic Trader game that Ricardo made last year. A platform-style or maze game might also be interesting. I can’t wait to see (and play) what you make!

Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon @lefebvre@hachyderm.io.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Year of Code Project

• Year of Code: Kickoff
• January Project: Desktop Apps | Forum Discussion
• February Project: Database Apps | Forum Discussion
• March Project: Web Apps | Forum Discussion
• April Project: User Interface | Forum Discussion
• May Project: Mobile Apps | Forum Discussion
• June Project: Code Sharing | Forum Discussion
• July Project: Charting | Forum Discussion
• August Project: Console Apps | Forum Discussion
• September Project: Games | Forum Discussion
• October Project: Multi-Platform | Forum Discussion
• November Project: PDF | Forum Discussion

How to Play:

Each month we’ll announce a new theme and share an example project of our own. Share your projects to the Xojo Forum thread for that month via GitHub (all the links you need are posted above ↑ ). Learn how to use Xojo and GitHub.

The Prizes:

Monthly winners get $100 at the Xojo store. Every month you submit a project is another chance to win the grand prize. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite and will be announce in December. Learn more about the prizes.

Quiziverse is designed to engage users with time-limited questions across various categories, making it a fun and interactive way to test knowledge. The application leverages a SQLite database as the backend for all data storage.

Here are some of the key features of Quiziverse:

• Admin Area: The app includes a secure admin area, allowing administrators to manage categories and questions easily. Admins can add, edit, or delete questions and categories to keep the trivia fresh and exciting.
• Scoreboard: A dynamic scoreboard keeps track of player scores in real-time, fostering a competitive spirit among users. Players can see how they stack up against others, adding an element of fun to the experience.
• Time-Limited Questions: Each question comes with a timer, challenging players to think quickly and answer before time runs out. This feature adds to the intensity of the game and keeps players on their toes.
• Import JSON Files: To make it easy for admins to add new content, Quiziverse includes a function to import JSON files containing new categories and questions. This feature simplifies content management and allows for quick updates.
• Mobile Optimized Design: Understanding the importance of accessibility, Quiziverse is designed to be mobile-friendly. Players can join the trivia challenge from their smartphones or tablets for a seamless experience.

Here’s a sneak peek of the Quiziverse interface:

You can find the complete source code for Quiziverse on GitHub, along with detailed documentation to help you get started.

Stay tuned for more exciting projects as we continue our Year of Code 2025 journey!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Year of Code Project

• Year of Code: Kickoff
• January Project: Desktop Apps | Forum Discussion
• February Project: Database Apps | Forum Discussion
• March Project: Web Apps | Forum Discussion
• April Project: User Interface | Forum Discussion
• May Project: Mobile Apps | Forum Discussion
• June Project: Code Sharing | Forum Discussion
• July Project: Charting | Forum Discussion
• August Project: Console Apps | Forum Discussion
• September Project: Games | Forum Discussion
• October Project: Multi-Platform | Forum Discussion
• November Project: PDF | Forum Discussion

How to Play:

Each month we’ll announce a new theme and share an example project of our own. Share your projects to the Xojo Forum thread for that month via GitHub (all the links you need are posted above ↑ ). Learn how to use Xojo and GitHub.

The Prizes:

Monthly winners get $100 at the Xojo store. Every month you submit a project is another chance to win the grand prize. The grand prize is $250 cash plus a Xojo Pro license and a year of GraffitiSuite and will be announce in December. Learn more about the prizes.

By the end of this tutorial, you will learn how to:

• Create a desktop game application in Xojo
• Use DesktopCanvas for game board rendering
• Implement game logic and state management
• Handle user interactions
• Add visual effects and animations

Setting Up the Project

Launch Xojo and Create a New Project

• Open Xojo IDE
• Select “Desktop” project type
• Set an Application Name (e.g., “TicTacToe”)
• Click “Create”

Creating the TicTacToeGame Custom Control

To have a clear and modular code structure, the game logic and user interface will be implemented in a subclassed DesktopCanvas control.

Here are several key advantages for this approach:

• Encapsulation: It neatly bundles all the game’s logic (like checking for wins or handling player turns) and visual elements (drawing the board, animating moves) into a single, self-contained unit. This makes your code cleaner, easier to understand, and simpler to maintain. You can reuse this control in other projects without rewriting everything.
• Organization: A custom control promotes better code organization by separating the game’s functionality from the rest of your application’s code. This reduces complexity, especially if your application grows larger and includes other features.
• Reusability: Once you’ve created the TicTacToeGame control, you can easily reuse it in other Xojo projects. Just drag and drop it onto a window!
• Abstraction: The custom control provides an abstraction layer. The rest of your application doesn’t need to know the internal workings of the TicTacToe game; it only needs to interact with the control’s interface (like starting a new game or getting the current score). This makes it easier to modify or update the game logic without affecting other parts of your application.

Now, here are the steps to create this custom control based on DesktopCanvas:

1. Click the “Insert” menu
2. Select “Class”
3. Name the class “TicTacToeGame”
4. Set the “Super” to “DesktopCanvas”

TicTacToeGame Class Structure

First, we start by defining some important constants and properties that will be used by the game class.

Constants

1. Private Const kBoardSize as Number = 3
   • Defines the grid dimensions (3×3)
   • Used for iterating through board cells
   • Provides flexibility for potential future grid size changes
2. Private Const kCellsPadding as Number = 40
   • Controls spacing around X and O symbols
   • Ensures symbols don’t touch cell borders
   • Provides visual breathing room in cell drawings

Properties

Game State Properties

1. Public Property boardState(2,2) As Integer
   • 2D array representing game board
   • Values:
     • 0 = Empty cell
     • 1 = Player X
     • 2 = Player O
2. Public Property currentPlayer As Integer = 1
   • Tracks current turn
   • 1 = Player X
   • 2 = Player O
3. Public Property isGameOver As Boolean = False
   • Indicates game completion status
   • Prevents further moves after game ends

Rendering Properties

Public Property CellHeight As Integer
Get
  Return Height / 3
End Get

Set
  
End Set
End Property

Public Property CellWidth As Integer
Get
  Return Width / 3
End Get

Set
  
End Set
End Property

1. CellHeight, CellWidth As Integer
   • Computed properties
   • Dynamically calculate cell dimensions based on canvas size
   • Divide width/height by 3 for equal grid cells
2. ColorBoard, ColorX, ColorOAs Color
   • Store color schemes for board elements
   • Support dark/light mode themes

Animation Properties

1. Public Property animationProgress As Double
   • Tracks symbol drawing animation
   • Ranges from 0 to 1
   • Controls symbol scaling during placement
2. Public Property animationTimer As Timer
   • Manages animation timing
   • Triggers smooth symbol rendering

Interaction Tracking

1. Public Property HoverCol As Integer = -1and Public Property HoverCol As Integer = -1
   • Track mouse position over grid
   • Enable hover effect on empty cells
   • Provide visual feedback during gameplay

Scoring Properties

1. scoreX and scoreOAs Integer
   • Track win counts for each player
   • Updated after each game

The constants and properties defined above will be crucial in the next steps, allowing us to implement the key features: encapsulation of game logic and rendering, flexible customization, responsive dynamic sizing and interactions, and an enhanced user experience through animations and hover effects.

Event Definitions

To make sure our game class is complete, we will create two custom event definitions that will be used later throughout the game.

GameStatus Event

Event GameStatus(info As String, playerTurn As String = "", scoreX As Integer, scoreO As Integer)

• Purpose: Tracks and communicates the current state of the game
• Parameters:
  1. info: A string describing the current game status
  2. playerTurn: Optional parameter indicating which player’s turn it is
  3. scoreX: Current score for Player X
  4. scoreO: Current score for Player O

GameOver Event

Event GameOver(result As String, scoreX As Integer, scoreO As Integer)

• Purpose: Signals the conclusion of the game with a winner or draw
• Parameters:
  1. result: A string describing the game’s final outcome (e.g., “X Wins”, “O Wins”, “Draw”)
  2. scoreX: Final score for Player X
  3. scoreO: Final score for Player O

Event Handlers in Tic-Tac-Toe Game

Closing Event

Sub Closing() Handles Closing
  // This event ensures that the animation timer is properly disabled and its handler is removed to prevent memory leaks or unexpected behavior.
  // Clean up the animation timer when the control is closing
  If animationTimer <> Nil Then
    animationTimer.Enabled = False
    RemoveHandler animationTimer.Action, AddressOf AnimationStep
    animationTimer = Nil
  End If
End Sub

• Ensures clean resource management
• Disables and removes timer to prevent memory leaks
• Called when the control is being destroyed

MouseDown Event

Function MouseDown(x As Integer, y As Integer) Handles MouseDown as Boolean
  // This event handles mouse click actions on the game board.
  // It checks if the game is over; if not, it calculates the row and column of the click.
  // If the clicked cell is empty, it records the player's move, checks for a winner, and toggles the current player.
  
  // Handle mouse clicks on the game board
  If isGameOver Then
    Return True
  End If
  
  // Calculate the row and column based on the click position
  Var row As Integer = y \ CellHeight
  Var col As Integer = x \ CellWidth
  
  // If the clicked cell is empty, make a move
  If boardState(row, col) = 0 Then
    boardState(row, col) = currentPlayer
    StartAnimation(row, col)
    
    // Reset hover position after a move
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the affected cell
    Refresh(col * CellWidth, row * CellHeight, CellWidth, CellHeight)
    
    // Check for a winner or a draw
    Var winner As Integer = CheckWinner()
    If winner > 0 Then
      UpdateScore(winner)
      GameStatus("Player " + PlayerSymbol(winner) + " wins!", scoreX, scoreO)
      isGameOver = True
      GameOver("Player " + PlayerSymbol(winner) + " wins!", scoreX, scoreO)
      
      // Refresh the entire board to show the winning line
      Refresh(True)
    ElseIf Me.IsBoardFull() Then
      GameStatus("It's a draw!", scoreX, scoreO)
      isGameOver = True
      GameOver("Draw", scoreX, scoreO)
    Else
      // Switch to the other player
      currentPlayer = If(currentPlayer = 1, 2, 1)
      GameStatus("Player " + PlayerSymbol(currentPlayer) + "'s turn", PlayerSymbol(currentPlayer), scoreX, scoreO)
    End If
  End If
  
  Return True
End Function

• Handles player moves
• Validates move legality
• Checks for win/draw conditions
• Switches players

MouseExit and MouseMove Events

Sub MouseExit() Handles MouseExit
  // This event is triggered when the mouse cursor exits the game board area.
  // It clears the hover effect to avoid leaving any visual artifacts on the board when the mouse is moved away.
  
  If hoverRow >= 0 And hoverRow < kBoardSize And hoverCol >= 0 And hoverCol < kBoardSize Then
    Var oldHoverRow As Integer = hoverRow
    Var oldHoverCol As Integer = hoverCol
    
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the cell that was previously hovered
    Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
  End If
End Sub

Sub MouseMove(x As Integer, y As Integer) Handles MouseMove
  // This event handles mouse movement over the game board.
  // It updates the hover effect when the mouse moves to a new cell, providing visual feedback.
  
  If Not isGameOver Then
    Var newHoverRow As Integer = y \ CellHeight
    Var newHoverCol As Integer = x \ CellWidth
    
    If newHoverRow <> hoverRow Or newHoverCol <> hoverCol Then
      Var oldHoverRow As Integer = hoverRow
      Var oldHoverCol As Integer = hoverCol
      
      hoverRow = newHoverRow
      hoverCol = newHoverCol
      
      // Refresh the old hover cell (if it was valid)
      If oldHoverRow >= 0 And oldHoverRow < 3 And oldHoverCol >= 0 And oldHoverCol < 3 Then
        Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
      End If
      
      // Refresh the new hover cell
      Refresh(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

• Provides visual hover feedback
• Tracks mouse movement across grid
• Refreshes only changed cells

Opening Event

Sub Opening() Handles Opening
  // This event initializes the board colors based on the current system theme (dark mode or light mode) and starts a new game.
  
  // Set up colors of the board lines, for the X's and O's
  If Color.IsDarkMode = True Then
    ColorBoard = Color.RGB(178, 161, 149)
    ColorX = Color.RGB(228, 182, 88)
    ColorO = Color.RGB(253, 161, 97)
  Else
    ColorBoard = Color.RGB(130, 110, 92)
    ColorX = Color.RGB(228, 182, 88)
    ColorO = Color.RGB(253, 161, 97)
  End If
  
  NewGame()
End Sub

• Initializes color theme
• Supports dark and light modes
• Starts a new game automatically

Paint Event

Sub Paint(g As Graphics, areas() As Rect) Handles Paint
  // This event is responsible for drawing the game board, hover effects, player symbols (X's and O's), and the winning line.
  // It is called whenever the game board needs to be redrawn.
  
  // Draw the board
  g.DrawingColor = ColorBoard
  g.DrawLine(Width/3, 0, Width/3, Height)
  g.DrawLine(2*Width/3, 0, 2*Width/3, Height)
  g.DrawLine(0, Height/3, Width, Height/3)
  g.DrawLine(0, 2*Height/3, Width, 2*Height/3)
  
  // Draw hover effect
  DrawHoverEffect(g)
  
  // Draw X's and O's
  g.PenSize = 8
  For row As Integer = 0 To 2
    For col As Integer = 0 To 2
      If boardState(row, col) = 1 Then
        DrawX(g, row, col)
      ElseIf boardState(row, col) = 2 Then
        DrawO(g, row, col)
      End If
    Next
  Next
  
  // Draw winning line if the game is over
  If isGameOver Then
    DrawWinningLine(g)
  End If
End Sub

• Renders game board
• Draws grid lines
• Manages visual game state
• Supports dynamic rendering

Animation and Drawing Methods

1. AnimationStep

Public Sub AnimationStep(sender As Timer)
  // This method is called by the animation timer (animationTimer property) to progress the animation of a newly placed symbol.
  // It increments the animation progress and stops the timer once the animation is complete.
  
  // Progress the animation
  animationProgress = animationProgress + 0.1
  If animationProgress >= 1 Then
    animationTimer.Enabled = False
    animationProgress = 1
  End If
  
  // Refresh only the cell being animated
  Refresh(lastPlayedCol * CellWidth, lastPlayedRow * CellHeight, CellWidth, CellHeight)
  
  // If the animation is complete, stop the timer
  If animationProgress >= 1 Then
    animationTimer.Enabled = False
  End If
End Sub

• Manages symbol placement animation
• Gradually scales symbol from 0 to 1
• Updates only the recently played cell

2. DrawX and DrawO

Sub MouseExit() Handles MouseExit
  // This event is triggered when the mouse cursor exits the game board area.
  // It clears the hover effect to avoid leaving any visual artifacts on the board when the mouse is moved away.
  
  If hoverRow >= 0 And hoverRow < kBoardSize And hoverCol >= 0 And hoverCol < kBoardSize Then
    Var oldHoverRow As Integer = hoverRow
    Var oldHoverCol As Integer = hoverCol
    
    hoverRow = -1
    hoverCol = -1
    
    // Refresh only the cell that was previously hovered
    Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
  End If
End Sub

Sub MouseMove(x As Integer, y As Integer) Handles MouseMove
  // This event handles mouse movement over the game board.
  // It updates the hover effect when the mouse moves to a new cell, providing visual feedback.
  
  If Not isGameOver Then
    Var newHoverRow As Integer = y \ CellHeight
    Var newHoverCol As Integer = x \ CellWidth
    
    If newHoverRow <> hoverRow Or newHoverCol <> hoverCol Then
      Var oldHoverRow As Integer = hoverRow
      Var oldHoverCol As Integer = hoverCol
      
      hoverRow = newHoverRow
      hoverCol = newHoverCol
      
      // Refresh the old hover cell (if it was valid)
      If oldHoverRow >= 0 And oldHoverRow < 3 And oldHoverCol >= 0 And oldHoverCol < 3 Then
        Refresh(oldHoverCol * CellWidth, oldHoverRow * CellHeight, CellWidth, CellHeight)
      End If
      
      // Refresh the new hover cell
      Refresh(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

• Draws X and O symbols with animation
• Centers symbol in cell
• Scales symbol based on animation progress

3. DrawHoverEffect

Public Sub DrawHoverEffect(g As Graphics)
  // This method draws a semi-transparent hover effect over the cell that the mouse is currently hovering over.
  // It only draws the effect if the game is not over and the hovered cell is empty.
  
  If Not isGameOver And hoverRow >= 0 And hoverRow < 3 And hoverCol >= 0 And hoverCol < 3 Then
    If boardState(hoverRow, hoverCol) = 0 Then
      g.DrawingColor = Color.RGB(255, 255, 255, 250) // Semi-transparent white
      g.FillRectangle(hoverCol * CellWidth, hoverRow * CellHeight, CellWidth, CellHeight)
    End If
  End If
End Sub

• Provides visual feedback on hoverable cells
• Applies semi-transparent white overlay
• Only affects empty, unplayed cells

4. DrawWinningLine

Public Sub DrawWinningLine(g As Graphics)
  // This method draws a semi-transparent green line over the winning combination on the board if a player has won.
  
  // Draw the winning line if there is a winner
  If winningLine.Count = 6 Then
    g.DrawingColor = Color.RGB(0, 255, 0, 128) // Semi-transparent green
    g.PenSize = 2
    
    Var startX As Integer = winningLine(1) * cellWidth + cellWidth / 2
    Var startY As Integer = winningLine(0) * cellHeight + cellHeight / 2
    Var endX As Integer = winningLine(5) * cellWidth + cellWidth / 2
    Var endY As Integer = winningLine(4) * cellHeight + cellHeight / 2
    
    g.DrawLine(startX, startY, endX, endY)
  End If
End Sub

• Draws a semi-transparent green line
• Highlights the winning combination

Game Logic Methods

1. CheckWinner

Public Function CheckWinner() As Integer
  // This method checks the board for a winner by evaluating rows, columns, and diagonals.
  // It returns the winning player (1 or 2) or 0 if there is no winner.
  
  
  // Check rows
  For i As Integer = 0 To kBoardSize - 1
    If boardState(i, 0) <> 0 And boardState(i, 0) = boardState(i, 1) And boardState(i, 1) = boardState(i, 2) Then
      winningLine = Array(i, 0, i, 1, i, 2)
      Return boardState(i, 0)
    End If
  Next
  
  // Check columns
  For j As Integer = 0 To 2
    If boardState(0, j) <> 0 And boardState(0, j) = boardState(1, j) And boardState(1, j) = boardState(2, j) Then
      winningLine = Array(0, j, 1, j, 2, j)
      Return boardState(0, j)
    End If
  Next
  
  // Check diagonals
  If boardState(0, 0) <> 0 And boardState(0, 0) = boardState(1, 1) And boardState(1, 1) = boardState(2, 2) Then
    winningLine = Array(0, 0, 1, 1, 2, 2)
    Return boardState(0, 0)
  End If
  
  If boardState(0, 2) <> 0 And boardState(0, 2) = boardState(1, 1) And boardState(1, 1) = boardState(2, 0) Then
    winningLine = Array(0, 2, 1, 1, 2, 0)
    Return boardState(0, 2)
  End If
  
  winningLine.ResizeTo(-1)
  Return 0 // No winner yet
End Function

• Scans board for winning combinations
• Returns winning player or 0
• Stores winning line coordinates

2. IsBoardFull

Public Function IsBoardFull() As Boolean
  // This method checks if the board is completely filled with no empty cells.
  // It returns true if the board is full, otherwise false.
  
  // Check if the board is full (no empty cells)
  For i As Integer = 0 To kBoardSize - 1
    For j As Integer = 0 To kBoardSize - 1
      If boardState(i, j) = 0 Then
        Return False
      End If
    Next
  Next
  Return True
End Function

• Checks if all cells are occupied
• Determines if game is a draw

3. NewGame

Public Sub NewGame()
  // This method resets the game state to start a new game.
  // It clears the board, resets the current player to Player 1, and updates the game status.
  
  // Reset the game state for a new game
  For i As Integer = 0 To 8
    boardState(i \ 3, i Mod 3) = 0
  Next
  currentPlayer = 1
  isGameOver = False
  animationProgress = 1
  If animationTimer <> Nil Then
    animationTimer.Enabled = False
  End If
  GameStatus("Player " + PlayerSymbol(currentPlayer) + "'s turn", scoreX, scoreO)
  winningLine.ResizeTo(-1)
  Refresh()
End Sub

• Resets game to initial state
• Clears board
• Resets player turn

4. UpdateScore

Public Sub UpdateScore(winner As Integer)
  // This method updates the score for the winning player by incrementing the respective score counter.
  
  // Update the score for the winning player
  If winner = 1 Then
    scoreX = scoreX + 1
  ElseIf winner = 2 Then
    scoreO = scoreO + 1
  End If
End Sub

• Increments score for winning player

Utility Methods

1. PlayerSymbol

Public Function PlayerSymbol(player As Integer) As String
  // This method returns the symbol ('X' or 'O') corresponding to the player number (1 or 2).
  Return If(player = 1, "X", "O")
End Function

• Converts player number to symbol

2. StartAnimation

Public Sub StartAnimation(row As Integer, col As Integer)
  // This method initializes and starts the animation for a newly placed symbol,
  // by setting the target cell and resetting the animation progress.
  
  // Start the animation for a newly placed symbol
  lastPlayedRow = row
  lastPlayedCol = col
  animationProgress = 0
  
  If animationTimer = Nil Then
    animationTimer = New Timer
    animationTimer.Period = 16 // equivalent of 60 FPS
    AddHandler animationTimer.Action, AddressOf AnimationStep
  End If
  
  animationTimer.Enabled = True
  animationTimer.RunMode = Timer.RunModes.Multiple
End Sub

• Initializes symbol animation
• Sets up timer for smooth rendering

Usage Instructions

To use the TicTacToeGame control in your Xojo project:

1. Drag and Drop: Drag the TicTacToeGame icon (it should look like a small canvas) from the Navigator (the left side of the IDE) onto your Window1 or any other window you want to use.
   • A TicTacToeGame instance will appear on the window. You can resize and position it as needed.
2. Initialize: While not strictly required, you might want to initialize the game in the Window1.Open event handler. This ensures the game is ready to play as soon as the window opens. You can do this by adding the following code to the Window1.Open event:
   // Assuming 'TicTacToeGame1' is the name of your control instance on the window
TicTacToeGame1.NewGame
   This will call the NewGame method of your custom control, setting up the board and starting a new game.
3. Run the Project: Run your Xojo project. You should see the TicTacToe board on your window, ready to play!

I highly suggest downloading the complete TicTacToe Xojo project for the game. If you find anything unclear, refer to this tutorial for explanations. Download the Xojo project.

Next Steps:

Congratulations! You’ve successfully built a fully functional, modern tic-tac-toe game in Xojo. This project is a great foundation for exploring more advanced game development concepts, animations and how to make custom UI elements based on Xojo’s powerful DesktopCanvas control.

Now that you understand the basics, here are some ideas to take your TicTacToe game to the next level:

• Artificial Intelligence (AI): Implement a simple AI opponent so players can play against the computer. You could start with a random move generator and then explore more sophisticated algorithms like Minimax. Xojo already provides fully working AI integration examples.
• Different Game Modes: Add options for different board sizes (e.g., 4×4, 5×5) or variations of tic-tac-toe.
• Online Multiplayer: Enable players to challenge each other online using Xojo’s networking capabilities.
• Enhanced UI/UX: Improve the user interface with custom graphics, sound effects, and a more polished look and feel. Consider adding a timer.
• Go Multiplatform: Port the TicTacToeGame class to Mobile and Web projects.

We encourage you to experiment, get creative, and explore these possibilities. Share your creations and connect with other Xojo developers in the forums to learn and grow together. Happy coding!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

The reason to create this kind of project, as the maintainer of the Xojo Web framework, is to find pain points and bugs in larger projects, as the issue reports I normally work with are very specific sample projects demonstrating a bug. The next Xojo release, 2024r3, will come with some bug fixes I found while building Cosmic Trader.

Final Result

Let’s begin at the end. Give the game a try and then come back to this blog post. It’s a very simple space trading game, don’t expect too much from it, but I hope you enjoy it.

It can be played from the following URL:
https://cosmictrader.rcruz.es

The Challenge

Create a simple game using Xojo Web, without writing a line of JavaScript, or even using the Web SDK.

In addition, while all this could be just a couple of WebListBox and WebButton controls, I really wanted this game to look like an actual game. As you can see in the screenshots, unless you check the code, nobody will notice (or care!) it’s a Xojo Web application.

As you can imagine, Xojo Web was not created with the idea of building web based games. In order to make it easier for the developer, everything is processed server side: When you press a button, the browser will send a notification to the server, your code written in Xojo will be executed and, finally, the response will be sent back to the browser.

That’s the known knowns. I knew the latency would be a problem, but I’ve found more.

What I’ve Enjoyed

Implementing the first prototype was really easy using the tools Xojo Web offers. For example, in the prototype, instead of the custom popover I ended up building for buying and selling, I just used some contextual menus:

You can go very far and prototype your idea very quickly this way. This helped me to deploy and share the game with a few friends and gather some initial feedback.

Once you have the game mechanics, you can iterate as much as you want until the game is ready. The welcome screen with the game logo wasn’t added until very late. Just so you can compare, this is how the current version looks:

Much better!

I’ve really enjoyed being able to use Containers for building custom controls and reusing them. Also, being able to just drop some images into the IDE and assign them to image viewers is very pleasant.

From the IDE preview, it’s deadly easy to identify where my ship entity is, click on it, then edit the code if needed:

Navigating through the project is a joy compared to jumping through piles of code in plain text files.

I’ve also found having Control Sets useful, allowing me to implement the Pressed event just once for all the planets, for example.

Roadblocks and How I Handled Them

That said, I found some difficulties. All of them were due the nature of web projects. When you travel from one planet to another, you will hear an engine sound. It would be much (much!) easier to know when I should stop the sound in a Desktop or a Mobile project.

Having to deal with latency means I had to use a timer and guess more or less how many milliseconds is reasonable before stopping the sound. Using the same amount of time as the animation would cause the sound to continue playing after the ship had arrived at its destination, again due the latency.

Where I spent most of the time was optimizing the images. Specifically, delivering the images. When you play the game locally, everything works pretty fast. I found this flickering issue once I deployed the game for the first time using the custom popovers:

This is something that you just don’t need to think about with the typical database application you normally build with Xojo Web. But if you build a lot of images on the fly, it will mean the browser will have to download them again and again.

In order to optimize it, instead of using a WebImageViewer.Image property, you could store WebImage instances. Using WebImageViewer.URL pointing to the WebImage.URL property of those instances will make the browser first check if it has downloaded that URL before. If so, bingo! It will reuse the image without having to re-download it again.

If you go back to the game, cache is the reason behind the “New Game” button, from the welcome screen, and the “Sell Everything” button having the same width. It wasn’t a coincidence, that means a browser cache hit.

Last but not least, when I shared the URL with some friends, they told me it didn’t look great on mobile. So I had to change the stats a bit so they fit in a mobile screen. While in this case it wasn’t a big deal, at Xojo we know making responsive web applications must be easier, and we will improve the workflow in future releases.

It would be much easier to use the Web SDK for some of those controls. If I was creating a game seriously, I’d 100% personally prefer creating some custom controls to allow some code to run on the browser side, using the Web SDK with JavaScript or TypeScript, to avoid dealing with latency or round-trips.

Using AI for Creativity

I personally don’t find any joy using AI for coding. I always end up frustrated by how it hallucinates and keep proposing, very confidently, things that just don’t exist. I understand some might like it but, in the end, I just like coding.

But for a second brain and helping me with (my lack of) creativity… oh boy, that’s another story. The game idea came from a conversation with Claude AI. Initially, it came up with tons of features and ideas that would require me (and a team of another 100 people) to work on it for several years. I kept asking it to simplify it until I felt it was approachable:

After implementing the game mechanics, I felt the game didn’t make any sense. I mean, why 30 turns exactly? Why 5 planets? Why can’t I go somewhere else to trade? Why do I have to trade at all?… While it is still fiction, the AI wrote a reasonable background story that added some depth to the game. That’s what you will be reading when playing Cosmic Trader.

No spoilers, but there are still a few features and game mechanics, recommended by the AI, that I left for future releases.

While working on this game, I even had a little ant invasion at home. The AI came up with a multiplayer ant colony simulator game idea that I will probably never implement, but who knows!

For the logo, I had some spare credits to use with DreamStudio. I had to retouch it using Affinity Photo, but that’s it:

All in all, and while a team of real humans will always be much better, I reckon AI helped me a lot with this experiment.

Credits and Acknowledgements

I could focus on building the game thanks to using the Kenney game assets. The background music author is Dmitrii Kolesnikov, make sure to check his profile.

Thanks to Claude for being my second brain for this project. And, of course, thanks to Xojo. It wouldn’t be as fun without it.

Conclusion

I enjoyed building this project a lot. I learned things, and I fixed some bugs I found. Did you know you couldn’t add a WebStyle CSS transition without adding other styles? Me neither, but it will be fixed in Xojo 2024r3.

Happy coding!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

The way it works is that you have a grid of cells. The cells can turn from alive (on) to dead (off) depending on some simple rules:

1. Any live cell with two or three live neighbors survives.
2. Any dead cell with three live neighbors becomes a live cell.
3. All other live cells die in the next generation. Similarly, all other dead cells stay dead.

You start a game of life with your seed pattern and then see how it progress through multiple generations. Here is how the pattern “The R-pentomino” looks:

To use Life, draw a pattern in the grid using the mouse. There are several sample patterns on the Game of Life Wikipedia page. After drawing the pattern, click Start.

The Xojo project tracks the cells in a two-dimensional array and applies the rules to the array, creating a new array that is then drawn in a Canvas.

The primary method is called Life() and looks like this:

Public Sub Life()
  // Loop through all the cells and apply these rules.
  
  // https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life
  
  // 1. Any live cell With two Or three live neighbours survives.
  // 2. Any dead cell With three live neighbours becomes a live cell.
  // 3. All other live cells die In the Next generation. Similarly, 
  //    all other dead cells stay dead.
  
  // Start with a new blank cell grid and apply rules to it
  // based on the existing cell grid
  
  Var newCells(1, 1) As Boolean
  
  Var xMax As Integer = Cells.LastIndex(1)
  Var yMax As Integer = Cells.LastIndex(2)
  
  newCells.ResizeTo(xMax, yMax)
  
  For x As Integer = 0 To Cells.LastIndex(1)
    For y As Integer = 0 To Cells.LastIndex(2)
      Var neighborCount As Integer = CountNeighbors(x, y)
      
      If Cells(x, y) = True And (neighborCount = 2 Or neighborCount = 3) Then
        newCells(x, y) = True
      ElseIf Cells(x, y) = False And neighborCount = 3 Then
        newCells(x, y) = True
      End If
    Next
  Next
  
  GenerationCount = GenerationCount + 1
  Cells = newCells
  
End Sub

You can download the project here:

Life

Although this is a desktop project, it should be easily adaptable to other targets. I love to see what improvements the clever folks in the Xojo community can do. Some ideas include: use lots of colors for drawing, save a drawing to a file, reload a drawing from a file as a staring point. What enhancements would you like?

Share your modifications in the forum!

Anyway, one part of the game is that you have to roll a 10-sided die to calculate whether one of your ships successfully registers a hit on your opponent. Apparently this is something that can take a while to do as each player amasses more and more ships. Lucas realized this was ripe for automation and the day before the event brought his iPad over to show me a Numbers spreadsheet he had made that used random numbers to calculate combat rolls. Essentially you enter the number of ships at each combat level and does the appropriate number of rolls and tells you how many hits you registered.

It was a pretty clever bit of work, but not really appropriate for a spreadsheet. If you’ve even done consulting, you’re probably aware of the adage, “Excel is not a database”, because there is often a lot of work you can get converting creaky, error-prone Excel spreadsheets into full-featured apps. They same thing sort of applied here and I told Lucas that this was an impressive bit of work, but might be better suited as a Xojo app.

We then sat down together with my laptop and quickly put together a Xojo desktop app to calculate combat rolls. We decided to go with a Container that has controls to show the combat level, a field to enter the number of ships at that level and rolls results to verify accuracy.

Apparently, a roll counts as a hit if it matches or exceed the ship’s combat level. So a ship at level 10 only gets a hit if you roll a 10, but a ship at level 2 gets a hit if you roll a 2 or higher. We accomplished this with two methods:

Public Function Calculate() As Integer
  Var ships As Integer = ShipCountField.Text.ToInteger
  
  Var hits As Integer
  Rolls.RemoveAll
  
  For i As Integer = 1 To ships
    If DidItHit Then
      hits = hits + 1
    End If
  Next i
  
  DiceRollsLabel.Text = String.FromArray(Rolls, ",")
  
  Return hits
End Function

Private Function DidItHit() As Boolean
  Var diceRoll As Integer
  diceRoll = System.Random.InRange(1, 10)
  
  Rolls.Add(diceRoll.ToString)
  
  If diceRoll >= CombatLevel Then
    Return True
  Else
    Return False
  End If
End Function

Once we had it working, we realized a desktop app was not going to be useful because he was only going to bring his iPad to board game day. Unfortunately, being a school iPad, we cannot install apps on it so making an iOS app was out. Plus, other kids would want to use the app as well. Fortunately Xojo has lots of options. We decided to convert the desktop app to a web app instead, which would work in Safari on his iPad.

I quickly re-created the UI in a web project, copied over the code and it worked right away. I had him do some testing and when we were confident everything looked good, I set up a port forward on my eero so that he could access the web app when outside our wifi network.

All together, start to finish, this took us maybe an hour to do.

He told me they used it the entire day and it worked great. And the results? Lucas and another player tied for the win.

He did also offer a suggestion to add buttons to increase/decrease the number of ships as it was a bit tedious to type the numbers using the iPad. I’ll probably have him do that.

Download the project, if you’re interested.

Let’s start with the programming. For that we open Xojo and create a new desktop project. 

To do this we click on the Desktop tab. In the Application Name field we set the name of our application. If you have a Company you can set its name in the Company field. If we click on OK, the development environment appears. The window is divided into several sections. 

On the left we see a list of all Windows, Control elements, methods and properties that are include in our project. By default, a program window named Window1 is created. In the middle we see this window. At the moment it is still empty. The middle part is our working area where we will write the code. On the right side there is another menu. It contains the controls that can be easily selected with the mouse, dragged into the window and positioned there. If you don’t want to see them, you have to click on the “Library” button in the upper menu bar first.

By default, the icons are sorted by category. Let’s try it and drag a Generic Button into the window (Buttons section, 1st row of 3rd from left). If you don’t know which element you are currently looking at in the library, the window at the bottom right will help you. If you move the mouse over the individual controls in the library, you get a short explanation of the control in this window. If you do not see the window, go to the end of the library and move the grey bar a little bit upwards.

Now we take a look at the button that we have dropped into the window. We can position and adjust it. If we move the mouse over the button, a pencil appears in the lower right edge. If you click on that symbol you can change the title of the button. 

Above the library you will find two buttons in the menu. One is the Library button and the other is the Inspector button. If you click on the Inspector, you will see the properties for the element that we have selected in the main window where the library with the controls was before. We can view and change the properties here. For example, we can give the button in our window the caption „Hello World”. Here we can also use coordinates to determine where the button is located in the window and how big it is. You can switch between the Library and the Inspector by clicking on the corresponding button.

With Locking we can determine what should happen if we vary the size of the environment window. If we click on the locks, we can close and open them. When we close a lock, we can think of it as sticking the edge of the element to that side at that moment. If we close two opposite locks, our control will be scaled in this axis when the windows size changes.

If only one lock is closed in this axis, then when we scale the window, the element will be pulled in one direction, in the locked direction.

Above the main area of the development environment there is a menu bar with several icons. Click on the small plus. This opens a submenu. In this submenu we click on the first entry Event Handler. A list with several selection options opens.

To the right of the list we see a small description of the events. These events are called when something specific happens to this object, e.g. when the button is clicked (Action) or the mouse is over the object (MouseEnter). Then the code that was written before in the ActionEvent is executed.

Select the ActionEvent. This means that we now define what should happen when the button is clicked.

Hello World! 

After we have selected the ActionEvent, the code editor opens. Here we write the code that should be executed. As a test we write: 

MessageBox "Hello World"

Now click on the green play sign (Run) in the menu bar. This will compile your program and start it. 

Compiler:
Compiling means that your program is rewritten by the compiler into a language your computer can understand. That language is machine language, bit sequences of 0’s and 1’s. Now that it has compiled, the computer can understand and execute your program.

https://en.wikipedia.org/wiki/Compiler

Now press the button once and enjoy the moment!

Congratulations!

You wrote your first application! The command MessageBox opens a dialog. The text of this dialog we set in quotes, because it is a string. 

The User Interface 

AS we have now explored the Xojo environment a bit, let’s really get started with the program. First, we build our user interface.

For this we insert an edit field (TextField) from the library. There we will enter the numbers later. We give it the name “Input” in the Inspector. We still need an explanatory label that tells the user what to do. For this we take a label from the library and enter the following text in the Inspector: Enter a number between 1 and 100. We name the button in the Inspector “Test” and give it the title: “Test the number”.

Two labels from the library are positioned under this button. Their content will be deleted. In the Inspector, we give the upper label the name “Info” and the lower label the name “Tries”. Next to the lower label we place a label with the text „tries:“. Your window should now look similar to this.

Variables: King of Context 

The action in the program is started when the user enters a number and presses the button. That means we need the action event. This action event should first read the data from the window and store it in a variable.  Our number, which we get in the input, is to be stored in a variable “InputNumber” of the type Integer (integer).

Variable:
A variable is a place where we can store any value. This value can then be used in different places without knowing it exactly. For example, if we have a calculation x + 5 = result, then the result changes depending on what value x has. If x = 3 then the calculation would be interpreted as 3 + 5 and the result would take the value 8. However, X could just as well be 50, then the result would be 55. There are restrictions in the assignment of variables, because a variable has a type. In most programming languages, variables are distinguished by their type. For this reason, a text is stored with a different type than a number or a date.

https://en.wikipedia.org/wiki/Variable_(computer_science)

For this we declare the variable first, that means we create it. We write in the action event (please delete the old code before you enter this new code):

Dim InputNumber as integer

Now we also want to assign the value to this variable, because we only told the program until now that there should be one. The value assignment different from what you may be used to and goes from right to left. That means, the variable which should get the value stands on the left side of the equal sign. The expression that returns the value is on the right.

Because we use a text field for the input, the entered number is interpreted as text and is available to us as a character string. In order to work with it in the right way, we have to convert it from a string to a number first. This is done by the ToInteger method. ToInteger converts a text into an Integer Number. If we want a number of type double, that means a decimal number, we would use the ToDouble method.

InputNumber = Input.text.toInteger

With the previous command we assigned the correct value to „InputNumber”. Input.text addresses the Input control and accesses the property „text“ there.

At some point everyone has to make the decision

Now we want to test once whether the user has entered anything at all. We do this via a condition. In normal language we would say: If the input is empty, then say: “You must enter something”. That’s similar to how it is in programming.

If Input.Text="" Then
  MessageBox "You must enter something"
  Return
End If

In this case we actually have to look again at the string we read from the input field, because this way we can check if it is empty. The structure of a condition looks like this:

If Condition Then
Code that is executed when the condition is fulfilled
End If

The condition can decide not only whether two things are equal, but also, for example, whether they are larger or smaller. In the code we already recognise the command for the text output in a dialog box, because we have already used the message box.

The “Return” makes sure that we return to our window and can make another input. When “Return” is called in a code, the program returns to the place where it was called. Any code after a Return is no longer evaluated.

Now we want to test if the entered number is between 1 and 100. For this we need again an if-condition. We want to decide: If the entered number is less than 1 or the entered number is greater than one, then we want to indicate that the number is outside the valid range. For this we add the following lines to the code of our ActionEvent:

If InputNumber < 1 Or InputNumber > 100 Then
  MessageBox "Enter a number between 1 and 100"
  Return
End If

As in language, there is also an OR in programming. It checks whether at least one of the statements is true. We can visualise the OR with an example: I have to decide whether I have to go to work or not. I don’t have to go to work if it is a national holiday or if I am on vacation. In which cases do I have free time?

1. I have no vacation and it is not a holiday => false OR false => false=> have to work

2. I have vacation but it's not a holiday => true OR false => true => I have free time

3. I have no vacation but it is a holiday => false OR true => true => I have free time

4. I have vacation and it is a holiday => true OR true => true => I have free time

Except for case one, I have time off. By the way, if the first statement part is already true, the program jumps to the code part that is executed. It doesn’t even look at whether the other conditions would have been true as well.

In our case the condition is only not executed if the number is between 1 and 100.

Let’s give chance a helping hand

In order to check whether the entered number matches the random number, we must first create this random number. We need the random number only once per game. That means it has nothing to do in the ActionEvent of the button, because the button is triggered several times during a game. But we should use another event. The OpenEvent of the game window is suitable. We open the menu handler in the window and select the OpenEvent. This event runs as soon as the window is opened, in our case directly at the start. 

Now we have to figure out how to make it possible to create the number in the OpenEvent and still have access to it from the button’s ActionEvent. We can’t do this with a simple variable, as we have seen so far, because it is a local variable and you can only access it in the ActionEvent or method in which you created it. Therefore we need another way to store the number.  

We add the property to the project and name it randomNumber.The type should be integer again, because we only want to guess integers.

Property
A property is a variable that is bound to the window in which it was created. This means that it can be read and assigned values by all events or methods of the window. The names of methods, variables and properties must be a single word string. I like to use the camel case. This means that for multiple words you write the words together and capitalise the first letters of each word. For Example: randomNumberGenerator

Now we open the OpenEvent again and enter the following line there:

randomNumber= Rnd*100+1

The function rnd returns us a number with a lot of decimal places, which lies between 0 and 1 (0 is a possible value). Because we want to have a number between 1 and 100, we multiply it by 100 so that the number can take values from 0 to 99 and then +1 so that the number is not 0 and our value range is now between 1 and 100. Because our number is of type integer, all decimal places are truncated and we don’t have to care about them. An example clarifies it:

Rnd gives us the number 0.0123919

Rnd * 100 would be 1.23919

Rnd * 100 + 1 would be 2.23919

Integer cuts off the decimal places, it is the number 2. 

The random number is stored in the RandomNumber property after it is calculated. Now we can make further queries in the ActionEvent of the button. There we continue to query what happens if our entered number is not our random number. The character for unequal is <>. This is easy to remember because the number must be smaller or larger.

If randomNumber <> InputNumber Then

In this condition we have to make a distinction again, because we want to inform in the info text whether our input number is larger or smaller than the random number. For this we build an If-condition into the execution area of the If-condition. We want to display the input number in the label with the name “Info”, in addition to the message whether a number is larger or smaller. For this we can write e.g. the following line.

info.Text=InputNumber.ToString+" is to big"

We convert our number back to a string using ToString. The + concatenates two strings. Here we have to pay attention to the fact that the space is also a character and therefore has to be written.

So we can write:

If randomNumber <> InputNumber Then
  If InputNumber > randomNumber Then
    info.Text=InputNumber.ToString+" is to big"
  End If
   If InputNumber < randomNumber Then
    info.Text=InputNumber.ToString+" is to small"
   End If
End If

What else

In language usage, there is not only an if then but also an else. Example:

If I go to the theatre then
        I put on a great dress
Else
        I put on a jogging suit

You can already see from the way it is written down that we can almost use the idea behind it one by one in our program.

We have already handled the case where the random number and the input number are not equal. We are still missing the case that the two are equal.This we can now simply put into an else part of this condition, because if it is not unequal, then it must be equal.That’s why the whole statement now looks like this:

If randomNumber <> InputNumber Then
  If InputNumber > randomNumber Then
    info.Text=InputNumber.ToString+" is to big"
  End If
  If InputNumber < randomNumber Then
    info.Text=InputNumber.ToString+" is to small"
  End If
Else
  info.Text="Congratulations! " + InputNumber.ToString + " is the number you are looking for"
End If

Cosmetic Corrections

Now we start the game!

It works! Congratulations

But before you get addicted to your own program, we should make the program a bit more attractive and user-friendly.

How many tries did I need?

To do this, we first specify how many attempts we needed to find the number. We want to display this in the label with the name Tries.

We want to increase the number by one over the duration of the game over and over again, exactly when a valid number was entered, so we have to create a property again. This property is of type Integer and is called “NumberOfTries”. The type is again Integer. As we want this to be listed when the entered number is valid, we write:

NumberOfTries = NumberOfTries + 1
Tries.Text=NumberOfTries.ToString

Empty the field and test the number with Return

Now we would like to make the input field empty again when we have tested a number. Therefore we write at the very end of the ActionEvent

Input.Text=""

This will overwrite the text of the input with an empty string.

Next, when we have entered a number, we want to be able to simply press Enter to confirm without having to press the button over and over again. For this reason, we set the button as default button. That means that when we press enter the button is clicked and the code runs. For this we switch on the property Default in the inspector of the button.

Then confirming the number with Enter will work.

Now add color to the game

You can now also polish the layout a bit. To change the appearance of a text you can change settings of the individual labels in the inspector. You could change the text color depending on whether the number is greater than, less than or equal to the number you are looking for. You can do this with this line directly in front of the respective output.

info.TextColor = RGB(0 , 0 , 255)

The color values are given as RGB, this would now color the text in blue for example.

You can also change the background color of the window. For this you can select a Background Color in the Inspector of the window under Background. For the background color to be displayed, you have to activate Has Background Color. In the Backdrop you can add a graphic to the background.

New game <> new window?

Now we don’t want to have to close the window every time we want to start a new game. Therefore we add a button to the layout. We call this new game. When this button is pressed, a new random number should be generated, which is then stored in the Random Number property.The tries should be set to 0, the info window is flushed and the input is cleared.

Because we have already written the code to create a random number in this area and we want to save ourselves duplicate work when programming, we go to the OpenEvent from the window and select the code. Then we click on it with the left mouse button. In the context menu we will be offered some options on what to do with the selected code. 

We click on Convert to Method.

A new code window opens. Under Name we enter RandomNumberGenerate.

Now in the OpenEvent we can read the following line: RandomNumberGenerate()

This is the call of our own method. A method is a snippet of code which could be inserted at this point, but since we need it several times, we have source out so that we don’t have to type so much and so the program text is more tidy.

We now see the method on the left side menu. We can click on it and see the original content of the old OpenEvent again.

Now we can also insert the function in the ActionEvent of the new button, so that it now looks like this.

Input.Text=""
Info.Text=""
NumberOfTries=0
Tries.Text="0"
RandomNumberGenerate

In the call RandomNumberGenerate we can remove the parentheses.

Now our game is ready.

I wish you a lot of fun and success with your programming!

Stefanie Juchmes studies computer science at the University of Bonn. She came in touch with Xojo due to the work of her brother-in-law and got a junior developer position in early 2019 at Monkeybread Software. You may have also read her articles in Xojo Developer Magazine. 

I made a version of Combat in Xojo a while ago (it’s included in the Xojo examples folder in the Download) so I figured I would start there. To provide network capabilities to a game, you generally want to go with something fast and that means UDP (User Datagram Protocol), which is provided by the UDPSocket. There’s also a UDPSocket example included with Xojo which I used as a reference.

To start I first decided what data I wanted to send back and forth. I narrowed it down to these actions:

• JoinAction
• MoveAction
• HitAction

These are all sent as JSON by broadcasting to a Multicast group.

JoinAction is sent when a game is first started to allow the two client NetTank apps to negotiate who is player 1 and who is player 2. The two actions are “ready” and “player2”.

MoveAction contains the action that your tank just did to send to the other client so it can update its display. Initially I was just sending actions for “forward”, “left”, “right” and “fire”. But because UDP does not guarantee messages are received, the tanks would sometimes get out of sync if a lot of moves were sent quickly when there was network congestion. So I instead decided to send the actual xy coordinate and rotation angle for a forward move so that should a message get lost it will at least have the correct information in a future forward message.

When a tank is hit, HitAction contains the new location for the tank (it is moved to a random spot on the screen when hit) to send to the other client.

Because the Combat game already ran using Timers, I didn’t really have to change much of the original Combat game code for NetTank. I added a UDPSocket to the main CombatWindow and in its DataAvailable event I have the code to check for the messages and update the Tank objects as needed.

I also had to make a few tweaks to the main code to send the JSON messages for movements, hits and to properly identify which tank to move.

To try the game you’ll need to run it on two different computers. The first one that starts becomes player 1 (blue) and the second one is player 2 (red). Use the arrow keys to move the tanks and press the space bar to fire.

Download the project or check it out on GitLab.

Add your #JustCode project to the week 10 forum conversation.

Download and check out earlier projects:

• Week 9: Quote Web Service
• Week 8: JumpStart App Launcher
• Week 7: Pitch Tracker
• Week 6: Bubble Popper
• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

This iOS app demonstrates the use of a Canvas and the detection of taps. When all the bubbles have been popped, more are added. It never ends!

Download the project or check it out on GitLab.

Enhancements idea include:

• Add more bubble colors.
• Keep track of how many bubbles are popped.
• Handle screen rotations so that bubbles that are off screen get repositioned.
• Take advantage of multi-touch to allow multiple bubbles to be popped at once.

Add your project to the week 6 forum conversation.

Download and check out earlier projects:

• Week 5: Math Quiz
• Week 4: Mini-Golf ScoreKeeper
• Week 3: Dogs Up!
• Week 2: Password Generator
• Week 1: Color Picker

But maybe you want to jump right in. When I started programming that is exactly how I learned. I tried things to see what worked and what didn’t work. I also looked at and modified other programs I found.

You can learn to code if you just code.

So let’s kick off this summer’s Just Code challenge. The idea is that you try to make one app a week throughout the next 14 weeks of the summer. These apps don’t need to do anything fancy, although they should do something. Any type of Xojo-made app counts — desktop, iOS or web. No need to compile, you are only required to submit your project to complete the challenge.

This contest is a great way to show people new to coding what it takes to make an app, and to show how much fun coding is. Even if you already know how to code, you’ll find that this contest is a great way to bring some fun back to coding kinda like Gavin Smith did just last week in his personal 14 day iOS app challenge.

The Just Code challenge starts today, June 18 and ends Friday, September 21. Submit a project on at least 10 out of 14 Fridays to complete the Just Code challenge! Complete the challenge and you’ll get one of our super soft, new Xojo shirts (while supplies last) and you’ll be entered to win a Xojo Pro license plus $100! UPDATE: Because of growing interest, we’ll also be giving away a limited number of Xojo Lite licenses!

I’ve started a forum conversation called Just Code challenge. Go there for ideas, to ask questions and post your projects on Fridays. Of course, I’ll be doing the Just Code challenge too. Each week I will post my project to start the Friday forum thread.

Each Friday add your new project to the forum thread I started with that week’s app. Share a description of your project, a screenshot and a download link. Talk about your app and how much fun it is to #JustCode!

So what are you waiting for? Go on, just code.

• Week 1 project: Color Picker
• Week 2 Project: Password Generator
• Week 3 Project: Dogs Up!
• Week 4 Project: Mini-Golf ScoreKeeper
• Week 5 Project: Math Quiz
• Week 6 Project: Bubble Popper
• Week 7 Project: Pitch Tracker
• Week 8 Project: JumpStart App Launcher
• Week 9 Project: Quote Web Service
• Week 10 Project: NetTank
• Week 11 Project: Xojo Dojo
• Week 12 Project: MultiTemp
• Week 13 Project: Xojo Speed
• Week 14 Project: Marching Band ScoreKeeper

Check out this forum post for a list of 100+ projects submitted by Xojo customers:

Just Code Challenge Submissions

And find out the winners here:

Just Code Challenge Winners

To share Xojo with Hour of Code, I’ve put together a short 5-part series of videos (less than 25 minutes total) to show how to make a simple game called Asteroid Run.

In Asteroid Run a spaceship flies through space shooting an ever-increasing number of asteroids that are coming at you.

To get started, download Xojo – it’s free!

Asteroid Run Part 1: Initial Setup

In part 1 you will do initial setup and add a scrolling background starfield.

Download project

Asteroid Run Part 2: Add Spaceship

In part 2, you will add the spaceship and allow it to move with the mouse.

Download project

Asteroid Run Part 3: Add Missiles

In part 3, you will add the missiles that are fired from the spaceship when you click the mouse.

Download project

Asteroid Run Part 4: Add Asteroids

In part 4, you will add the asteroids and make the game end when an asteroid hits the spaceship.

Download project

Asteroid Run Part 5: Finish the Game

In part 5, you will finish the game by making the ship’s missiles destroys the asteroids for points.

Download finished project

It talks about how you could make a maze-like structure on a Commodore 64 with just this one line of code:

10 PRINT CHR$(205.5+RND(1)); : GOTO 10

The author then goes on to show you how you might do something similar using Python and pygame.

I love all things retro and this seemed like fun, so I thought I would whip up the same thing in Xojo.

For reference, the primary Python code looks like this (although there is more code to set up the drawing area):

square = 20
for x in range(0, screenWidth, square):
     for y in range(0, screenHeight, square):
         if random.random() > 0.5:
             pygame.draw.line(screen, white, (x, y), (x + square, y + square))
         else:
             pygame.draw.line(screen, white, (x, y + square), (x + square, y))

To do this in Xojo, create a Desktop, web or iOS project, add a Canvas to the layout and put this code in its Paint event:

Const kSquare = 20
For x As Integer = 0 To g.Width Step kSquare
  For y As Integer = 0 To g.Height Step kSquare
    If Rnd > 0.5 Then
      g.DrawLine(x, y, x + kSquare, y + kSquare)
    Else
      g.DrawLine(x, y + kSquare, x + kSquare, y)
    End If
  Next
Next

(Yes, for this example Xojo uses the exact same code for desktop, web and iOS.)

You should certainly be able to see the similarities between Xojo and Python. Here’s the output of Xojo desktop, web and iOS apps:

Be sure to check out Dev.To and follow me there as well.

What is the 8 Queens Problem?

If you are familiar with chess, you know that the queen is the most powerful piece on the board. It can move any number of squares in any direction in order to “kill” another piece. The 8 queens problem is defined like this:

“How many different solutions can you find for placing 8 queens on a chessboard so that they cannot kill another?”

Believe it or not, there are quite a few solutions. Back when I was in school, the language of choice for this class was Pascal and I wrote a Pascal program (on my Atari ST) that generated the solutions and printed them to the screen. I got an “A” on it.

A while ago I actually ported this old Pascal program (yes, I still have a copy, which you can download if you’re interested) to Xojo. I updated it a bit to add a graphical view of each of the solutions.

But before I tell you where you can find my updated Xojo solution, think about how you’d solve this using Xojo. Share your thoughts, ideas and projects on the forum.

My Xojo 8 Queens Problem project is included with the Xojo examples: Examples/Sample Applications/8Queens

Download MP3.

Show Links

• Penn State University
• Blast Image Config
• MacAdmins Conference
• Xojo JSON support
• Sched.org
• Open-Source Xojo Projects
• 5 Reasons to rely on Cloud services
• Git webinars
• XojoUnit
• System 76 Linux laptops
• ElementaryOS
• JackObud arcade cabinets
• Retro game webinar
• Pixel Space Wars

You can also subscribe on iTunes.

Do you have a free book so I can learn to code? Yes, Intro to Programming with Xojo is free!

Can I ask my beginner questions? Yes, the Xojo forum is a gateway to the friendly and helpful Xojo community.

The Xojo language is Object-Oriented. Object-Oriented programming is an excellent way to learn the fundamentals of computer programming. Xojo is also cross-platform, which means you can build apps for all kinds of platforms using a single code base. Xojo is a Rapid Application Development tool, which means it’s developed to make building apps simple and quick.

We offer a lot of resources to help anyone interested in learning to code with Xojo. But we do have some specific resources that will interest and assist students learning the fundamentals of coding and Xojo:

Books

Introduction to Programming With Xojo– This is a solid resource for learning the fundamentals of programming. While you will use Xojo, the concepts introduced are applicable to any language you want to learn later. In our experience, this book can be helpful to students as young 12 or 13 years old! We also have a Teacher’s Guide for educators planning on using Xojo in the classroom.

iOS Booklet– This booklet shows you how to use Xojo to develop for our latest supported platform, iOS!

Books, Magazines, Training & Tutorials from the Xojo community.

From the Xojo Blog Archives

First and foremost, who should learn to code!? Everyone!
Now that you have made your apps with Xojo, read how to Package, Sell & Market your apps.
Xoppy Bird – Building a Flappy Bird clone in Xojo
Hour of Code Projects for teachers & students: Spelling Test, Math Facts, iOS Doodle, Cat Pictures, Asteroid Run
The Flat Earth for Young Software Entrepreneurs– Today a 12 year old with a good idea and some determination can create an app and sell it with little up-front cost.
Earn the Boy Scout Programming Merit Badge with Xojo.

On-Demand Webinars & Videos

Retro Gaming – A fun webinar for beginners! Learn as we create a simple clone of the Atari 2600 game Combat.
This Playlist of videos is geared towards Getting Started with Xojo. Recorded webinars and video tutorials can be watched anytime.

Tutorials & Quizzes

Want to see it done? Tutorials take you step-by-step through the code for a Desktop, Web or iOS program. Or get into the details with how to create your own customer controls, build a messenger app, access the serial port, build an iOS app and more.

For a greater challenge see our Timer Tutorial & Quizzes, SQLite Basics Tutorial & Quizzes and the more in-depth SQLiteDatabase & iOSQLiteDatabase Tutorial & Quizzes. Keep checking in, we add new Tutorials all the time!

Other Resources

Here are step-by-step instructions on how to get started with Xojo. And of course the Xojo Blog is always full of tips, announcements, and news about Xojo and cross-platform development. The Xojo Forum is a good stop when you want to crowdsource your answers or ask a Xojo expert. There are also open-source Xojo projects to review and utilize.

What do you need to start learning to code with Xojo? Email me, I’m here to help you find the resource you need.

This Xojo clone attempts to emulate the iOS gameplay, which is very simple. You start with two tiles on the grid, which can be either a 2 or a 4. You can slide the tiles either up, down or left, right. Tiles that have he same number are combined into a single new tile whose number is the sum of the tiles. After each slide, a new tile (randomly a 2 or 4) is added to an open position on one of the edges. The newly added tile is highlighted.

So if you slide a row that has two 4 tiles, it will combine to a single 8 tile. You get the value of the combined tile added to your score. The game is over when you have no more moves.

For reference, this is what the original iOS version looks like on an iPad:

This is the Xojo desktop app:

Most of what you see on the window are Canvas controls, including the logo, score, high score, tile grid and arrows.

The current position of the tiles is stored in a simple 4×4 array called Grid. There are methods that process a slide for each direction, moving tiles and combining them as necessary (SlideUp, SlideDown, SlideLeft, SlideRight).

And the high score is saved to a text file so it can be reloaded.

Web and iOS, too!

There are also web and iOS version that you can also try. Both are largely designed the same as the desktop version, but using WebCanvas/iOSCanvas controls.

Have fun playing the game and feel free to send me your enhancements.

Xojo 2K Game Download for Desktop, iOS and Web

Interested in making games with Xojo? Read on…

2D physics engines are the things that are used to create games such as Angry Birds, Where’s My Water? and others. With a 2D physics engine you define the objects, the “physics” and how things interact. The engine takes care of the rest!

The demo project displays a cart at the top of the screen which you can move around with the left and right arrow keys. The car will push and interact with the other objects on the screen. You can see here that I got my cart stuck under a block:

It seems like some fun games could be created with this and best of all the engine is free with full source code!

Head on over to this blog post from @RealAlwaysBusy to download the source code and the example. Then check out the forum conversation to see what other people have created.