这是JS版本的飞机大战,和C#版本的思路相同,就是语言上有差别,用来巩固知识。可以将代码直接引入到HTML中就可以看到效果

//编写背景对象
function Background(width,height,X,Y){
// 背景的宽度
this.width=width;
// 背景的高度
this.height=height;
// 背景的水平坐标
this.X=X;
// 背景的垂直坐标
this.Y=Y;
// 创建背景函数将背景存放在 draw属性上
this.draw=(function(X,Y,width,height){
var a=document.createElement("div");
a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;width:"
+width+"px;height:"+height+"px;background-color:aqua;";
return a;
})(this.X,this.Y,this.width,this.height);
// 创建背景函数的绘制方法
this.drawing=function(){
document.body.appendChild(this.draw);
}
}
//创建我方飞机对象
function MyPlane(width,height,X,Y){
// 背景的宽度
this.width=width;
// 背景的高度
this.height=height;
// 背景的水平坐标
this.X=X;
// 背景的垂直坐标
this.Y=Y;
// 创建我方飞机函数将背景存放在 draw属性上
this.draw=(function(X,Y,width,height){
var a=document.createElement("div");
a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;width:"
+width+"px;height:"+height+"px;background-color:aqua;";
return a;
})(this.X,this.Y,this.width,this.height);
// 创建我方飞机函数的绘制方法
this.drawing=function(){
document.body.appendChild(this.draw);
}
// 创建飞机移动函数,同时进行边缘判断
this.move=function(x,y){
if(x>=620&&x<=1030){
this.X = x;
}
if(y>=170&&y<=730){
this.Y = y;
}
this.draw.style.cssText="position:fixed;top:"
+(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+
"px;width:"+width+"px;height:"+height+"px;background-color:red;";
}
}
//创建子弹对象
function MyZidan(width,height,X,Y,speed){
//子弹的宽度
this.width=width;
//子弹的高度
this.height=height;
//子弹的水平坐标
this.X=X;
//子弹的垂直坐标
this.Y=Y;
//子弹的速度
this.speed=speed;
//将子弹dom存放在dram上
this.draw=(function(X,Y,width,height){
var a=document.createElement("div");
a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;width:"
+width+"px;height:"+height+"px;background-color:aqua;";
return a;
})(this.X,this.Y,this.width,this.height);
//创建子弹函数的绘制方法
this.drawing=function(){
document.body.appendChild(this.draw);
}
//子弹移动函数
this.move=function(){
this.Y=this.Y-this.speed;
this.draw.style.cssText="position:fixed;top:"
+(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+
"px;width:"+width+"px;height:"+height+"px;background-color:red;";
}
//子弹删除函数
this.remove=function(){
document.body.removeChild(this.draw);
}
}
//创建敌人飞机对象
function EnemyPlane(width,height,X,Y,speed){
//敌人飞机的宽度
this.width=width;
//敌人飞机的长度
this.height=height;
//敌人飞机的水平坐标
this.X=X;
//敌人飞机的垂直坐标
this.Y=Y;
//敌人飞机的速度
this.speed=speed;
//将敌人飞机dom存放在dram上
this.draw=(function(width,height,X,Y){
var a=document.createElement("div");
a.style.cssText="position:fixed;top:"+Y+"px;left:"+X+"px;width:"
+width+"px;height:"+height+"px;background-color:blue;";
return a;
})(this.width,this.height,this.X,this.Y);
//创建敌人飞机函数的绘制方法
this.drawing=function(){
document.body.appendChild(this.draw);
}
//敌人飞机移动函数
this.move=function(){
this.Y=this.Y+this.speed;
this.draw.style.cssText="position:fixed;top:"
+(this.Y-this.height/2)+"px;left:"+(this.X-this.width/2)+
"px;width:"+width+"px;height:"+height+"px;background-color:blue;";
}
//敌人飞机删除函数
this.remove=function(){
document.body.removeChild(this.draw);
}
}
//创建单例类
function SingleObjct(background,myPlane){
//存放实例化背景对象
this.background=background;
//存放实例化我方飞机对象
this.myPlane=myPlane;
//存放我方飞机子弹对象列表
this.myZidan=[];
//添加子弹对象
this.addZidan=function(){
this.myZidan.push(new MyZidan(10,10,this.myPlane.X,this.myPlane.Y-20,2));
}
//绘制子弹函数
this.drawMyZidan=function(){
for(var i=0;i<this.myZidan.length;i++){
this.myZidan[i].drawing();
}
}
//子弹移动函数
this.moveMyZidan=function(){
for(var i=0;i<this.myZidan.length;i++){
this.myZidan[i].move();
}
}
//判断子弹是否出界,出界则将对象删除
this.moveToBorderZidan=function(){
for(var i=0;i<this.myZidan.length;i++){
if(this.myZidan[i].Y<=150){
this.myZidan[i].remove();
this.myZidan.splice(i,1);
return;
}
}
}
//存放敌人飞机对象列表
this.ListEnemyPlane=[];
//添加敌人飞机对象方法
this.addEnemyPlany=function(X,Y){
var a=new EnemyPlane(20,20,X,Y,2);
a.drawing();
this.ListEnemyPlane.push(a);
}
//绘制敌人飞机函数
this.drawEnemyPlane=function(){
for(var i=0;i<this.ListEnemyPlane.length;i++){
this.ListEnemyPlane[i].drawing();
}
}
//移动敌人飞机函数
this.moveEnemyPlane=function(){
for(var i=0;i<this.ListEnemyPlane.length;i++){
this.ListEnemyPlane[i].move();
}
}
//判断敌人飞机是否出界,出界就将其移除
this.moveToBorderEnemyPlane=function(){
for(var i=0;i<this.ListEnemyPlane.length;i++){
if(this.ListEnemyPlane[i].Y>=740){
this.ListEnemyPlane[i].remove();
this.ListEnemyPlane.splice(i,1);
}
}
}
//判断子弹和敌人飞机是否向撞
this.PZJC=function(){
for(var i=0;i<this.myZidan.length;i++){
for(var j=0;j<this.ListEnemyPlane.length;j++){
if(rectangle(this.myZidan[i].width,this.myZidan[i].height,this.myZidan[i].X,this.myZidan[i].Y,
this.ListEnemyPlane[j].width,this.ListEnemyPlane[j].height,
this.ListEnemyPlane[j].X,this.ListEnemyPlane[j].Y)){
this.myZidan[i].remove();
this.myZidan.splice(i,1);
this.ListEnemyPlane[j].remove();
this.ListEnemyPlane.splice(j,1);
return;
}
}
}
}
}
//窗体加载
window.onload=function(){
var singleObjct=new SingleObjct(new Background(450,600,600,150),new MyPlane(40,40,100,100));
singleObjct.background.drawing();
singleObjct.myPlane.drawing();
//鼠标移动事件
window.onmousemove=function(event){
singleObjct.myPlane.move(event.clientX,event.clientY);
}
//鼠标单击事件
window.onclick=function(event){
singleObjct.addZidan();
singleObjct.drawMyZidan();
}
//间隔时间触发函数,10毫秒触发一次
var timer = setInterval(function(){
singleObjct.moveToBorderZidan();
singleObjct.moveMyZidan();
singleObjct.moveToBorderEnemyPlane();
singleObjct.moveEnemyPlane();
singleObjct.PZJC();
if(singleObjct.ListEnemyPlane.length<6){
singleObjct.addEnemyPlany(getRandomX(),getRandomY());
} },10)
}
//随机生成水平坐标
function getRandomX(){
return ~~(Math.random()*430+600)
}
//随机生成垂直坐标
function getRandomY(){
return ~~(Math.random()*200+110)
}
//判断矩形重合
function rectangle(width1,height1,X1,Y1,width2,height2,X2,Y2){
var rectangleX1=X1+width1/2;
var rectangleY1=Y1+height1/2;
var rectangleX2=X2+width2/2;
var rectangleY2=Y2+height2/2;
var X=Math.abs(rectangleX1-rectangleX2);
var Y=Math.abs(rectangleY1-rectangleY2);
if(2*X<width1+width2&&2*Y<height1+height2){
return true;
}
return false;
}

JS 实现飞机大战的更多相关文章

  1. js实例--飞机大战

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  2. JS+html实现简单的飞机大战

    摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...

  3. js 飞机大战

    完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...

  4. 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)

    微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...

  5. 微信小游戏 demo 飞机大战 代码分析 (三)(spirit.js, animation.js)

    微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码 ...

  6. 微信小游戏 demo 飞机大战 代码分析 (二)(databus.js)

    微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...

  7. 微信小游戏 demo 飞机大战 代码分析 (一)(game.js, main.js)

    微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...

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

    整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...

  9. 用Javascript模拟微信飞机大战游戏

    最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

随机推荐

  1. day27 Pyhton 面向对象02 组合

    # 组合 # 什么是组合 : 一个类对象的属性是另外一个类的对象 class Person: def __init__(self,name,sex,hp,mp,ad): self.name = nam ...

  2. 以太坊PoW

    ethash ethash(eth+hash)是以太坊设计的挖矿算法,为了实现ASIC-resistance,ethash依赖于对内存资源的访问,是一种memory-hard函数.同时为了支持轻节点对 ...

  3. 基于python常用排序与查找

    """ 排序与查找 -- 冒泡排序 -- 选择排序 -- 快速排序 --****经典 -- 希尔排序 """ # 常用排序的实现 # 冒泡排 ...

  4. 扫描仪扫描文件处理-Photoshop批处理弹出色阶设置框解决

    为什么我录制动作明明设置的有色阶,最后批处理的时候仍然弹出了色阶设置框?   出现问题原因可能是你在录入设置色阶动作的时候,是彩色图片或者灰阶中的一种,而批处理的时候遇到了另外一种色彩模式.所以动作中 ...

  5. lumen容器模仿

    <?php class Container { private $bindings = []; private $instances = []; public function getClosu ...

  6. Linux如何在vim里搜索关键字

    例如搜索 the写法:/the     +回车 /+关键字 ,回车即可.此为从文档当前位置向下查找关键字,按n键查找关键字下一个位置: ?+关键字,回车即可.此为从文档挡圈位置向上查找关键字,按n键向 ...

  7. vue 项目抛出警告

    There are multiple modules with names that only differ in casing. 此图为 博主(初雪日)的截图, 这个问题虽然不报错,但是会对项目有影 ...

  8. Spring 最常用的 7 大类注解,哪些你还不知道?

    随着技术的更新迭代,Java5.0开始支持注解.而作为java中的领军框架spring,自从更新了2.5版本之后也开始慢慢舍弃xml配置,更多使用注解来控制spring框架. 而spring的的注解那 ...

  9. Spark性能调优的方法

    原则一:避免创建重复的RDD 通常来说,我们在开发一个Spark作业时,首先是基于某个数据源(比如Hive表或HDFS文件)创建一个初始的RDD:接着对这个RDD执行某个算子操作,然后得到下一个RDD ...

  10. 走在深夜的小码农 Seventh Day

    Css3 Seventh Day writer:late at night codepeasant 学习大纲: 1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果,同时思 ...