JS 实现飞机大战
这是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 实现飞机大战的更多相关文章
- js实例--飞机大战
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- JS+html实现简单的飞机大战
摘要:通过原生的js+html实现简单的飞机大战小游戏效果,如图所示: 实现代码如下: 1.自己的飞机实现 飞机html: <!DOCTYPE html> <html lang=&q ...
- js 飞机大战
完整文件及代码可以在网盘下载,下载链接为:https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义: <style> #container{ ...
- 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...
- 微信小游戏 demo 飞机大战 代码分析 (三)(spirit.js, animation.js)
微信小游戏 demo 飞机大战 代码分析(三)(spirit.js, animation.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码 ...
- 微信小游戏 demo 飞机大战 代码分析 (二)(databus.js)
微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- 微信小游戏 demo 飞机大战 代码分析 (一)(game.js, main.js)
微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...
- [知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)
整体效果展示: 一.实现思路 如图,这是我完成该项目的一个逻辑图,也是一个功能模块完成的顺序图. 游戏界面的完成 英雄飞机对象实现,在实现发射子弹方法过程中,又引出了子弹对象并实现.在此时,英雄飞机能 ...
- 用Javascript模拟微信飞机大战游戏
最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...
随机推荐
- day27 Pyhton 面向对象02 组合
# 组合 # 什么是组合 : 一个类对象的属性是另外一个类的对象 class Person: def __init__(self,name,sex,hp,mp,ad): self.name = nam ...
- 以太坊PoW
ethash ethash(eth+hash)是以太坊设计的挖矿算法,为了实现ASIC-resistance,ethash依赖于对内存资源的访问,是一种memory-hard函数.同时为了支持轻节点对 ...
- 基于python常用排序与查找
""" 排序与查找 -- 冒泡排序 -- 选择排序 -- 快速排序 --****经典 -- 希尔排序 """ # 常用排序的实现 # 冒泡排 ...
- 扫描仪扫描文件处理-Photoshop批处理弹出色阶设置框解决
为什么我录制动作明明设置的有色阶,最后批处理的时候仍然弹出了色阶设置框? 出现问题原因可能是你在录入设置色阶动作的时候,是彩色图片或者灰阶中的一种,而批处理的时候遇到了另外一种色彩模式.所以动作中 ...
- lumen容器模仿
<?php class Container { private $bindings = []; private $instances = []; public function getClosu ...
- Linux如何在vim里搜索关键字
例如搜索 the写法:/the +回车 /+关键字 ,回车即可.此为从文档当前位置向下查找关键字,按n键查找关键字下一个位置: ?+关键字,回车即可.此为从文档挡圈位置向上查找关键字,按n键向 ...
- vue 项目抛出警告
There are multiple modules with names that only differ in casing. 此图为 博主(初雪日)的截图, 这个问题虽然不报错,但是会对项目有影 ...
- Spring 最常用的 7 大类注解,哪些你还不知道?
随着技术的更新迭代,Java5.0开始支持注解.而作为java中的领军框架spring,自从更新了2.5版本之后也开始慢慢舍弃xml配置,更多使用注解来控制spring框架. 而spring的的注解那 ...
- Spark性能调优的方法
原则一:避免创建重复的RDD 通常来说,我们在开发一个Spark作业时,首先是基于某个数据源(比如Hive表或HDFS文件)创建一个初始的RDD:接着对这个RDD执行某个算子操作,然后得到下一个RDD ...
- 走在深夜的小码农 Seventh Day
Css3 Seventh Day writer:late at night codepeasant 学习大纲: 1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果,同时思 ...