js计算器游戏代码怎么写

写一个简单的JavaScript计算器游戏

编写一个JavaScript计算器游戏可以是一个有趣且有教育意义的项目，它不仅可以帮助你熟悉JavaScript的基本语法和DOM操作，还能让你了解如何处理用户输入和事件。以下是一些关键步骤来创建一个JavaScript计算器游戏：设计用户界面、编写核心计算逻辑、处理用户输入和事件、优化用户体验。接下来，我将详细展开如何实现这些步骤。

一、设计用户界面

用户界面（UI）是用户与计算器交互的桥梁。一个直观、简洁的UI可以显著提升用户体验。我们将使用HTML和CSS来设计一个简单的计算器界面，包括数字按钮、运算符按钮和一个显示屏。

1. HTML结构

首先，我们需要创建HTML文件，并添加基本的结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <!-- Number buttons -->
            <button class="btn" onclick="inputDigit(7)">7</button>
            <button class="btn" onclick="inputDigit(8)">8</button>
            <button class="btn" onclick="inputDigit(9)">9</button>
            <button class="btn" onclick="inputDigit(4)">4</button>
            <button class="btn" onclick="inputDigit(5)">5</button>
            <button class="btn" onclick="inputDigit(6)">6</button>
            <button class="btn" onclick="inputDigit(1)">1</button>
            <button class="btn" onclick="inputDigit(2)">2</button>
            <button class="btn" onclick="inputDigit(3)">3</button>
            <button class="btn" onclick="inputDigit(0)">0</button>
            <!-- Operator buttons -->
            <button class="btn" onclick="inputOperator('+')">+</button>
            <button class="btn" onclick="inputOperator('-')">-</button>
            <button class="btn" onclick="inputOperator('*')">*</button>
            <button class="btn" onclick="inputOperator('/')">/</button>
            <button class="btn" onclick="calculate()">=</button>
            <button class="btn" onclick="clearDisplay()">C</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

接下来，我们将使用CSS来美化我们的计算器。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
    font-size: 2em;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: right;
    background-color: #eaeaea;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.btn {
    font-size: 1.5em;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f4f4f4;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn:hover {
    background-color: #ddd;
}

二、编写核心计算逻辑

计算器的核心逻辑包括处理数字输入、操作符输入和执行计算。我们将使用JavaScript来实现这些功能。

let displayValue = '0';
let firstOperand = null;
let secondOperand = false;
let operator = null;
function inputDigit(digit) {
    if (secondOperand === true) {
        displayValue = digit;
        secondOperand = false;
    } else {
        displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
    updateDisplay();
}
function inputOperator(nextOperator) {
    const inputValue = parseFloat(displayValue);
    if (operator && secondOperand) {
        operator = nextOperator;
        return;
    }
    if (firstOperand === null) {
        firstOperand = inputValue;
    } else if (operator) {
        const result = calculateResult(firstOperand, inputValue, operator);
        displayValue = `${parseFloat(result.toFixed(7))}`;
        firstOperand = result;
    }
    secondOperand = true;
    operator = nextOperator;
    updateDisplay();
}
function calculate() {
    if (operator && secondOperand) {
        const inputValue = parseFloat(displayValue);
        const result = calculateResult(firstOperand, inputValue, operator);
        displayValue = `${parseFloat(result.toFixed(7))}`;
        firstOperand = result;
        operator = null;
        secondOperand = false;
        updateDisplay();
    }
}
function calculateResult(firstOperand, secondOperand, operator) {
    if (operator === '+') {
        return firstOperand + secondOperand;
    } else if (operator === '-') {
        return firstOperand - secondOperand;
    } else if (operator === '*') {
        return firstOperand * secondOperand;
    } else if (operator === '/') {
        return firstOperand / secondOperand;
    }
    return secondOperand;
}
function clearDisplay() {
    displayValue = '0';
    firstOperand = null;
    secondOperand = false;
    operator = null;
    updateDisplay();
}
function updateDisplay() {
    const display = document.querySelector('#display');
    display.innerText = displayValue;
}

三、处理用户输入和事件

为了使计算器能够响应用户操作，我们需要将按钮的点击事件与JavaScript函数关联起来。这已经在HTML结构中通过onclick属性实现。每个按钮都调用相应的JavaScript函数，如inputDigit()、inputOperator()和calculate()。

四、优化用户体验

1. 错误处理

为了提升用户体验，我们需要处理一些常见的错误情况。例如，用户可能会尝试除以零，这将导致错误。我们可以在calculateResult函数中添加错误处理逻辑：

function calculateResult(firstOperand, secondOperand, operator) {
    if (operator === '+') {
        return firstOperand + secondOperand;
    } else if (operator === '-') {
        return firstOperand - secondOperand;
    } else if (operator === '*') {
        return firstOperand * secondOperand;
    } else if (operator === '/') {
        if (secondOperand === 0) {
            alert("Error: Division by zero");
            return firstOperand;
        }
        return firstOperand / secondOperand;
    }
    return secondOperand;
}

2. 键盘输入支持

为了进一步优化用户体验，我们可以添加键盘输入支持。用户可以使用键盘来输入数字和操作符，而不必点击按钮。

document.addEventListener('keydown', (event) => {
    const { key } = event;
    if (key >= 0 && key <= 9) {
        inputDigit(key);
    } else if (key === '+' || key === '-' || key === '*' || key === '/') {
        inputOperator(key);
    } else if (key === 'Enter' || key === '=') {
        calculate();
    } else if (key === 'Escape') {
        clearDisplay();
    }
});

五、结论

通过上述步骤，我们已经创建了一个功能齐全的JavaScript计算器游戏。它包括了用户界面设计、核心计算逻辑、用户输入处理和用户体验优化等方面的内容。通过这个项目，你不仅可以学到如何使用HTML、CSS和JavaScript来构建一个简单的应用，还能更好地理解如何处理用户交互和事件。

当然，你还可以进一步扩展这个项目，例如添加更多的功能（如科学计算器功能）、优化代码结构或美化界面。这是一个非常好的练习项目，可以帮助你提升前端开发技能。