Jquery项目练习-狂拍灰太狼

最新推荐文章于 2020-07-06 15:11:39 发布

七彩猫猫虫

最新推荐文章于 2020-07-06 15:11:39 发布

阅读量655

点赞数 1

分类专栏：自己动手丰衣足食

本文链接：https://blog.csdn.net/SDAW_1/article/details/104302581

版权

最终效果图：html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>狂拍灰太狼游戏</title> <link rel="stylesheet" href="1.css"> <script s...

摘要由CSDN通过智能技术生成

最终效果图：

在这里插入图片描述

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>狂拍灰太狼游戏</title>
  <link rel="stylesheet" href="1.css">
  <script src="jquery-1.12.4.js"></script>
  <script src="1.js"></script>
</head>
<body>
<div class="container">
  <h1>0</h1>
  <div class="progress"></div>
  <button class="start">开始游戏</button>
  <div class="rules">游戏规则</div>
  <div class="rule">
    <p>游戏规则:</p>
    <p>1.游戏时间:60s</p>
    <p>2.拼手速,殴打灰太狼+10分</p>
    <p>3.殴打小灰-10分</p>
    <a href="#" class="close">关闭</a>
  </div>
  <div class="mask">
    <h1>GAME OVER</h1>
    <button class="reStart">重新开始</button>
  </div>
</div>
</body>
</html>

CSS文件

*{
   
  margin:0;
  padding:0;
}

.container{
   
  width:320px;
  height:480px;
  background: url("./images/game_bg.jpg") no-repeat;
  margin:0 auto;
  position: relative;
}

.container>h1{
   
  color:white;
  margin-left:60px;
}
.container .progress{
   
  width:180px;
  height: 16px;
  background: url("./images/progress.png") no-repeat;
  posi

最低0.47元/天解锁文章

七彩猫猫虫

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery项目练习-狂拍灰太狼

最终效果图：html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>狂拍灰太狼游戏</title> <link rel="stylesheet" href="1.css"> <script s...
复制链接

扫一扫