首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：克乄浪木守 | 来源：互联网 | 2023-08-15 21:49
篇首语：本文由编程笔记#小编为大家整理，主要介绍了从零开发一个灰太狼游戏是什么样的体验？（建议收藏）相关的知识，希望对你有一定的参考价值。

篇首语：本文由编程笔记#小编为大家整理，主要介绍了从零开发一个灰太狼游戏是什么样的体验？（建议收藏）相关的知识，希望对你有一定的参考价值。







极客江南&＃xff1a; 一个对开发技术特别执着的程序员&＃xff0c;对移动开发有着独到的见解和深入的研究&＃xff0c;有着多年的ios、android、html5开发经验&＃xff0c;对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 Javascript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、php等服务端技术。


先上一张效果图&＃xff1a;
在这里插入图片描述


  • 开发思路

开发一个游戏&＃xff0c;首先你需要知道游戏的规则。

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

规则&＃xff1a;


  • 游戏时间 60 s
  • 游戏角色为灰太狼、小灰灰
  • 拼手速殴打灰太狼
  • 殴打灰太狼 &＃43; 10 分&＃xff0c;殴打小灰灰 - 10 分

开发技术


  • html
  • css
  • jq

实现思路


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

核心逻辑


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


HTML 代码



<html lang&＃61;"en">
<head>
<meta charset&＃61;"UTF-8">
<title>狂拍灰太狼title>
<link rel&＃61;"stylesheet" href&＃61;"css/index.css">
<script src&＃61;"js/jquery-1.12.4.js">script>
<script src&＃61;"js/index.js">script>
head>
<body>
<div class&＃61;"container">
<h1 class&＃61;"score">0h1>
<div class&＃61;"progress">div>
<button class&＃61;"start">开始游戏button>
<div class&＃61;"rules">游戏规则div>
<div class&＃61;"rule">
<p>游戏规则:p>
<p>1.游戏时间:60sp>
<p>2.拼手速,殴打灰太狼&＃43;10分p>
<p>3.殴打小灰灰-10分p>
<a href&＃61;"#" class&＃61;"close">[关闭]a>
div>
<div class&＃61;"mask">
<h1>GAME OVERh1>
<button class&＃61;"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 &＃61; setInterval(function () {
// 拿到进度条当前的宽度
var progressWidth &＃61; $(".progress").width();
// 减少当前的宽度
progressWidth -&＃61; 1;
// 重新给进度条赋值宽度
$(".progress").css({
width: progressWidth
});
// 监听进度条是否走完
if(progressWidth <&＃61; 0){
// 关闭定时器
clearInterval(timer);
// 显示重新开始界面
$(".mask").stop().fadeIn(100);
// 停止灰太狼的动画
stopWolfAnimation();
}
}, 100);
}
var wolfTimer;
// 定义一个专门处理灰太狼动画的方法
function startWolfAnimation() {
// 1.定义两个数组保存所有灰太狼和小灰灰的图片
var wolf_1&＃61;[&＃39;./images/h0.png&＃39;,&＃39;./images/h1.png&＃39;,&＃39;./images/h2.png&＃39;,&＃39;./images/h3.png&＃39;,&＃39;./images/h4.png&＃39;,&＃39;./images/h5.png&＃39;,&＃39;./images/h6.png&＃39;,&＃39;./images/h7.png&＃39;,&＃39;./images/h8.png&＃39;,&＃39;./images/h9.png&＃39;];
var wolf_2&＃61;[&＃39;./images/x0.png&＃39;,&＃39;./images/x1.png&＃39;,&＃39;./images/x2.png&＃39;,&＃39;./images/x3.png&＃39;,&＃39;./images/x4.png&＃39;,&＃39;./images/x5.png&＃39;,&＃39;./images/x6.png&＃39;,&＃39;./images/x7.png&＃39;,&＃39;./images/x8.png&＃39;,&＃39;./images/x9.png&＃39;];
// 2.定义一个数组保存所有可能出现的位置
var arrPos &＃61; [
{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 &＃61; $("");
// 随机获取图片的位置
var posIndex &＃61; Math.round(Math.random() * 8);
// 4.设置图片显示的位置
$wolfImage.css({
position: "absolute",
left:arrPos[posIndex].left,
top:arrPos[posIndex].top
});
// 随机获取数组类型
var wolfType &＃61; Math.round(Math.random()) &＃61;&＃61; 0 ? wolf_1 : wolf_2;
// 5.设置图片的内容
window.wolfIndex &＃61; 0;
window.wolfIndexEnd &＃61; 5;
wolfTimer &＃61; setInterval(function () {
if(wolfIndex > wolfIndexEnd){
$wolfImage.remove();
clearInterval(wolfTimer);
startWolfAnimation();
}
$wolfImage.attr("src", wolfType[wolfIndex]);
wolfIndex&＃43;&＃43;;
}, 300);
// 6.将图片添加到界面上
$(".container").append($wolfImage);
// 7.调用处理游戏规则的方法
gameRules($wolfImage);
}
function gameRules($wolfImage) {
$wolfImage.one("click",function () {
// 修改索引
window.wolfIndex &＃61; 5;
window.wolfIndexEnd &＃61; 9;
// 拿到当前点击图片的地址
var $src &＃61; $(this).attr("src");
// 根据图片地址判断是否是灰太狼
var flag &＃61; $src.indexOf("h") >&＃61; 0;
// 根据点击的图片类型增减分数
if(flag){
// &＃43;10
$(".score").text(parseInt($(".score").text()) &＃43; 10);
}else{
// -10
$(".score").text(parseInt($(".score").text()) - 10);
}
});
}
function stopWolfAnimation() {
$(".wolfImage").remove();
clearInterval(wolfTimer);
}
});

