js+css实现算术运算多级闯关小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js+css实现算术运算多级闯关小游戏代码，写出给出目标数字的加减乘除运算过程。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
/* Importing the font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: #fafafa;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.container {
    max-width: 500px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.screen {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
}

.screen.active {
    display: flex;
}

header {
    background-color: rgba(98, 0, 238, 0.9);
    color: white;
    padding: 20px;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#start-game-button, #next-level-button {
    background-color: #03dac6;
    color: #000;
    font-size: 1.5em;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#start-game-button:hover, #next-level-button:hover {
    background-color: #01a299;
}

.hidden {
    display: none;
}

/* Game Screen Styles */
#game-screen main {
    justify-content: space-between;
    padding: 0;
}

.target-number, .input-area {
    text-align: center;
    padding: 20px;
}

.label {
    font-size: 1em;
    color: #666;
}

#target-number {
    font-size: 3em;
    color: #6200ee;
    margin-top: 10px;
}

#calculation-display {
    font-size: 1.5em;
    color: #333;
    margin-top: 10px;
    min-height: 40px;
    word-wrap: break-word;
    padding: 10px;
    transition: background-color 0.3s;
}

.buttons {
    padding: 0 10px;
}

.number-pad {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.number-button, .operator-button, .utility-button {
    width: 22%;
    background-color: #e0e0e0;
    color: #000;
    font-size: 1.5em;
    margin: 1% 0;
    padding: 15px 0;
    border-radius: 8px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
}

.number-button:active, .operator-button:active, .utility-button:active {
    transform: scale(0.95);
}

.number-button.used {
    background-color: #b0bec5;
    color: #fff;
}

.controls {
    padding: 20px;
    text-align: center;
}

#submit-button {
    width: 100%;
    padding: 15px 0;
    font-size: 1.2em;
    background-color: #03dac6;
    color: #000;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s, transform 0.1s;
}

#submit-button:active {
    transform: scale(0.95);
}

.feedback {
    padding: 10px;
    font-size: 1.2em;
    text-align: center;
    color: #6200ee;
    min-height: 1.5em;
}

.feedback.show {
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* End Screen Styles */
#end-screen main p {
    font-size: 1.5em;
    margin-bottom: 30px;
}

/* Confetti Animation */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: 0;
    width: 10px;
    height: 20px;
    background-color: red;
    opacity: 0.9;
    animation: confetti-fall 2s linear forwards, confetti-drift 2s ease-in-out forwards;
}

@keyframes confetti-fall {
    from { transform: translateY(-100%); }
    to { transform: translateY(100vh); }
}

@keyframes confetti-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (min-width: 500px) {
    #target-number {
        font-size: 4em;
    }

    #calculation-display {
        font-size: 2em;
    }
}
</style>


  
  
</head>

<body translate="no">
  <div class="container">
        <!-- Title Screen -->
        <div id="title-screen" class="screen">
            <header>
                <h1>Number Crunch</h1>
            </header>
            <main>
                <button id="start-game-button">Start Game</button>
            </main>
        </div>

        <!-- Game Screen -->
        <div id="game-screen" class="screen hidden">
            <header>
                <h1>Level <span id="level-number">1</span></h1>
            </header>
            <main>
                <section class="target-number">
                    <div class="label">Target Number</div>
                    <div id="target-number">24</div>
                </section>
                <section class="input-area">
                    <div class="label">Your Calculation</div>
                    <div id="calculation-display">Tap numbers and operators below</div>
                </section>
                <section class="buttons">
                    <div class="number-pad" id="number-pad">
                        <!-- Number and Operator Buttons will be generated dynamically -->
                    </div>
                </section>
                <section class="controls">
                    <button id="submit-button">Submit Answer</button>
                </section>
                <section class="feedback" id="feedback"></section>
            </main>
        </div>

        <!-- End Screen -->
        <div id="end-screen" class="screen hidden">
            <header>
                <h1>Congratulations!</h1>
            </header>
            <main>
                <p>You have completed Level <span id="final-level">1</span>!</p>
                <button id="next-level-button">Next Level</button>
            </main>
        </div>
    </div>
  
      <script  >
// script.js

// Game variables
let level = 1;
let targetNumber;
let givenNumbers;
let usedNumbers = [];
let calculation = "";
let inputTokens = []; // Array to track input tokens

const operations = ['+', '-', '*', '/'];

// Elements
const titleScreen = document.getElementById('title-screen');
const gameScreen = document.getElementById('game-screen');
const endScreen = document.getElementById('end-screen');
const levelNumberDisplay = document.getElementById('level-number');
const finalLevelDisplay = document.getElementById('final-level');
const calculationDisplay = document.getElementById('calculation-display');
const feedbackDisplay = document.getElementById('feedback');
const submitButton = document.getElementById('submit-button');
const numberPad = document.getElementById('number-pad');

// Buttons
const startGameButton = document.getElementById('start-game-button');
const nextLevelButton = document.getElementById('next-level-button');

// Initialize the game
function initGame() {
    // Show the title screen
    showScreen('title-screen');

    // Start game button listener
    startGameButton.addEventListener('click', () => {
        level = 1;
        startLevel();
    });

    // Next level button listener
    nextLevelButton.addEventListener('click', () => {
        level++;
        startLevel();
    });
}

// Start a level
function startLevel() {
    // Reset variables
    usedNumbers = [];
    calculation = "";
    inputTokens = []; // Reset input tokens
    feedbackDisplay.textContent = "";
    calculationDisplay.textContent = "Tap numbers and operators below";

    // Update level display
    levelNumberDisplay.textContent = level;

    // Generate target number and given numbers
    generateLevel();

    // Set up the number pad
    setupNumberPad();

    // Show the game screen
    showScreen('game-screen');
}

// Generate level data
function generateLevel() {
    let isValidPuzzle = false;

    while (!isValidPuzzle) {
        // Determine difficulty settings based on level
        let numberCount;
        let maxNumber;
        let maxTarget;

        if (level <= 10) {
            numberCount = 3; // Fewer numbers for simplicity
            maxNumber = 10;
            maxTarget = 10;
        } else if (level <= 20) {
            numberCount = 4;
            maxNumber = 20;
            maxTarget = 50;
        } else if (level <= 30) {
            numberCount = 5;
            maxNumber = 50;
            maxTarget = 100;
        } else {
            numberCount = 6;
            maxNumber = 100 + level * 2;
            maxTarget = null; // No upper limit
        }

        // Generate random numbers for the given numbers
        givenNumbers = [];
        for (let i = 0; i < numberCount; i++) {
            givenNumbers.push(getRandomInt(1, maxNumber));
        }

        // Generate a random valid expression using the given numbers
        const expressionResult = generateValidExpression(givenNumbers.slice(), maxTarget, level <= 30);

        if (expressionResult) {
            targetNumber = expressionResult.result;
            isValidPuzzle = true;

            // Update the target number display
            document.getElementById('target-number').textContent = targetNumber;
        }
    }
}

// Generate a valid expression using the given numbers
function generateValidExpression(numbers, maxTarget, positiveOnly) {
    // Shuffle the numbers to get random order
    shuffleArray(numbers);

    // Try multiple times to generate a valid expression
    for (let attempt = 0; attempt < 100; attempt++) {
        let expression = "";
        let usedNums = [];

        // Build an expression by inserting random operations .........完整代码请登录后点击上方下载按钮下载查看