从零开发一个灰太狼游戏是什么样的体验？（建议收藏）

极客江南：一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。

先上一张效果图：

开发思路

开发一个游戏，首先你需要知道游戏的规则。

这个游戏名为狂拍灰太狼。

规则：

游戏时间 60 s
游戏角色为灰太狼、小灰灰
拼手速殴打灰太狼
殴打灰太狼 + 10 分，殴打小灰灰 - 10 分

开发技术

html
css
jq

实现思路

1.利用 html + css 布局游戏界面
2.导入 jq 库
3.实现狂拍灰太狼游戏逻辑

核心逻辑

封装 60 s 进度条方法
封装处理灰太狼动画的方法
游戏按钮点击监听

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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">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 0 0;margin: 50px auto;position: relative;
}
.container>h1{color: white;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: white;background: linear-gradient(#E55C3D,#C50000);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;
}
.container>.rules{width: 100%;height: 20px;background: #ccc;position: absolute;left: 0;bottom: 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: white;
}
.rule>a{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: white;background: linear-gradient(#74ACCF,#007DDC);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;
}

jq 代码

$(function () {// 1.监听游戏规则的点击$(".rules").click(function () {$(".rule").stop().fadeIn(100);});// 2.监听关闭按钮的点击$(".close").click(function () {$(".rule").stop().fadeOut(100);});// 3.监听开始游戏按钮的点击$(".start").click(function () {$(this).stop().fadeOut(100);// 调用处理进度条的方法progressHandler();// 调用处理灰太狼动画的方法startWolfAnimation();});// 4.监听重新开始按钮的点击$(".reStart").click(function () {$(".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);}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 = $("<images src='' class='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);}
});

最终效果

基本制作过程不是很难，核心是理解其中的业务逻辑。

大家记得收藏前，先点个赞哦！好的文章值得被更多人看到。

推荐阅读：

13万字C语言保姆级教程2021版

10万字Go语言保姆级教程

2 万字 Jquery 入门教程

3 万字 html +css 入门教程

最后，再多一句，粉丝顺口溜，关注江哥不迷路，带你编程上高速。

从零开发一个灰太狼游戏是什么样的体验？（建议收藏）相关推荐

适合新手：从零开发一个IM服务端（基于Netty，有完整源码）
本文由"yuanrw"分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言站长提示:本文适合IM新手阅读 ...
如何从零开发一个低代码平台，有哪些成熟技术组件可用
目前国内主流的低代码开发平台有:宜搭.云程.简道云.明道云.氚云.伙伴云.道一云.JEPaaS.华炎魔方.搭搭云.JeecgBoot .RuoYi等.这些平台各有优劣势,定位也不同,用户可以根据自己需 ...
基于c#的游戏编程语言,基于C#语法的Unity3d技术，设计和开发一个格斗游戏实战...
基于C#语法的Unity3d技术,设计和开发一个格斗游戏实战 [资料目录] 001游戏知识介绍.mp4 002架构设计.mp4 003UI设计原理.mp4 004战斗系统.mp4 005.热更新技术. ...
视频教程-从零开发一个iOS企业级项目实战之我的云音乐视频教程-iOS
从零开发一个iOS企业级项目实战之我的云音乐视频教程任苹蜻,爱学啊创始人 & CEO,曾就职于某二车手公司担任Android工程师后离职创办爱学啊,我们的宗旨是:人生苦短,我们只做好课!熟 ...
如何不用服务器来开发一个小游戏
我是代长新,来自上海享物说,主要负责游戏客户端研发. 享物说是一个大家可以互相赠送物品,有趣.不花钱的社区平台.为了创造更好的社区氛围,我们决定通过小游戏来增加社区的趣味性和互动性. <乐享花园 ...
从零开发一个命令行脚手架工具等
大家好,我是若川.今天周末,话不多说,这一次花了几小时精心为大家挑选了20余篇好文,供大家阅读学习.本文阅读技巧,先粗看标题,感兴趣可以都关注一波,绝对不亏. 前端宇宙小编就职于某大厂,是个爱前端爱 ...
只需6步，教你从零开发一个签到小程序
摘要:针对于具备瞬时流量.业务场景比较简单的小程序,开发者借助FunctionGraph,可以方便快捷的搭建一个健壮的小程序后台. 本文分享自华为云社区<智慧校园想搞好,FunctionGrap ...
如何开发一个小游戏？其中有什么难点
如果仅仅针对个人开发者来讲,要独立开发一款大型游戏几乎无可能,更大成功的可能还是开发一款类似<羊了个羊>这样洗脑的小程序游戏. 所以这里主要论述小游戏开发的情况,也就是小程序游戏,首先从小 ...
从零开发一个定制版音乐播放器，女朋友不就有了吗？
极客江南: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独 ...

从零开发一个灰太狼游戏是什么样的体验？（建议收藏）

从零开发一个灰太狼游戏是什么样的体验？（建议收藏）相关推荐

最新文章

热门文章