使用
jQuery
语法实现的新浪微博页面我要实现的功能:
- 点击开始游戏按钮,开始游戏
- 游戏有时间进度条
- 游戏结束以后可以点击重新开始按钮,重新开始游戏
- 有游戏规则
- 点击灰太狼加 10 分,点击小灰灰减 10 分,并且只能点击一次,以防用户一直点
- 点击之前显示没有被平底锅打击的图片,点击之后显示被平底锅打击的图片
- 游戏结束,动画结束
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>狂拍灰太狼title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-1.12.4.js">script>
<script src="js/index.js">script>
head>
<body>
<div class="container">
<h1 class="score">0h1>
<div class="progress">div>
<button class="start">开始游戏button>
<div class="rules">游戏规则div>
<div class="rule">
<p>游戏规则p>
<p>1.游戏时间:60sp>
<p>2.拼手速,殴打灰太狼+10分p>
<p>3.殴打小灰灰-10分p>
<a href="#" class="close">[关闭]a>
div>
<div class="mask">
<h1>GAME OVERh1>
<button class="reStart">重新开始button>
div>
div>
body>
html>
* {
margin: 0;
padding: 0;
}
.container {
width: 320px;
height: 480px;
background: url("../images/game_bg.jpg") no-repeat 0 0;
margin: 50px auto;
position: relative;
}
.container > h1 {
color: #fff;
margin-left: 60px;
}
.container > .progress {
width: 180px;
height: 16px;
background: url("../images/progress.png") no-repeat 0 0;
position: absolute;
top: 66px;
left: 63px;
}
.container > .start {
width: 150px;
line-height: 35px;
text-align: center;
color: #fff;
background: linear-gradient(#e55c3d, #c50000);
border-radius: 20px;
border: none;
outline: none;
font-size: 20px;
position: absolute;
top: 320px;
left: 50%;
margin-left: -75px;
}
.container > .rules {
width: 100%;
height: 20px;
background: #ccc;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.container > .rule {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
padding-top: 100px;
box-sizing: border-box;
text-align: center;
display: none;
}
.rule > p {
line-height: 50px;
color: #fff;
}
.rule > a {
text-decoration: none;
color: red;
}
.container > .mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
padding-top: 200px;
box-sizing: border-box;
text-align: center;
display: none;
}
.mask > h1 {
color: #ff4500;
text-shadow: 3px 3px 0 #fff;
font-size: 40px;
}
.mask > button {
width: 150px;
line-height: 35px;
text-align: center;
color: #fff;
background: linear-gradient(#74accf, #007ddc);
border-radius: 20px;
border: none;
outline: none;
font-size: 20px;
position: absolute;
top: 320px;
left: 50%;
margin-left: -75px;
}
/*
* @Author: 码小余
* @Date: 2020-06-18 14:32:18
* @LastEditTime: 2020-06-18 18:38:53
* @FilePath: \代码\56-狂拍灰太狼\js\index.js
*/
$(function () {
// 1. 监听游戏规则的点击
$(".rules").click(function (e) {
$(".rule").stop().fadeIn(100);
});
// 2. 监听关闭按钮的点击
$(".close").click(function (e) {
$(".rule").stop().fadeOut(100);
});
// 3. 监听开始按钮的点击
$(".start").click(function (e) {
$(this).stop().fadeOut(100);
// 调用处理进度条的方法
progressHandler();
// 调用处理灰太狼动画的方法
startWolfAnimation();
});
// 4. 监听重新开始按钮的点击
$(".reStart").click(function () {
// 得分重置为0
$(".score").text(0);
$(".mask").stop().fadeOut(100);
// 调用处理进度条的方法
progressHandler();
// 调用开始灰太狼动画的方法
startWolfAnimation();
});
// 定义一个专门处理进度条的方法
function progressHandler() {
// 重新设置进度条的宽度
$(".progress").css({
width: 180,
});
// 开启定时器处理进度条
var timer = setInterval(function () {
// 拿到进度条当前的宽度
var progressWidth = $(".progress").width();
// 减少当前的宽度
progressWidth -= 1;
// 重新给进度条赋值宽度
$(".progress").css({
width: progressWidth,
});
// 监听进度条是否走完
if (progressWidth <= 0) {
// 关闭定时器
clearInterval(timer);
// 显示重新开始界面
$(".mask").stop().fadeIn(100);
// 停止灰太狼的动画
stopWolfAnimation();
}
}, 100);
return timer;
}
var wolfTimer;
// 定义一个专门处理灰太狼动画的方法
function startWolfAnimation() {
// 1.定义两个数组保存所有灰太狼和小灰灰的图片
var wolf_1 = [
"./images/h0.png",
"./images/h1.png",
"./images/h2.png",
"./images/h3.png",
"./images/h4.png",
"./images/h5.png",
"./images/h6.png",
"./images/h7.png",
"./images/h8.png",
"./images/h9.png",
];
var wolf_2 = [
"./images/x0.png",
"./images/x1.png",
"./images/x2.png",
"./images/x3.png",
"./images/x4.png",
"./images/x5.png",
"./images/x6.png",
"./images/x7.png",
"./images/x8.png",
"./images/x9.png",
];
// 2.定义一个数组保存所有可能出现的位置
var arrPos = [
{
left: "100px", top: "115px" },
{
left: "20px", top: "160px" },
{
left: "190px", top: "142px" },
{
left: "105px", top: "193px" },
{
left: "19px", top: "221px" },
{
left: "202px", top: "212px" },
{
left: "120px", top: "275px" },
{
left: "30px", top: "295px" },
{
left: "209px", top: "297px" },
];
// 3. 创建一个图片
var $wolfImage = $("");
// 随机获取图片的位置
var posIndex = Math.round(Math.random() * 8);
// 4. 设置图片显示的位置
$wolfImage.css({
position: "absolute",
left: arrPos[posIndex].left,
top: arrPos[posIndex].top,
});
// 随机获取数组的类型
var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
// 5. 设置图片的内容
window.wolfIndex = 0;
window.wolfIndexEnd = 5;
wolfTimer = setInterval(function () {
if (wolfIndex > wolfIndexEnd) {
$wolfImage.remove();
clearInterval(wolfTimer);
startWolfAnimation();
}
$wolfImage.attr("src", wolfType[wolfIndex]);
wolfIndex++;
}, 300);
// 6. 将图片添加到界面上
$(".container").append($wolfImage);
// 7. 调用处理游戏规则的方法
gameRules($wolfImage);
}
// 处理游戏规则的方法
function gameRules(wolfImage) {
wolfImage.one("click", function () {
// 修改索引
window.wolfIndex = 5;
window.wolfIndexEnd = 9;
// 拿到当前点击土拍你的地址
var $src = $(this).attr("src");
// 根据图片地址判断是否是灰太狼
var flag = $src.indexOf("h") >= 0;
// 根据点击的图片类型增减分数
if (flag) {
// +10
$(".score").text(parseInt($(".score").text()) + 10);
} else {
// -10
$(".score").text(parseInt($(".score").text()) - 10);
}
});
}
// 定义停止动画方法
function stopWolfAnimation() {
$(".wolfImage").remove();
clearInterval(wolfTimer);
}
});
实现效果如下: