当前位置：首页 > JavaScript

js实现计分

2026-04-06 01:59:27JavaScript

实现基础计分功能

使用JavaScript实现一个简单的计分功能可以通过变量存储分数，并通过函数进行增减操作。以下是一个基础示例：

let score = 0;

function increaseScore(points) {
    score += points;
    updateScoreDisplay();
}

function decreaseScore(points) {
    score -= points;
    updateScoreDisplay();
}

function updateScoreDisplay() {
    document.getElementById('score-display').textContent = `Score: ${score}`;
}

// 初始化显示
updateScoreDisplay();

添加本地存储支持

为了在页面刷新后保留分数，可以使用localStorage：

js实现计分

let score = localStorage.getItem('gameScore') ? parseInt(localStorage.getItem('gameScore')) : 0;

function updateScore(points) {
    score += points;
    localStorage.setItem('gameScore', score.toString());
    updateScoreDisplay();
}

function resetScore() {
    score = 0;
    localStorage.removeItem('gameScore');
    updateScoreDisplay();
}

实现动画效果

为分数变化添加动画效果可以增强用户体验：

function animateScoreChange(newScore) {
    const display = document.getElementById('score-display');
    display.style.transform = 'scale(1.2)';
    display.style.color = newScore > score ? 'green' : 'red';

    setTimeout(() => {
        display.style.transform = 'scale(1)';
        display.style.color = '';
    }, 300);

    score = newScore;
    display.textContent = `Score: ${score}`;
}

创建计分类

对于更复杂的应用，可以创建一个计分类：

js实现计分

class ScoreSystem {
    constructor(initialScore = 0) {
        this.score = initialScore;
    }

    add(points) {
        this.score += points;
        this.onChange();
    }

    subtract(points) {
        this.score -= points;
        this.onChange();
    }

    reset() {
        this.score = 0;
        this.onChange();
    }

    onChange() {
        // 可重写此方法实现自定义逻辑
        console.log(`Current score: ${this.score}`);
    }
}

const gameScore = new ScoreSystem();
gameScore.add(10);

与DOM事件绑定

将计分系统与页面按钮事件绑定：

<button id="add-points">Add 5 Points</button>
<button id="reset-score">Reset</button>
<div id="score-display">Score: 0</div>

<script>
    const scoreSystem = new ScoreSystem();

    document.getElementById('add-points').addEventListener('click', () => {
        scoreSystem.add(5);
        document.getElementById('score-display').textContent = `Score: ${scoreSystem.score}`;
    });

    document.getElementById('reset-score').addEventListener('click', () => {
        scoreSystem.reset();
        document.getElementById('score-display').textContent = `Score: ${scoreSystem.score}`;
    });
</script>

添加音效反馈

为分数变化添加音效可以提升交互体验：

function playScoreSound(isPositive) {
    const sound = new Audio(isPositive ? 'point-earned.mp3' : 'point-lost.mp3');
    sound.volume = 0.5;
    sound.play().catch(e => console.log('Audio play failed:', e));
}

function updateScore(points) {
    score += points;
    playScoreSound(points > 0);
    updateScoreDisplay();
}

标签: js