最终效果
在这里插入图片描述
在这里插入图片描述

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

大家记得收藏前&＃xff0c;先点个赞哦&＃xff01;好的文章值得被更多人看到。



推荐阅读&＃xff1a;


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

10万字Go语言保姆级教程

2 万字 Jquery 入门教程

3 万字 html &＃43;css 入门教程

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






推荐阅读
  • web

    从零基础到精通的前台学习路线

    从零基础到精通的前台学习路线
    随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]
  • web

    前端人员必须知道的三个问题及其发展阶段

    本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]
  • web

    mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决

    mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条，因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • filter

    jquery ajax 跨域问题

    前言：关于跨域CORS1.没有跨域时，ajax默认是带cookie的2.跨域时，两种解决方案：1）服务器端在filter中配置详情：http:blog.csdn.netwzl002 ... [详细]
  • request

    Java实战之电影在线观看系统的实现

    Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • web

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • web

    安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...

    安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fab ... [详细]
  • web

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • web

    javaweb多图片打包下载，弹出提示框问题_html/css_WEBITnose

    在springmvc框架中，前台ajax调用方法，对图片批量下载，如何弹出提示保存位置选框？Controller方法 ... [详细]
  • web

    HTML5网页模板怎么加百度统计？

    HTML5网页模板怎么加百度统计？
    本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • web

    Android实战——jsoup实现网络爬虫，糗事百科项目的起步

    Android实战——jsoup实现网络爬虫，糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法，以糗事百科项目为例。对于初学者来说，数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据，并以糗事百科作为练手项目。同时，提到了使用jsoup需要结合前端基础知识，以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • web

    深入剖析jquery源码，探寻框架底层原理

    随着前端技术的发展，越来越多的开发者开始使用react、vue等web框架，但很少有人深入理解这些框架的源码。然而，这些框架底层都是由原生的javascript构建而成。对于初学前端的人来说，可能会认为javascript很容易上手，但实际上只是因为它被高度封装了。与能够使用封装类的人相比，能够理解框架原理的人则处于另一个层面。本文将深入剖析jquery源码，探寻框架底层的原理，帮助读者更好地理解web框架的运行机制。 ... [详细]
  • web

    wpf+mvvm代码组织结构及实现方式

    wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历，认为mvvm模式使得开发更加专注于业务且高效。与此同时，作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子，以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构，将数据交给UI自行改变，从而解放劳动力，避免加班。 ... [详细]
  • filter

    DataTables插件介绍及使用方法

    本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • web

    关于extjs开发实战pdf的信息

    关于extjs开发实战pdf的信息
    本文目录一览：1、extjs实用开发指南2、本 ... [详细]
author-avatar
克乄浪木守
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有