CSS貪吃蛇代碼是一種通過純CSS實現的小游戲,可以在網頁上玩耍。
.snake { position: absolute; top: 100px; left: 0; /* 設置初始方向和速度 */ transform: rotate(90deg); transition: all 0.2s; animation: moveSnake 2s linear infinite; } .snake:before { content: ''; display: block; width: 20px; height: 20px; background-color: greenyellow; border-radius: 10px; position: absolute; top: 0; /* 設置初始位置 */ left: 0; transform-origin: center top; transform: rotate(-90deg); } /* 定義蛇頭移動的動畫 */ @keyframes moveSnake { 0% { transform: translateY(0); } 25% { transform: translateY(20px); } 50% { transform: translateX(20px) rotate(90deg); } 75% { transform: translateY(0px) rotate(180deg); } 100% { transform: translateX(0) rotate(270deg); } }
上述代碼中,我們設置了一個蛇的div(class名為snake),并在其中嵌套了一個偽元素(class為snake:before),模擬出蛇頭和初始位置。我們用transform屬性來旋轉蛇頭的朝向,以及實現蛇頭移動的動畫。通過設置transition屬性來使旋轉效果更加平滑。
通過改變蛇頭的位置和朝向,我們可以實現蛇的不同移動方向。同時,我們還可以在蛇頭所在的div元素中設置背景色、邊框等CSS屬性,使整個貪吃蛇游戲看起來更加生動。