飞机大战源码

最新推荐文章于 2024-07-27 06:59:09 发布

乞屹

最新推荐文章于 2024-07-27 06:59:09 发布

阅读量3.5k

点赞数 2

本文链接：https://blog.csdn.net/weixin_42940821/article/details/82257057

版权

本文详细剖析了经典游戏‘飞机大战’的源代码，涵盖了游戏逻辑、碰撞检测、得分系统以及游戏画面的实现细节，旨在帮助开发者理解和学习游戏开发的基本技巧。

摘要由CSDN通过智能技术生成

<!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){