Swipe & Switch Tic Tac Toe

{"name":"Swipe & Switch Tic Tac Toe","description":"Play a unique twist on the classic Tic Tac Toe game! Swipe up to shoot your X onto the board and outsmart the computer opponent. Watch out for unexpected switches as you compete to win!","photo":null,"view_count":2,"fork_count":1,"expires_at":null,"created_at":"2024-02-01T20:14:47.650618Z","updated_at":"2024-02-01T20:14:47.650621Z","user_id":5,"status":"PUBLIC","parent_id":89,"id":513,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// Global variables\nvar currentPlayer = 'X';\nvar board = [['', '', ''], ['', '', ''], ['', '', '']];\nvar selectedColumn = null;\nvar power = 0;\nvar powerIncreasing = true;\nvar isSelecting = true;\n\n// Function to draw an 'X'\nfunction drawX(x, y) {\n line(x, y, x + 133, y + 133);\n line(x, y + 133, x + 133, y);\n}\n\n// Function to draw an 'O'\nfunction drawO(x, y) {\n ellipse(x + 66.5, y + 66.5, 133, 133);\n}\n\nfunction setup() {\n createCanvas(400, 500);\n background(220);\n frameRate(60); // Set the frame rate to 60 FPS\n}\n\nfunction draw() {\n background(220);\n\n for (var i = 0; i < 3; i++) {\n for (var j = 0; j < 3; j++) {\n rect(i * 133, j * 133, 133, 133);\n if (board[i][j] === 'X') {\n drawX(i * 133, j * 133);\n } else if (board[i][j] === 'O') {\n drawO(i * 133, j * 133);\n }\n }\n }\n\n fill(150); // color of the rectangle\n rect(0, 400, width, 100); // draw the rectangle below the board\n noFill();\n stroke(255, 0, 0); // red color for the rectangle outline\n rect(0, 400, width, 100); // draw the rectangle outline\n\n // Draw the power bar\n if (selectedColumn !== null) {\n if (powerIncreasing) {\n power += 7; // increase power five times faster\n if (power >= 100) {\n power = 100;\n powerIncreasing = false;\n }\n } else {\n power -= 7; // decrease power three times faster\n if (power <= 0) {\n power = 0;\n powerIncreasing = true;\n }\n }\n\n fill(255, 0, 0); // red color for the power bar\n rect(selectedColumn * 133, 500 - power, 133, power); // the power bar starts from 500 - power and grows upwards\n noFill();\n }\n}\n\n\n\nfunction mousePressed() {\n // Check if the mouse is pressed within the rectangle area\n if (mouseY > 400 && mouseY < 500) {\n var tempColumn = Math.floor(mouseX / 133);\n if (tempColumn >= 0 && tempColumn < 3) {\n if (isSelecting) {\n // Select a column\n selectedColumn = tempColumn;\n power = 0;\n powerIncreasing = true;\n isSelecting = false;\n }\n }\n }\n}\n\nfunction mouseReleased() {\n if (selectedColumn !== null && selectedColumn >= 0 && selectedColumn < 3) {\n var targetRow;\n if (power >= 66) {\n targetRow = 0;\n } else if (power >= 33) {\n targetRow = 1;\n } else {\n targetRow = 2;\n }\n if (board[selectedColumn][targetRow] === '') {\n // Shoot the current player's piece onto the board\n board[selectedColumn][targetRow] = currentPlayer;\n\n // Switch the current player\n currentPlayer = currentPlayer === 'X' ? 'O' : 'X';\n\n // Reset the selected column and power\n selectedColumn = null;\n power = 0;\n }\n isSelecting = true;\n }\n}","style.css":"","index.html":"\n\n\n\n \n \n Swipe & Switch Tic Tac Toe\n \n \n\n\n\n

\n \n

\n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"instruction":"Create the HTML structure for the game board, including the cells and necessary elements for displaying the game state.","title":"Set up game board structure","created_at":"2023-12-15T02:10:36.596169","project_id":513,"complete":false,"step_number":0,"updated_at":"2024-02-01T20:14:47.653889","id":2919},{"instruction":"Use JavaScript to handle swipe events, allowing players to swipe up to shoot their X onto the game board.","title":"Implement swipe-to-shoot functionality","created_at":"2023-12-15T02:10:36.596249","project_id":513,"complete":false,"step_number":1,"updated_at":"2024-02-01T20:14:47.653963","id":2920},{"instruction":"Implement game logic to handle the turns between the player and computer, including a simple AI algorithm for the computer player.","title":"Handle player and computer turns","created_at":"2023-12-15T02:10:36.596294","project_id":513,"complete":false,"step_number":2,"updated_at":"2024-02-01T20:14:47.654010","id":2921},{"instruction":"After each move, check for winning conditions to determine if a player has won or if the game is a tie.","title":"Check for winning conditions","created_at":"2023-12-15T02:10:36.596337","project_id":513,"complete":false,"step_number":3,"updated_at":"2024-02-01T20:14:47.654054","id":2922},{"instruction":"Update the game state to switch O to X when the X player hits a spot that has already been taken by O.","title":"Switch O to X on collision","created_at":"2023-12-15T02:10:36.596379","project_id":513,"complete":false,"step_number":4,"updated_at":"2024-02-01T20:14:47.654097","id":2923},{"instruction":"Show the game result (win, lose, or tie) and allow the player to restart the game if desired.","title":"Display game result","created_at":"2023-12-15T02:10:36.596430","project_id":513,"complete":false,"step_number":5,"updated_at":"2024-02-01T20:14:47.654139","id":2924},{"instruction":"Enhance the game experience by adding animations or visual effects when shooting X or O.","title":"Add visual effects","created_at":"2023-12-15T02:10:36.596477","project_id":513,"complete":false,"step_number":6,"updated_at":"2024-02-01T20:14:47.654182","id":2925},{"instruction":"Keep track of wins and losses with a scoring system to add an extra competitive element to the game.","title":"Implement scoring system","created_at":"2023-12-15T02:10:36.596518","project_id":513,"complete":false,"step_number":7,"updated_at":"2024-02-01T20:14:47.654223","id":2926}]}