效果图如下: 一.简介: 什么是Bootstrap?  Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架. 什么是响应式布局? 引用一句Bootstrap的标题语 "Bootstrap的响应式 CSS 能够自适应于台式机.平板电脑和手机". 简而言之就是:只用编写一次静态的HTML和CSS,在不同分辨率的设备上就能展现不同的布局样式. 二.利用BootStrap完成响应式布局. 用传统的布局方式,我们会怎么完成效果图呢?  Div+CSS  浮动+内外边距 是的…
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能进行基本操作了. 敌机对象的实现,并且初步完成了boos出现(30s自动出现).然后又引出了许多方法的处理,如英雄子弹击中敌机和boos,英雄与敌机相撞等等.并一一解决. 随后又设置了一些游戏的参数,如血量,关卡数,等级,积分,必杀,道具对象等等. 最后又完成了一些辅助功能,暂停游戏,继续游戏,退出…
一.先给他们提供一个"浪漫的"环境,比如传说中的"鹊桥"--java环境变量.哈哈! 配置java环境变量. 下载jdk,根据自己电脑的版本和操作位数选择不同的安装包,这里以windows为例(x86 代表32位,x64代表64位),建议下载和操作系统同位数的jdk安装包. *查看电脑位数:进入"我的电脑"->空白处右击->属性,跳出以下界面,红框标记处就是您的电脑的 *jdk下载地址: http://www.oracle.com/t…
整体展示: 上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等.并且我们在实现这些功能的时候需要计时器去调用这些方法.setInterval(fun,ms) 在调用setInterval()会返回一个类似id的字段,该字段在clearInterval(id)可以指定相应的计时器并清除 一.开始游戏 /** * 面板441*632 * 飞机 66*80 */ /** * 开始游戏 */ function startGame() { var…
整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = false; //左移动标志 var rightbtn = false; //右移动标志 var topbtn = false; //上移动标志 var bottombtn = false; //下移动标志 var shot = false; //射击标志 //var bulletStatus =…
来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 左侧:选择的是Tomcat的版本,这里以Tomcat 7为例. 右边可以选择不同的安装版本,红框部分是windows的zip安装版本, 选择和自己jdk位数一样的位数,进行下载就行了. 安装Tomcat 那就很简单了解压就行了,解压后如下图: 解压后选择 bin目录下面的->startup.…
一.公布上一讲中玩家飞机上.下.右移动实现的代码: /*=========================键盘按下事件 keycode为得到键盘相应键对应的数字====================*/ document.body.onkeydown=function(code) { if(code.keyCode==37) { //当键盘按下的是左键(对应的数字是37) leftbtn=true; // } if(code.keyCode==38) { //键盘按的是上键 topbtn=tr…
一.通过点击按钮事件,实现四大界面之间的跳转: (一)跳转的思路: 1.打开软件,只显示登录界面(隐藏游戏界面.暂停界面.玩家死亡界面) 2.点击微信登录(QQ登录)跳转到游戏界面,隐藏登录界面 3.点击暂停,弹出具有透明度的暂停界面 4.点击暂停界面的开始按钮,隐藏暂停界面,调用开始方法(点击登录跳转的方法): 5.点击暂停界面的退出游戏,只显示登录界面,隐藏其他界面: 6.游戏结束界面,该界面的跳转目前还不能通过游戏实现,可以先建设(根据上一讲的游戏界面图片制作). 7.点击游戏结束界面的开…
一.创建敌方飞机 1.思考创建思路: 创建敌方飞机思路与创建玩家飞机思路一样: (1)思考敌方飞机具备什么属性: 敌方飞机的图片.坐标.飞行速度.状态(是否被击中) 设置小飞机被击中时消失时间.飞机可以移动 2.创建敌方飞机对象,在这里我创建两种飞机,根据玩家等级不同出现不同的飞机(小飞机和中飞机) 3.在创建飞机对象的方法中定义敌方飞机的移动方法(这里设置的敌方飞机移动方向是从上到下). 4.将创建的飞机对象以节点形式添加到游戏界面 /*敌方小飞机对象*/ function createsme…
一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面的宽度和高度要一致): HTML代码: <!--main div是游戏界面的大DIV --> <div id="main" style="height: 643px;"> <!--玩家头像DIV--> <div id="…