[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)
整体展示:
上一讲实现了诸多对象,这次我们就需要实现许多逻辑方法,如控制飞机移动,判断子弹击中敌机,敌机与英雄飞机相撞等等。并且我们在实现这些功能的时候需要计时器去调用这些方法。setInterval(fun,ms)
在调用setInterval()会返回一个类似id的字段,该字段在clearInterval(id)可以指定相应的计时器并清除
一、开始游戏
/**
* 面板441*632
* 飞机 66*80
*/
/**
* 开始游戏
*/
function startGame() {
var welcome = document.getElementById("welcome"); myPlane = new createPlane("img/own.png", 190, 550, 5, 5);
welcome.style.visibility = "hidden"; //将进入欢迎界面隐藏
// ctrlMove();
/*
* 启动定时器
*/
ctrlmove = setInterval(ctrlMove,20);
ctrlshot = setInterval(ctrlShot,200);
bulletfly = setInterval(bulletFly,20);
createenemy = setInterval(enemy,200);
enemymove = setInterval(enemyMove,20);
hitplane = setInterval(hitPlane,30);
exist = setInterval(isexist,20);
}
二、控制英雄飞机移动
/*
* 键盘监听,用于判断英雄的动作 wasd移动方向,j射击,k必杀
* 放在开始游戏方法中
*/
document.body.onkeydown = function(code){
if(code.keyCode == 65){
leftbtn = true;
}
if(code.keyCode == 68){
rightbtn = true;
}
if(code.keyCode == 87){
topbtn = true;
}
if(code.keyCode == 83){
bottombtn = true;
}
if(code.keyCode == 74){
shot = true;
}
if(code.keyCode == 75){
shotboom = true;
}
}
document.body.onkeyup=function(code){
if(code.keyCode==65){
leftbtn=false;
}
if(code.keyCode == 68){
rightbtn = false;
}
if(code.keyCode == 87){
topbtn = false;
}
if(code.keyCode == 83){
bottombtn = false;
}
if(code.keyCode == 74){
shot = false;
}
if(code.keyCode == 75){
shotboom = false;
}
}
/**
* 控制英雄移动的函数
*/
function ctrlMove(){
if(leftbtn==true){
myPlane.leftMove()
}
if(rightbtn==true){
myPlane.rightMove()
}
if(topbtn==true){
myPlane.topMove()
}
if(bottombtn==true){
myPlane.botoomMove()
}
//获取玩家参数
getInfo();
}
三、子弹击中对象
/**
* 子弹击中对象
*/
function hitPlane(){
/*
* 英雄子弹打中敌机
*/
for(i=0;i<bulletList.length;i++){ //遍历英雄子弹集合
for(j=0;j<enemyList.length;j++){ //遍历敌军集合
//获取子弹坐标和敌军坐标
var btop = parseInt(bulletList[i].bulletNode.style.top);
var bleft = parseInt(bulletList[i].bulletNode.style.left);
var etop = parseInt(enemyList[j].enemyNode.style.top);
var eleft = parseInt(enemyList[j].enemyNode.style.left);
if(!enemyList[j].isdead){
if(bleft>=eleft-5&&bleft<eleft+34&&btop>etop&&btop<etop+34){
bulletList[i].ishit=true; //击中把子弹状态改为true
if(--enemyList[j].blood<=0) //判断敌军是否死亡
enemyList[j].isdead=true;
}
}
}
}
/*
* boos子弹打中英雄
*/
var top = parseInt(myPlane.planeNode.style.top);
var left = parseInt(myPlane.planeNode.style.left);
for(i=0;i<boosBullet.length;i++){
var btop = parseInt(boosBullet[i].bulletNode.style.top);
var bleft = parseInt(boosBullet[i].bulletNode.style.left);
if(myPlane.blood>=0){
if(btop+55>=top&&btop<top+80&&bleft>=left-22&&bleft<left+40){
boosBullet[i].ishit=true;
myPlane.blood--;
}
}
} /**
*子弹打中BOOS
*/
for(i=0;i<bulletList.length;i++){
var btop = parseInt(bulletList[i].bulletNode.style.top);
var bleft = parseInt(bulletList[i].bulletNode.style.left);
for(j=0;j<boosList.length;j++){
var top=parseInt(boosList[j].enemyNode.style.top);
var left=parseInt(boosList[j].enemyNode.style.left);
if(!boosList[j].isdead){
if(bleft-5>=left&&bleft<left+90&&btop>=top&&btop<top+80){
console.log(boosList[j].blood)
bulletList[i].ishit=true;
if(--boosList[j].blood<=0)
boosList[j].isdead=true;
}
}
}
}
}
四、对象间碰撞
/**
* 对象相撞
*/
function strike(){
var mleft = parseInt(myPlane.planeNode.style.left);
var mtop = parseInt(myPlane.planeNode.style.top);
if(myPlane.blood>0){
for(i=0;i<enemyList.length;i++){ //遍历敌机
if(!enemyList[i].isdead){ //敌机是否死亡
var eleft = parseInt(enemyList[i].enemyNode.style.left);
var etop = parseInt(enemyList[i].enemyNode.style.top);
if(eleft>=mleft&&eleft<mleft+68&&etop>=mtop&&etop<mtop+80){ //碰撞判断
enemyList[i].isdead = true; //敌机一碰撞到英雄飞机立即死亡
enemyList[i].enemyNode.src ="img/enemybz.png"; //切换图片,制作爆炸特效
myPlane.blood--; //英雄血量减少
}
}
}
}
/*
* 得到道具
*/
if(myPlane.blood>0){ //判断英雄是否死亡
for(i=0;i<toolList.length;i++){ //遍历道具数组
if(!toolList[i].getme){
var tleft = parseInt(toolList[i].toolNode.style.left);
var ttop = parseInt(toolList[i].toolNode.style.top);
if(tleft>=mleft-15&&tleft<mleft+65&&ttop>=mtop&&ttop<mtop+80){
toolList[i].getme=true;
if(toolList[i].tooltype%2==1){ //tooltype单数为加必杀,双数为加血
if(myPlane.boom<5)
myPlane.boom++;
}else{
myPlane.blood++;
}
}
}
}
}
}
五、判断对象是否死亡
/*
* 判断对象是否存在
*/
function isexist(){
/*
* 判断敌机是否死亡
*/
for(i=0;i<enemyList.length;i++){
if(enemyList[i].isdead){ //敌机死亡
enemyList[i].enemyNode.src ="img/enemybz.png"; //将图片换成爆炸图片
if(enemyList[i].deadtime>=0){ //移除时间,也就是飞机死亡到移除的时间,实现爆炸的特效
enemyList[i].deadtime--;
}else{
score+=myPlane.level;
killNum++;
mainobj.removeChild(enemyList[i].enemyNode); //先移除节点
enemyList.splice(i,1); //再取消绑定
}
}
}
/*
* 判断英雄是否死亡
*/
if(myPlane.blood<=0){
mainobj.removeChild(myPlane.planeNode);
gameOver();
}
/*
* 判断boos是否死亡
*/
for(i=0;i<boosList.length;i++){
if(boosList[i].isdead){
if(boosList[i].deadtime<=0){
mainobj.removeChild(boosList[i].enemyNode)
boosList.splice(i,1);
score+=100*myPlane.level;
pass++;
nextGame();
}else{
boosList[i].deadtime--;
boosList[i].enemyNode.src="img/dfjbz.png";
}
}
}
/*
* 判断道具是否存在
*/ for(i=0;i<toolList.length;i++){
if(toolList[i].getme){
mainobj.removeChild(toolList[i].toolNode);
toolList.splice(i,1);
}
}
}
===============================================================================================================================
第二讲补充:
我在创建对象时候(除英雄飞机对象),都将其放进Arrar中,这是为了绑定该对象,为了方面找到这个对象。方便操作。
以上为今天的内容,如需了解更加深入的知识,请大家进入知了堂社区:http://www.zhiliaotang.com/portal.php;
[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第3讲(逻辑方法的实现)的更多相关文章
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
- 【知了堂学习笔记】java 自定义异常
java 常见异常种类(Java Exception): 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCas ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第2讲(对象的实现及全局变量的定义)
整体展示: 一.全局变量 /*===================玩家参数==========================*/ var myPlane; //英雄对象 var leftbtn = ...
- [知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&&添加Tomcat到Eclipse
来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-7 ...
- [知了堂学习笔记]_牵线Eclipse和Tomcat第一篇 —— 配置Java环境变量&&安装eclipse
一.先给他们提供一个"浪漫的"环境,比如传说中的"鹊桥"--java环境变量.哈哈! 配置java环境变量. 下载jdk,根据自己电脑的版本和操作位数选择不同的 ...
- [知了堂学习笔记]_ajax的两种使用方式
一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都 ...
- 【知了堂学习笔记】java web 简单的登录
最近皮皮潇在学习java web,刚接触了简单的东西,所以今天给大家带来一个简单的登录实现. 页面: 页面代码: <%@ page language="java" conte ...
- [知了堂学习笔记]_JSON数据操作第1讲(初识JSON)
一.认识JSON 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式..它基于 ECMAScript (w3c制定的js规 ...
- 【知了堂学习笔记】java 编写几种常见排序算法2
排序的分类: 1.直接选择排序 它的基本思想是:第一次从R[0]~R[n-1]中选取最小值,与R[0]交换,第二次从R[1]~R[n-1]中选取最小值,与R[1]交换,....,第i次从R[i-1]~ ...
随机推荐
- 微信token失效时间
微信token失效时间 为了使第三方开发者能够为用户提供更多更有价值的个性化服务,微信公众平台开放了许多接口,包括自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发者在调用这些 ...
- SetConsoleScreenBufferSize 函数--设置控制台屏幕缓冲区大小
SetConsoleScreenBufferSize函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686044(v= ...
- showcase,开发中必须引起重视的小环节
有人说,测试者来自火星,开发者来自金星.这是因为软件测试员和软件开发者就好比一对冤家,里面的缘由说不清也道不明.开发代表着创造,而测试则代表着摧毁,因为测试的目的就是以各种方式不断地从开发出的产品中发 ...
- zookeeper单机模式安装
zookeeper单机模式安装 更多文章:http://blogxinxiucan.sh1.newtouch.com/2017/07/26/zookeeper单机模式安装/ 下载zookeeper u ...
- 简单设置android启动画面
1.新建Activity,以及layout文件夹里的xml文件2.将新建Activity在AndroidManifest中设为默认Activity,并且添加:android:theme="@ ...
- 灵玖Nlpir Parser智能挖掘汉语精准分词
在中文自然语言处理中,词是最小的能够独立活动的有意义的语言成分.汉语是以字为基本书写单位,词语之间没有明显的区分标记,因此进行中文自然语言处理通常是先将汉语文本中的字符串切分成合理的词语序列,然后再在 ...
- swift3.0 从相册选取或者拍照上传图片至阿里云OSS
导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...
- Luogu P1451 求细胞数量
题目描述 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.(1<=m,n<=100)? 输入输出格式 输 ...
- [STM32F429-DISCO-HAL]4.Uart 的使用
今天来学习一下最常用的外设之一USART. 首先是硬件的连接,我们需要至少三根线,GND,TX,RX.参阅datasheet.默认的USART1_TX和USART1_RX的引脚如下图 关于HAL dr ...
- easyui&8Jquery ztree树插件
7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...