基于JavaScript实现游戏购物车效果详解

背景介绍

本文介绍了如何使用 JavaScript 实现游戏购物车效果。该购物车效果可以用于游戏中的商城系统，用户在商城中选择游戏道具后，可以加入购物车等待结算。

实现步骤

1. HTML 页面准备

在 HTML 页面中准备两个结构 class 分别为 shop 和 cart，用于展示商城中的商品和购物车中的商品。

<div class="shop">
    <!-- 商城中的商品展示区域 -->
</div>

<div class="cart">
    <!-- 购物车展示区域 -->
</div>

1. 商品数据模拟

在 JavaScript 中模拟商品的数据，使用数组存储该数据。

const products = [
    {
        name: '道具1',
        price: 10
    },
    {
        name: '道具2',
        price: 20
    },
    {
        name: '道具3',
        price: 30
    },
    {
        name: '道具4',
        price: 40
    }
];

1. 商品展示

通过 JavaScript 将商品数据展示在 HTML 结构中，实现商品列表展示。

const shop = document.querySelector('.shop');

products.forEach(product => {
    const productElement = document.createElement('div');
    productElement.innerHTML = `${product.name} - ${product.price}元`;
    shop.appendChild(productElement);
});

1. 加入购物车功能实现

通过 JavaScript 为每个商品绑定点击事件，当用户点击商品时，该商品将被加入购物车中。

const cart = document.querySelector('.cart');
const cartItems = [];

products.forEach((product, index) => {
    const productElement = document.createElement('div');
    productElement.innerHTML = `${product.name} - ${product.price}元`;
    productElement.addEventListener('click', event => {
        cartItems.push(product);
        updateCart();
    });
    shop.appendChild(productElement);
});

function updateCart() {
    cart.innerHTML = '';

    cartItems.forEach(item => {
        const cartItemElement = document.createElement('div');
        cartItemElement.innerHTML = `${item.name} - ${item.price}元`;
        cart.appendChild(cartItemElement);
    });
}

1. 购物车结算功能实现

在购物车中新增结算按钮，通过 JavaScript 实现购物车结算功能。

const checkoutButton = document.createElement('button');
checkoutButton.innerText = '结算';
checkoutButton.addEventListener('click', event => {
    const total = cartItems.reduce((accumulator, item) => accumulator + item.price, 0);
    alert(`您需要支付总共${total}元。`);
    cartItems.length = 0;
    updateCart();
});
cart.appendChild(checkoutButton);

示例

示例一

1. 打开一个 HTML 页面，复制上述代码。
2. 在 shop 区域中通过 JavaScript 展示商品列表，其中每个商品的名称和价格需要自行设置。
3. 为每个商品绑定点击事件，当用户点击商品时，该商品将被加入购物车中。
4. 在购物车区域中展示加入购物车的商品列表，并在列表下方新增一个 结算 按钮。
5. 点击 结算 按钮后，弹出支付总金额的提示，同时清空购物车中的商品列表。

示例二

在示例一的基础上增加以下功能：

1. 在每个商品后面新增一份购买该商品的数量的输入框。
2. 当用户输入购买数量时，将该商品和数量加入购物车中。例如用户购买道具1 5个，道具2 2个，购物车中需要展示这两件商品，同时显示购买数量。
3. 在购物车区域中展示加入购物车的商品列表，并在列表下方新增一个 结算 按钮。
4. 点击 结算 按钮后，弹出支付总金额的提示，同时清空购物车中的商品列表。