jQuery实现小游戏源代码--打灰太狼

注：该游戏是通过学习B站李南江老师jQuery后，再其基础上做的修正。

不多说，直接上代码:代码有详细的注释，应该不难看懂

首先是HTML代码:值得一提的是，我这里引入的是jQuery1.12.4版本的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>打灰太狼</title><link rel="stylesheet" href="css/index.css"><script src="../jquery-1.12.4.js"></script><script src="js/index.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="javascript:;" class="close">关闭</a></div><!-- 游戏结束界面--><div class="mask"><h1>GAME OVER</h1><button class="reStart">重新开始</button></div>
</div>
</body>
</html>

接下来是CSS样式：

* {margin: 0px;padding: 0px;
}.container {width: 320px;height: 480px;margin: 100px auto;background: url("../img/game_bg.jpg") no-repeat 0 0;position: relative;overflow: hidden;
}.container > h1 {color: white;margin-left: 56px;
}.container > .progress {width: 180px;height: 16px;background: url("../img/progress.png") no-repeat 0px 0px;position: absolute;top: 66px;left: 63px;
}.container > .start {width: 150px;line-height: 35px;position: absolute;top: 400px;left: 85px;background: linear-gradient(#E55C3D, #C50000);border-radius: 30px;border: none;color: white;font-size: 18px;
}.container > .rules {width: 100%;line-height: 20px;position: absolute;bottom: 0px;background-color: #cccccc;text-align: center;
}/*以下为游戏规则样式*/
.container > .rule {width: 320px;height: 439px;position: absolute;background: rgba(0, 0, 0, 0.5);padding-top: 50px;text-align: center;box-sizing: border-box;/*默认隐藏*/display: none;
}.rule > p {color: white;margin-top: 30px;
}.rule > .close {display: inline-block;margin-top: 30px;color: #00CC00;
}/*以下的为游戏结束样式*/
.container > .mask {width: 320px;height: 439px;position: absolute;background: rgba(0, 0, 0, 0.5);padding-top: 100px;text-align: center;box-sizing: border-box;/*默认不显示*/display: none;
}.mask > h1 {color: white;font-size: 40px;text-shadow: 3px 3px 0px #ffffff;
}.mask > .reStart {width: 150px;line-height: 35px;position: absolute;top: 356px;left: 85px;background: linear-gradient(#74ACCF, #007DDC);border-radius: 30px;border: none;color: white;font-size: 18px;
}

还有JS的代码如下：

$(function () {//进度条定时器名称var timer//切换图片的定时器名称var wolfTimer//变量a，用来判断定时器是否已经开始执行,默认为0没有开启var a = 0//变量b，用来判断动画灰太狼是否已经执行,默认为0没有开启var b = 0//1监听游戏规则按钮$(".rules").click(function () {//暂停进度条定时器clearInterval(timer)//暂停灰太狼动画stopWolfAnimation()//显示游戏规则界面$(".rule").stop().fadeIn(100)})//2监听关闭按钮$(".rule>a").click(function () {//a不等于0说明定时器没有执行过，恢复当前的进度条定时器//可以避免一开始就点游戏规则而导致游戏开始执行！！if (a !== 0 && b !== 0) {//恢复当前的进度条定时器progress()//恢复灰太狼动画startWolfAnimation()} else {//暂停灰太狼动画stopWolfAnimation()}//隐藏游戏规则界面$(".rule").stop().fadeOut(100)})//3监听开始游戏按钮$(".start").click(function () {//让开始按钮隐藏$(this).stop().fadeOut(100)//让进度条开始执行，调用定时器函数progress()//调用执行灰太狼动画的定时器startWolfAnimation()})//4监听重新开始的按钮$(".mask").click(function () {//当显示重新开始按钮时，说明定时器已经至少调用一次了，所以将a重新设为0a = 0//当点击时，隐藏当前结束界面，显示游戏开始时的默认界面$(this).stop().fadeOut(100)//让进度条立刻恢复成原来的宽度$(".progress").css("width", 180)//显示开始游戏按钮$(".start").fadeIn(100)//点击重新开始时，将已累加的分数清零$(".container>h1").text(0)})//设置进度条的定时器function progress() {timer = setInterval(function () {//当调用定时器时，a值变成1，表至少已执行过一次a = 1;//获取当前进度条的宽度var width = $(".progress").width()//每次减2个宽度，并设置给当前的进度条width -= 2$(".progress").width(width)if (width <= 0) {//当进度条为0时停止定时器clearTimeout(timer)//当进度条为0时，显示游戏结束界面$(".mask").stop().fadeIn(100)//进度条结束后，调用停止灰太狼动画的定时器stopWolfAnimation()}}, 100)}//设置一个用来显示动画灰太狼的方法function startWolfAnimation() {//一旦调用动画，b值改为1，表至少已执行过一次b = 1// 1.定义两个数组保存所有灰太狼和小灰灰的图片var wolf_1 = ['./img/h0.png', './img/h1.png', './img/h2.png', './img/h3.png', './img/h4.png', './img/h5.png', './img/h6.png', './img/h7.png', './img/h8.png', './img/h9.png'];var wolf_2 = ['./img/x0.png', './img/x1.png', './img/x2.png', './img/x3.png', './img/x4.png', './img/x5.png', './img/x6.png', './img/x7.png', './img/x8.png', './img/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 $img = $("<img src='' class='wolfImage'>")//4获取随机数,用来获取图片的位置var int = Math.ceil(Math.random() * 8)//5设置图片位置$($img).css({position: "absolute",left: arrPos[int].left,top: arrPos[int].top})//6获取数据数组类型（0或1）0为灰太狼 1为小灰灰var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2//7设置定时器，用来设置图片的切换,默认从第一张开始window.imgIndexStart = 0window.imgIndexStop = 5wolfTimer = setInterval(function () {//只用切换到第五张图if (imgIndexStart >= imgIndexStop) {//删除图片$(".wolfImage").remove()//清除定时器clearInterval(wolfTimer)//重新调用:执行灰太狼动画的方法startWolfAnimation()}//设置图片中的src属性的值$img.attr("src", wolfType[imgIndexStart])imgIndexStart++;}, 200)//8将图片添加到界面上$(".container").append($img)//9调用游戏规则方法gameRules($img)}//创建一个游戏得分规则方法function gameRules($img) {//给图片绑定只能执行一次的单击响应事件$($img).one("click", function () {//当点击图片时，修改切换图片的索引，显示敲打图片window.imgIndexStart = 5window.imgIndexStop = 9//获取当前图片的灰太狼（包含 h）还是小灰灰(包含 x)var str = $(this).attr("src")//包含'h'的大于0，返回true，代表灰太狼，否则为小灰灰var flag = str.indexOf("h") >= 0if (flag) {//打灰太狼加十分$(".container>h1").text(parseInt($(".container>h1").text()) + 10)} else {//打小灰灰减十分$(".container>h1").text(parseInt($(".container>h1").text()) - 10)}})}//设置一个用来暂停动画灰太狼的方法function stopWolfAnimation() {//删除图片对象$(".wolfImage").remove()//清楚切换图片的定时器clearInterval(wolfTimer)}})

最终实现效果如下：该小游戏会自动计时计分等

该小游戏所需要的图片资源在以下链接中，可自取：

链接：https://pan.baidu.com/s/1iONaeBpq1c2-Zfs7JxhSaQ
提取码：2nvb

jQuery实现小游戏源代码--打灰太狼相关推荐

网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
python双手打字_Python打字练习小游戏源代码
Python打字练习小游戏源代码 Python代码狂人 Python代码大全 Python打字练习小游戏源程序,随机产生一串字符,可对打字练习的正确率和时间进行统计,运行截图如下: from tkin ...
Python我的世界小游戏源代码
我的世界小游戏使用方法: 移动前进:W,后退:S,向左:A,向右:D,环顾四周:鼠标,跳起:空格键,切换飞行模式:Tab; 选择建筑材料砖:1,草:2,沙子:3,删除建筑:鼠标左键单击,创建建筑块 ...
Python制作的赛车小游戏源代码，逆行飙车
python制作的赛车小游戏,逆行飙车,通过键盘方向键控制程序运行截图: 源代码 import pygame, sys, time, random# pygame 初始化 pygame.init() ...
单机版斗地主游戏源代码，纯JS编写的斗地主单机版小游戏源代码
单机版斗地主游戏源代码,纯JS编写的斗地主单机版小游戏源代码,下载游戏后,直接运行index.html即可. 完整代码下载地址:单机版斗地主游戏源代码 index.html <!DOCTYPE ...
java怎么跑游戏_RunGame java赛跑小游戏源代码和素材，适合新手入门练手。 Develop 272万源代码下载- www.pudn.com...
文件名称: RunGame下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 1650 KB 上传时间: 2017-03-11 下载次数: 0 提供者: kek ...
Python版基于pygame的玛丽快跑小游戏源代码，玛丽冒险小游戏代码，支持双人模式
基于pygame的玛丽快跑小游戏源代码,玛丽冒险小游戏代码,支持双人模式按空格进入单人模式,按't'进入双人模式,双人模式下玛丽1采用空格键上跳,玛丽2采用方向上键上跳. 完整代码下载地址:Pyth ...
Python版跳跳方块小游戏源代码，跳跳益智游戏代码
Python版跳跳方块小游戏源代码,跳跳益智游戏代码,通过方向键的左右键来控制方块向左上还右上跳跃,按R键重要开始游戏.相当有难度,快来挑战你自己吧 jump_square.py # import o ...
Python版见缝插针小游戏源代码，球球旋转大作战源程序
见缝插针游戏是一款非常考验玩家手眼协调能力的休闲益智虐心虐脑小游戏,玩法很简单,但要过关却很有挑战性哟! 主要是将一系列的小球,插入到旋转的摩天轮转盘当中,插入过程中不能碰到旋转的摩天轮上的其他小球, ...

jQuery实现小游戏源代码--打灰太狼

注：该游戏是通过学习B站李南江老师jQuery后，再其基础上做的修正。

该小游戏所需要的图片资源在以下链接中，可自取：

jQuery实现小游戏源代码--打灰太狼相关推荐

最新文章

热门文章