植物大战僵尸+React chess game设计(0)

1.初步demo 图片

摸鱼项目，比较粗糙：

2.使用资源

2.1 字体

Series Orbit很像PVZ中的字体 下载地址：www.dafont.com/seriesorbit… 下载字体后放入项目文件夹，使用如下：

@font-face {
  font-family: SeriesOrbit;
  src: url(./font/SERIO___.TTF);   /* link to font tff location */
}

2.2 植物与僵尸

需下载透明背景图片，下载地址: www.clipartmax.com/so/plants-v…

3.主要组件

3.1 棋盘

import { useState, useEffect } from 'react';
import '../components/grassland.css'

const Grassland = () => {

    const n = 8;

    const m = 8;

    const [chessBoard, setChessBoard] = useState([]);

    useEffect(() => {
        const result = [];
        for (let i = 0; i < n; i++) {

            const row = Array.from({ length: m });
            result.push(row);
        }
        setChessBoard(result);
    }, []);

    const getColor = (cIndex) => {
        return cIndex < 4 ? 'grass' : 'blood';
    }
    

    return <>
        <div className="grassland">
        {chessBoard.length > 0 &&
                chessBoard.map((row, rIndex) => {
                    return (
                        <div className="row" key={rIndex}>
                            {row.map((_, cIndex) => {
                                return (
                                    <div
                                        className={`box ${
                                            (rIndex + cIndex) % 2 === 0
                                                ? getColor(cIndex) : "white"
                                            }`}
                                        key={cIndex}
                                    ></div>
                                );
                            })}
                        </div>
                    );
                })}
        </div>
    </>

}

export default Grassland;

.grassland {
    width: 800px;
    height: 800px;
    background-color: #282c34;
    border: solid 10px #ffc18c;
    border-image:url("../images/wood.jpg") 30 30 stretch;
}

.box {
    width: 100px;
    height: 100px;
}

.white {
    background-color: white;
}

.box.black {
    background-color: #282c34;
}

.middle {
    border-left: #3c54dd solid 10px !important;
}

.box.grass {
    background-image: url("./../images/grass.png");
}

.box.green {
    background-color: #25ff1d  !important;
}

.box.blood {
    background-color: #880808  !important;
}

.row {
    display: flex;
    flex-direction: row;
}

3.2 卡片

植物大战僵尸的卡片框是一个矩形 + 三角形， 附上植物/僵尸图片与cost消费

import './card.css'

const Card = ({imgSrc, sunCost, rarity = '', height='80px', width='80px', type = 'plant'}) => {

    return <>
        <div className={`card ${rarity}`}>
            <div className='cardinner'>
                <div className='plant' style={{width:'80px'}}>
                    <img src={imgSrc} alt="" height={height} width={width}/>
                </div>
                <div className={`delta ${rarity}`}></div>
            </div>
            {
                type === 'plant' ? 
                <div className={`sun`}>{`${sunCost}☀️`}</div> :
                <div className={`sun`}>{`${sunCost}🧠`}</div>
            }
        </div>
    </>
}


export default Card;

.card {
    width: 200px;
    height: 120px;
    border-radius: 12px;
    border: solid 10px #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: rgb(20, 37, 14) 0px 0px 10px 0px;;
}

.card.blue {
    border: solid 10px #8ebdf3;
}

.card.gold {
    border: solid 10px #ffdf40;
    background: linear-gradient(to right, #d19e1d, #ffd86e, #e3a812);
}

.card.diamond {
    border: solid 10px #f1f7fb;
    background: linear-gradient(45deg,rgb(235, 181, 66, 0.6), rgb(182, 230, 241, 0.3))
}

.cardinner {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.delta {
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-bottom-color: #e0e0e0;
    border-top-width: 0px;
    transform: rotate(135deg);
    position: relative;
    top: 60px;
    left: 60px;
    z-index: -1;
}

.delta.blue {
    z-index: 0;
    border-bottom-color: #8ebdf3;
}

.delta.gold {
    z-index: 0;
    border-bottom-color: #ffdf00;
}

.delta.diamond {
    z-index: 0;
    border-bottom-color: #f1f7fb;
}

.sun {
    font-size: 26px;
    width: 80px;
    text-align: left;
    position: relative;
    left: 10px;
    bottom: 5px;
    font-family: SeriesOrbit;
    color: rgb(156, 196, 101);
}

.triangle {
    width: 0px;
    height: 0px;
    border: 50px solid;
}

.plant {
    position: relative;
    left: 50px;
    top:20px
}

4 设计玩法

1 棋盘分为植物区（左）和僵尸区（右），双方玩家仅能在各自区域部署单位

2 胜利条件：僵尸全灭（植物）/ 僵尸到达植物方底线（僵尸）

3 植物方和僵尸方各自拥有1000初始阳光（脑子）

4.每个回合一次单位部署或行动