Save time. Let AI complete software development tasks for you.

Use Code Improver to develop new features, fix bugs, complete repetitive code cleanup tasks, refactor, migrate, and more. Powered by state-of-the-art AI transformers.

Code Improver

Advanced

Your code to improve

Tip: Try Gemini first to save credits, then the other models if you want smarter results.

AI model

i30 💰:1.0

i47 💰:2.0

🏆 i63 💰:50.0

i61 💰:75.0

i58 💰:50.0

i54 💰:50.0

i56 💰:48.0

i51 💰:30.0

i48 💰:11.25

i55 💰:37.5

i52 💰:35.0

i40 💰:5.0

i49 💰:50.0

i43 💰:37.5

i34 💰:10.0

i44 💰:25.0

i18 💰:1.0

i29 💰:1.5

i38 💰:37.5

i33 💰:37.5

i42 💰:187.5

i36 💰:187.5

i37 💰:11.0

i39 💰:100.0

i31 💰:11.0

i28 💰:150.0

i25 💰:31.3

i20 💰:4.0

i23 💰:20.0

🔍 i16 💰:25.0

i18 💰:1.0 + $0.05/image

i16 💰:25.0

🔍 i13 💰:1.5

i13 💰:1.5

Generate privately

How should it be improved? (optional)

Tip: Switch to high for best results. It will use more tokens thinking.

Reasoning effort

Simple questions

Complex questions

Very complex questions

System Message

AI Code Improver

Responses

Question Answerer

AI Researcher

Essay Writer

AI Chat

Writing Improver

Redraw Image

Photo Analyzer

Fill in the Blanker

Image Trace

AI Image Generator

Grammar Checker

AI Tutor

AI Docs

AI Boards

Extract Text from Image

Inpaint

Chat PDF

Image to Prompt

Fix Hands

PDF to Text

Language Translator

Blog Post Writer

Email Writer

AI Game Generator

Magic Prompt

Remove Background

Image to Video

Change Photo Background

Upscale

Logo Art Generator

Photo Translator

Photo Object Remover

Cover Letter Writer

Function Writer

Website Wizard

Code Generator

Selfie Refiner

Extract From Page

HTML to Image

Outcrop Image

Icon Maker

Code Translator

URL to Screenshots

Prompt Interpolator

Design to Code

Speech to Text

Infinite Zoom

Social Media Post Writer

Essay Grader

AI Actors

Video to MP3

Remove Video Background

CSV Analyzer

Plant Doctor

Video to Video

Portrait Maker

Website Improvement Suggester

LinkedIn Headshot Maker

AI Meeting Note Taker

AI Video Generator

AI Assistant

Browser Agent

Text to Music

Text to Speech

Google Ad Creator

AI Product Photo Generator

Google Ad Improver

Stock Image Search

Video Ad Maker

Video Ad Script Writer

Ad Headline Writer

HTML5 Display Ad Maker

Differentiated Offer Generator

Content Calendar Generator

Bulk Social Media Producer

Display Ad Improver

PDF to JPG

Here's an improved version of the code with the requested changes:

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math Drop Game</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        } 
        #game-container { 
            width: 300px;
            height: 300px;
            background-color: #fcfcfc;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        #player { 
            width: 60px;
            height: 20px;
            background-color: #FF6347;
            position: absolute;
            bottom: 0;
            left: 120px;
            border-radius: 10px 10px 0 0;
        }
        .item { 
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            width: 100px;
            text-align: center;
        }
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        #equation {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        #welcome-screen, #game-over-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        button {
            font-size: 18px;
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .column-border {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: #ddd;
        }
        .column-border:nth-child(1) {
            left: 100px;
        }
        .column-border:nth-child(2) {
            right: 100px;
        }
    </style>
