飞机大战源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                display: block;
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="480px" height="650px"></canvas>
        <script type="text/javascript">
//          前提
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
//          0.游戏初始化

//          0.1 将游戏分为几个阶段
            var START = 0;     //第一个阶段   游戏开始阶段
            var STARTING = 1;  //第二个阶段   游戏运行前的动画阶段
            var RUNNING = 2;   //第三个阶段   游戏运行阶段
            var PAUSE = 3;     //第四个阶段   游戏暂停阶段
            var GAMEOVER = 4;  //第五个阶段   游戏结束阶段
//          0.2 定义自己的状态,跟上面比较,判断游戏处于哪一个阶段
            var state = START;
//          0.3 定义当前画布的宽和高
            var WIDTH = canvas.width;
            var HEIGHT = canvas.height;
//          0.4 定义游戏的得分
            var score = 0;
//          0.5 定义我方飞机的生命值
            var life = 3;

//          1.游戏开始阶段
//          1.1 加载背景图片
//          1.1.1 创建背景图片的对象
            var bg = new Image();
            bg.src = "images/background.png";
//          1.1.2 初始化背景图片的数据
            var BG = {
                imgs : bg,
                width : 480,
                height : 852
            }
//          1.1.3 创建背景图片的  构造器  函数(构造出一个对象)
            function Bg(config){
    
                this.imgs = config.imgs;
                this.width = config.width;
                this.height = config.height;

                this.x1 = 0;
                this.y1 = 0;
                this.x2 = 0;
                this.y2 = -this.height;
                //定义背景图片绘制的方法
                this.paint = function(){
    
                    context.drawImage(this.imgs,this.x1,this.y1);
                    context.drawImage(this.imgs,this.x2,this.y2);
                }
                //定义背景图片运动的方法
                this.step = function(){
    
                    this.y1 ++;
                    this.y2 ++;
//                  判断图片的临界点
                    if(this.y1 == this.height){
                        this.y1 = -this.height;
                    }
                    if(this.y2 == this.height){
                        this.y2 = -this.height;
                    }
                }

            }
//          1.1.4 创建背景图片的对象
            var sky = new Bg(BG)
//          1.2 绘制logo
            var logo = new Image();
            logo.src = "images/start.png"


//          2.游戏运行前动画阶段
//          2.1 加载动画所需要的图片
            var loadings = [];
            loadings[0] = new Image();
            loadings[0].src = "images/game_loading1.png";
            loadings[1] = new Image();
            loadings[1].src = "images/game_loading2.png";
            loadings[2] = new Image();
            loadings[2].src = "images/game_loading3.png";
            loadings[3] = new Image();
            loadings[3].src = "images/game_loading4.png";
//          2.2 初始化图片的数据
            var LOADINGS = {
                imgs : loadings,
                length : loadings.length,
                width : 186,
                height : 38
            }
//          2.3定义开始前动画的构造器
            function Loading(config){
    
                
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
package cn.feike.shoot; import java.awt.Graphics; import java.awt.image.BufferedImage; public abstract class FlyingObject { protected double x;//物体的x坐标 protected double y;//物体的y坐标 protected double width;//物体的宽 protected double heigth;//物体的高 protected BufferedImage image;//当前正在显示的图片 protected int index = 0;//图片数组下标序号,子类中使用 protected double step;//飞行物每次(1/24秒)移动的距离 protected int life;//命 protected int state;//飞行物的状态 public static final int ACTIVE=0;//活着状态 public static final int DEAD=1;//死亡状态 public static final int REMOVE=2;//回收状态 //默认构造器 public FlyingObject() { life = 1; state = ACTIVE; } //有参构造器 public FlyingObject(double width,double heigth){ this();//调用无参数的构造器,必须写在第一行. this.x = (int)(Math.random()*(480-width)); this.y = -heigth; this.width = width; this.heigth = heigth; step = Math.random()*3+0.8;//初始化step为[0.8,3.8)之间的数 } //重写toString方法 public String toString() { return x+","+y+","+width+","+heigth+","+image; } //重写paint,方便子类对象的使用 public void paint(Graphics g) { g.drawImage(image, (int)x, (int)y, null);//绘制图片 } //飞行物移动的move方法 /** * 重构了move,方法实现播放销毁动画功能 */ public void move(){ if(state == ACTIVE){ y += step; return ; } if(state == DEAD){ //从子类对象中获取下一张照片 BufferedImage img = nextImage(); if(img == null){ state = REMOVE;//没有照片则回收 }else{ image = img;//否则把子类的图片传给image } //越界则销毁 if(y>=825){ state = REMOVE; } } } /** * 子类中必须有的方法,返回下一个要播放的照片引用, * 如果返回null表示没有可播放的照片了. */ protected abstract BufferedImage nextImage(); /** * 飞行物被打了一下 */ public void hit(){ if(life>0){ life--; } if(life==0){ state = DEAD; } } /** * 碰撞检测的方法 * 检测物体的位置是否在碰撞的范围内. * (子弹是否在飞行物的碰撞范围内) */ public boolean duang(FlyingObject obj){ //this(x,y,w,h) //obj(x,y,w,h) double x1 = this.x - obj.width; double x2 = this.x + this.width; double y1 = this.y - obj.width; double y2 = this.y + this.heigth; return x1<obj.x&&obj;.x<x2&&y1;<obj.y&&obj;.y<y2; } /** 重构FlyingObject,添加了状态检查方法 */ /** 检查飞行物死了吗 */ public boolean isDead(){ return state == DEAD; } /** 检查飞行物是否活动的 */ public boolean isActive(){ return state == ACTIVE; } /** 检查飞行是否可以被删除*/ public boolean canRemove(){ return state == REMOVE; } /** 飞行物添加"去死"方法*/ public void goDead(){ if(isActive()){ state = DEAD; } } }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值