整体效果展示:

一、实现思路

如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图。

  1. 游戏界面的完成
  2. 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现。在此时,英雄飞机能进行基本操作了。
  3. 敌机对象的实现,并且初步完成了boos出现(30s自动出现)。然后又引出了许多方法的处理,如英雄子弹击中敌机和boos,英雄与敌机相撞等等。并一一解决。
  4. 随后又设置了一些游戏的参数,如血量,关卡数,等级,积分,必杀,道具对象等等。
  5. 最后又完成了一些辅助功能,暂停游戏,继续游戏,退出游戏等。

当然,我做的并不是一个完全版,还有很多需要改进的地方。我只是初步实现了飞机大战游戏最初级的游戏体验,还需要多多学习去完善。

二、游戏界面的完成(主界面)

展示:

要实现这个的界面,主要是用到了css中animation(动画)属性来进行设置。下面我会贴出我写的代码。

html代码:

        <!--主界面(游戏界面)-->
<div class="main" id="main">
<!--背景图片盒子-->
<div class="bg" class="bg">
<!--背景图片-->
<img src="img/bg1.jpg" id="back1"/>
<img src="img/bg1.jpg" id="back2"/>
</div>
<!--游戏参数盒子-->
<div class="info">
<span>击杀:</span><span id="killNum">0</span><br />
<span>得分:</span><span id="score">0</span><br />
<span>血量:</span><span id="blood">0</span><br />
<span>等级:</span><span id="level">0</span><br />
<span>炸弹:</span><span id="boom">0</span><br />
<img src="img/end1.jpg" width="80px" height="80px"/>
</div>
<!--暂停按钮-->
<div class="btn_pause" onclick="stopGame()">
<!--暂停按钮-->
<img src="img/pause1.png" />
</div>
</div>

css样式:

/*
*主界面样式
* */
.main {
position: absolute;
width: 441px;
height: 632px;
left: 35%; /*右移动*/
overflow: hidden; /*溢出部分隐藏不可见*/
z-index: -3; /*元素的堆叠顺序*/
}
/**
* 背景盒子
*/
.bg{
position: absolute;
width: 441px;
height: 632px;
z-index: -3;
/*
* -webkit-谷歌浏览器前缀是兼容性处理,还有火狐-moz-,IE-ms-
* 参数对应说明:动画名(类似函数名,调用函数一样) 时间(多久完成),播放次数(无限),速度(匀速播放)
*/
-webkit-animation: bg 10s infinite linear;
}
/*
* 背景图片
* 取消两张图片间的断层
*/
.bg img{
float: left;
}
@-webkit-keyframes bg{
from{margin-top: -932px}
to{margin-top: -150px}
}

第一次发帖,还不熟悉套路,请大家多多包涵!

以上为今天的第一讲,如需了解更加深入的知识,请大家进入知了堂社区:http://www.zhiliaotang.com/portal.php;

[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)的更多相关文章

  1. 【知了堂学习笔记】java 自定义异常

    java 常见异常种类(Java Exception): 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCas ...

  2. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)

    整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval ...

  3. [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)

    整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...

  4. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第3讲(玩家发射子弹)

    一.公布上一讲中玩家飞机上.下.右移动实现的代码: /*=========================键盘按下事件 keycode为得到键盘相应键对应的数字==================== ...

  5. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第2讲(四大界面之间的跳转与玩家飞机的移动)

    一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3. ...

  6. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第4讲(创建敌方飞机、敌方飞机发射子弹、玩家子弹击中敌方小飞机,小飞机死亡)

    一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可 ...

  7. [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)

    一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...

  8. [知了堂学习笔记]_记一次BootStrap的使用

    效果图如下: 一.简介: 什么是Bootstrap?  Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. 什么是响应式布局? 引用一句Bootstrap的标题语 " ...

  9. [知了堂学习笔记]_集合接口list与集合接口set的区别

    在Java中 除了 Map以外的集合的根接口都是Collection接口,而在Collection接口的子接口中,最重要的莫过于List和Set集合接口. 今天我们就来谈谈List集合接口与Set集合 ...

随机推荐

  1. 记一次nginx部署yii2项目时502 bad gateway错误的排查

    周六闲来无事,就试着安装和部署下yii2,安装过程没什么问题,但部署到nginx上时遇到了502 bad gatewary问题,折腾了半天才搞定.这个问题是我以前在部署yii2时没有遇到过的,因此记在 ...

  2. Activity之间传递参数(一)

    -------siwuxie095 传递简单数据 (1)首先创建一个项目:SendArgs (2)选择API:21 Android 5.0 (3)选择 Empty Activity (4)默认 (5) ...

  3. seeting菜单界面形成--优化

    本文是上一篇文章的优化版: 上文链接地址:http://www.cnblogs.com/zzw1994/p/5016864.html 上文中有很多方法都是过时,并且效率不是很高,主要对JAVA代码进行 ...

  4. ios开发--旋转、移动、缩放手势实例代码

    代码如下: // 添加所有的手势 - (void) addGestureRecognizerToView:(UIView *)view { // 旋转手势 UIRotationGestureRecog ...

  5. Java集群之session共享解决方案

    随着互联网的日益壮大,网站的pv和uv成线性或者指数倍的增加.单服务器单数据库早已经不能满足实际需求.比如像盛大,淘宝这样的大型网络公司,更是如此.     集群,也就是让一组计算机服务器协同工作,达 ...

  6. 地下迷宫(bfs输出路径)

    题解:开一个pre数组用编号代替当前位置,编号用结构题另存,其实也可以i*m+j来代替,我写的有点麻烦了; 代码: #include <iostream> #include <cst ...

  7. 重新绑定ItemsSource先设置ItemsSource = null;的原因

    即报错信息为:在使用 ItemsSource 之前,项集合必须为空.   原因:Items和ItemSource,只能有一个生效,想用其中一个,另一个必须是空.   重新绑定ItemSource,虽然 ...

  8. Web SCADA 电力接线图工控组态编辑器

    前言 SVG并非仅仅是一种图像格式, 由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步.如SVG可以内嵌于其他的XML文档中,而SVG文档中 ...

  9. HDU4343Interval query 倍增

    去博客园看该题解 题意 给定n个区间[a,b),都是左闭右开,有m次询问,每次询问你最多可以从n个区间中选出多少[L,R]的子区间,使得他们互不相交. n,m<=10^5. 区间下标<=1 ...

  10. Quartz的基本使用之入门(2.3.0版本)

    一.Quartz可以用来做什么 Quartz是一个强大任务调度框架,我工作时候会在这些情况下使用到quartz框架,当然还有很多的应用场景,在这里只列举2个实际用到的 餐厅系统会在每周四晚上的22点自 ...