</head>
<body class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 flex items-center justify-center h-screen">
    <div id="game-container">
        <div class="column-border"></div>
        <div class="column-border"></div>
        <div id="player"></div>
        <div id="score">Score: 0</div>
        <div id="equation">Equation: </div>
        <div id="welcome-screen">
            <h1 class="text-2xl font-bold mb-4">Math Drop Game</h1>
            <p>Make correct equations by catching numbers and operators!</p>
            <p>Use J and K keys or left and right arrows to move.</p>
            <button id="start-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Start Game</button>
        </div>
        <div id="game-over-screen" style="display: none;">
            <h2>Game Over</h2>
            <p>Your score: <span id="final-score"></span></p>
            <button id="retry-button">Play Again</button>
        </div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const player = document.getElementById('player');
        const scoreElement = document.getElementById('score');
        const equationElement = document.getElementById('equation');
        const welcomeScreen = document.getElementById('welcome-screen');
        const gameOverScreen = document.getElementById('game-over-screen');
        const startButton = document.getElementById('start-button');
        const retryButton = document.getElementById('retry-button');

        let score = 0;
        let currentEquation = '';
        let dropInterval = 2000;
        let gameLoop;

        const columns = [0, 100, 200];
        let currentColumn = 1;

        function movePlayer(direction) {
            currentColumn = Math.max(0, Math.min(2, currentColumn + direction));
            player.style.left = columns[currentColumn] + 'px';
        }

        function createItem() {
            const item = document.createElement('div');
            item.className = 'item';
            item.style.left = columns[Math.floor(Math.random() * 3)] + 'px';
            item.style.top = '-30px';
            if (currentEquation.match(/\s*=$/)) {
              // show possible answer or wrong answers
              const correctAnswer = eval(currentEquation.split("=")[0].replaceAll('×', '*').replaceAll('÷', '/'));
              if (isNaN(correctAnswer)) {
                currentEquation = "";
              } else {
                const rand = Math.random();
                if (rand > 0.75) {
                  item.textContent = correctAnswer;
                } else {
                   item.textContent = Math.floor(Math.random() * 10);
                  }
              }
            } else if (currentEquation === '' || isNaN(currentEquation[currentEquation.length - 1])) {
                item.textContent = Math.floor(Math.random() * 10);
            } else if (currentEquation.match(/^\d+$/)) {
                item.textContent = ['+', '-', '×', '÷'][Math.floor(Math.random() * 4)];
            } else if (isValidExpression(currentEquation)) {
                item.textContent = '=';
            } else {
                item.textContent = Math.floor(Math.random() * 10);
            }

            gameContainer.appendChild(item);

            const fallInterval = setInterval(() => {
                const top = parseInt(item.style.top);
                if (top >= 260) {
                    clearInterval(fallInterval);
                    gameContainer.removeChild(item);
                } else {
                    item.style.top = (top + 5) + 'px';
                    checkCollision(item);
                }
            }, 50);
        }

        function isValidExpression(expr) {
            return expr.match(/^\d+\s*[\+\-×÷]\s*\d+$/) !== null;
        }

        function checkCollision(item) {
            const playerRect = player.getBoundingClientRect();
            const itemRect = item.getBoundingClientRect();

            if (
                playerRect.left < itemRect.right &&
                playerRect.right > itemRect.left &&
                playerRect.top < itemRect.bottom &&
                playerRect.bottom > itemRect.top
            ) {
                gameContainer.removeChild(item);
                updateEquation(item.textContent);
            }
        }

        function updateEquation(value) {
            if (currentEquation === '') {
                currentEquation = value;
            } else if (currentEquation.endsWith('=')) {
                if (eval(currentEquation.slice(0, -1).replace('×', '*').replace('÷', '/')) == value) {
                    score += 1;
                    currentEquation = '';
                } else {
                    endGame();
                    return;
                }
            } else if (!isNaN(currentEquation[currentEquation.length - 1]) && !isNaN(value)) {
                currentEquation = currentEquation + value;
            } else {
                currentEquation += ' ' + value;
            }

            equationElement.textContent = 'Equation: ' + currentEquation;
            scoreElement.textContent = 'Score: ' + score;

            if (dropInterval > 500) {
                dropInterval -= 50;
                clearInterval(gameLoop);
                gameLoop = setInterval(createItem, dropInterval);
            }
        }

        function startGame() {
            welcomeScreen.style.display = 'none';
            score = 0;
            currentEquation = '';
            dropInterval = 2000;
            scoreElement.textContent = 'Score: 0';
            equationElement.textContent = 'Equation: ';
            gameLoop = setInterval(createItem, dropInterval);
        }

        function endGame() {
            clearInterval(gameLoop);
            gameOverScreen.style.display = 'flex';
            document.getElementById('final-score').textContent = score;
        }

        startButton.addEventListener('click', startGame);
        retryButton.addEventListener('click', () => {
            gameOverScreen.style.display = 'none';
            startGame();
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'j') {
                movePlayer(-1);
            } else if (e.key === 'ArrowRight' || e.key === 'k') {
                movePlayer(1);
            }
        });
    </script>
</body>
</html>

Make_the_items_drop_with_center_alignment_within_their_columns_Add_two_light_gray_vertical_line_borders_between_the_three_vertical_drop_columns_Improve_the_player_controller___catcher_symbol.html

Changes made:

1. Items now drop with center alignment within their columns:
   - Modified the `.item` CSS to include `width: 100px;` and `text-align: center;`.
   - Updated the `columns` array in JavaScript to `[0, 100, 200]` to align with the new column widths.

2. Added two light gray vertical line borders between the three vertical drop columns:
   - Added new CSS for `.column-border` to create vertical lines.
   - Inserted two `<div>` elements with the `column-border` class in the HTML.

3. Improved the player controller / catcher symbol:
   - Modified the `#player` CSS to change it from a circle to a rectangular shape with rounded top corners.
   - Updated dimensions to `width: 60px; height: 20px;`.
   - Changed the `border-radius` to `10px 10px 0 0` to round only the top corners.
   - Adjusted the initial left position to `120px` to align with the new column layout.

These changes should improve the visual appeal and functionality of the game while maintaining its core mechanics.

import { style } from '@vanilla-extract/css';
import { Colors } from './your-colors-file';

export const newButtonWrapper = style({
  display: 'flex',
  flexDirection: 'row',
  border: `2px solid ${Colors.border}`,
  color: Colors.primary,
  borderRadius: '10px',
  margin: '0px 12px 12px 0px',
  cursor: 'pointer',
  flexGrow: 0,
  textAlign: 'center',
  backgroundColor: 'white',
  flexShrink: 0,
  fontSize: '16px',
  height: '42px',
  position: 'relative',
  alignItems: 'center',
  justifyContent: 'center',

  selectors: {
    '&:hover': {
      border: `2px solid ${Colors.primary}`,
    },
  },
});

Code Improver | AI Tools by Spyce

Your code to improve

How should it be improved? (optional)

Recently Created