Web前端--HTML+CSS+JS实现仿切水果小游戏_chengyang_java

未知 02-07 738

?代码目录：

主要代码实现：

源码获取

效果演示：?

?代码目录：

主要代码实现：

CSS样式：

* { margin: 0; padding: 0; list-style-type: none; touch-action: none; user-select: none; } .bg { position: absolute; z-index: 0; width: 100vw; height: 100vh; background: url(../img/banner-3.jpg); background-size: cover; transform: scale(1.1); } canvas { position: relative; z-index: 1; } .header { position: fixed; z-index: 3; top: 0; left: 0; display: flex; justify-content: space-between; margin: 20px; padding: 13px 20px; font-size: 15px; font-family: Lato, Arial; color: #333; box-sizing: border-box; box-shadow: 0 2px 3px rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .8); border-radius: 30px; width: calc(100% - 40px); text-transform: uppercase; &.game-over { color: transparent; background: black; &:before { content: "GAME OVER!"; color: #fff; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); } } }

HTML代码 :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿切水果小游戏</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="bg"></div> <canvas id="canvas"></canvas> <div class="header"> <div id="catched"> 分数: <span>0</span> </div> <div id="lost"> 未击中: <span>0</span> </div> </div> <script src="js/script.js"></script> </body> </html>

上面的图片文件和JS文件需要引入?

源码获取

大家可以点赞、收藏、关注、评论我啦?