Viết game bắn máy bay bằng HTML5 Canvas

Viết game bắn máy bay bằng HTML5 Canvas

HTML5 được phát triển từ năm 2004 nhưng giờ các nhà cung cấp Apple, Opera, Mozilla và gần đây là Google mới xây dựng các thành tố tương thích ngôn ngữ này trong trình duyệt.

HTML5 ra đời có rất nhiều điểm mới. HTML5 dự kiến sẽ là tương lai của lập trình web
Bài viết này mình chỉ giới thiệu về lớp canvas của HTML5 giúp vẽ hình, tạo 1 game đơn giản
Mình xin giới thiệu về cấu trúc các file mình sẽ viết

  • CSS\StyleSheet1.css –> Nội dung file CSS
  • JS\Bullet.js –> Xử lý đạn
  • JS\Main.js –> Chứa các hàm chính, vẽ hình, gọi các hàm javascript
  • JS\Meteor.js –> Khới tạo đá bay
  • JS\SpaceShip.js –> Xử lý di chuyển của phi thuyền
  • SpaceWarIMG\ –> Thư mục chứa các ảnh để vẽ vào khung canvas
  • SpaceWar.html –> File html để chạy
  • Code file SpaceWar.html

    
    <script type="text/javascript" src="JS/Meteor.js"></script><script type="text/javascript" src="JS/Bullet.js"></script>
    <script type="text/javascript" src="JS/SpaceShip.js"></script><script type="text/javascript" src="JS/Main.js"></script>
    
        Space War</pre>
    <div id="cv"><canvas id="myCanvas" width="1000" height="800">
     </canvas></div>
    <pre>
    
    

    File Main.js: Mình chỉ đưa 1 vài structer code và 1 số đoạn code chính

    var canvas; //Lớp canvas
    var context; //Context để vẽ hình
    var keys = new Array(); // Mảng chứa các phím điều khiển
    var animationFrame;
    var ship; //Phi thuyền
    var listBulletShip = new Array(200); mảng đạn
    var listMeteor = new Array(15); Mảng thiên thạch
    var listDelayBang = new Array(10);
    var countStartBullet = 0;
    var countStartBullet2 = 0;
    var startTimeBullet;
    var startCount = 0;
    var xShip = 0;
    var yShip = 0;
    
    window.addEventListener('keydown', keyDown, true);
    window.addEventListener('keyup', keyUp, true);
    window.onload = load;
    
    //Xử lý độ trễ
    function delayBang(x,y,time) {
    ...
    }
    function keyDown(evt) {
        keys[evt.keyCode] = true;
    };
    function keyUp(evt) {
        keys[evt.keyCode] = false;
    };
    
    //Khởi tạo mảng
    function initListDelayBang() {
    }
    
    //Vẽ hình dùng ảnh đưa vào context
    function initMeteor() {
        var image = new Image();
        image.src = "SpaceWarIMG/thienthach.png";
        for (var i = 0; i < listMeteor.length; i++) {
            var meteor = new MeteorClass(image);
            listMeteor[i] = meteor;
        }
    }
    //Load ảnh
    function load() {
        canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");
        animationFrame = window.requestAnimationFrame ||
    					window.mozRequestAnimationFrame ||
    					window.webkitRequestAnimationFrame ||
    					window.msRequestAnimationFrame ||
    					window.oRequestAnimationFrame;
    
        if (animationFrame) {
            animationFrame(Draw);
        }
        else {
            alert("Your browser don't support requestAnimationFrame.");
        }
    
        var image = new Image();
        image.src = "SpaceWarIMG/ship.png";
        ship = new SpaceShipWar(image, 3, 3, 400, 500);
    
        var imageBullet = new Image();
        imageBullet.src = "SpaceWarIMG/laserT4.png";
        .........
    

    File Bullet.js

     
    BulletClass.prototype.runBullet = runBullet;
    function BulletClass(bulletSpeed, imageBullet) {
        this.posBulletX = 0;
        this.posBulletY = 0;
        this.angleBullet = 0;
        this.bulletSpeed = bulletSpeed;
        this.imageBullet = imageBullet;
        this.complete = false;
    }
    function runBullet() {
        if (!this.complete) {
            if (this.angleBullet == 0) {
                this.posBulletY -= this.bulletSpeed;
            }
            if (this.angleBullet > 0 && this.angleBullet < 45) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX += (this.angleBullet / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 45) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX += this.bulletSpeed;
            }
            if (this.angleBullet > 45 && this.angleBullet < 90) {
                this.posBulletX += this.bulletSpeed;
                this.posBulletY -= (Chia - (this.angleBullet - 45) / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 90) {
                this.posBulletX += this.bulletSpeed;
            }
            if (this.angleBullet > 90 && this.angleBullet < 135) {
                this.posBulletX += this.bulletSpeed;
                this.posBulletY += ((this.angleBullet - 90) / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 135) {
                this.posBulletX += this.bulletSpeed;
                this.posBulletY += this.bulletSpeed;
            }
            if (this.angleBullet > 135 && this.angleBullet < 180) {
                this.posBulletY += this.bulletSpeed;
                this.posBulletX += (Chia - (this.angleBullet - 135) / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 180) {
                this.posBulletY += this.bulletSpeed;
            }
            if (this.angleBullet > 180 && this.angleBullet < 225) {
                this.posBulletY += this.bulletSpeed;
                this.posBulletX -= ((this.angleBullet - 180) / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 225) {
                this.posBulletY += this.bulletSpeed;
                this.posBulletX -= this.bulletSpeed;
            }
            if (this.angleBullet > 225 && this.angleBullet < 270) {
                this.posBulletX -= this.bulletSpeed;
                this.posBulletY += (Chia - (this.angleBullet - 225) / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 270) {
                this.posBulletX -= this.bulletSpeed;
            }
            if (this.angleBullet > 270 && this.angleBullet < 315) {
                this.posBulletX -= this.bulletSpeed;
                this.posBulletY -= ((this.angleBullet - 270) / 45) * this.bulletSpeed;
            }
            if (this.angleBullet == 315) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX -= this.bulletSpeed;
            }
            if (this.angleBullet > 315 && this.angleBullet < 360) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX -= (Chia - (this.angleBullet - 315) / 45) * this.bulletSpeed;
            }
    
    
            if (this.angleBullet < 0 && this.angleBullet > -45) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX -= this.angleBullet / -45 * this.bulletSpeed;
            }
            if (this.angleBullet == -45) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX -= this.bulletSpeed;
            }
            if (this.angleBullet < -45 && this.angleBullet > -90) {
                this.posBulletX -= this.bulletSpeed;
                this.posBulletY -= (Chia - (this.angleBullet + 45) / -45) * this.bulletSpeed;
            }
    
            if (this.angleBullet == -90) {
                this.posBulletX -= this.bulletSpeed;
            }
            if (this.angleBullet < -90 && this.angleBullet > -135) {
                this.posBulletX -= this.bulletSpeed;
                this.posBulletY += ((this.angleBullet + 90) / -45) * this.bulletSpeed;
            }
            if (this.angleBullet == -135) {
                this.posBulletX -= this.bulletSpeed;
                this.posBulletY += this.bulletSpeed;
            }
            if (this.angleBullet < -135 && this.angleBullet > -180) {
                this.posBulletY += this.bulletSpeed;
                this.posBulletX -= (Chia - (this.angleBullet + 135) / -45) * this.bulletSpeed;
            }
            if (this.angleBullet == -180) {
                this.posBulletY += this.bulletSpeed;
            }
            if (this.angleBullet < -180 && this.angleBullet > -225) {
                this.posBulletY += this.bulletSpeed;
                this.posBulletX += ((this.angleBullet + 180) / -45) * this.bulletSpeed;
            }
            if (this.angleBullet == -225) {
                this.posBulletY += this.bulletSpeed;
                this.posBulletX += this.bulletSpeed;
            }
            if (this.angleBullet < -225 && this.angleBullet > -270) {
                this.posBulletX += this.bulletSpeed;
                this.posBulletY += (Chia - (this.angleBullet + 225) / -45) * this.bulletSpeed;
            }
            if (this.angleBullet == -270) {
                this.posBulletX += this.bulletSpeed;
            }
            if (this.angleBullet < -270 && this.angleBullet > -315) {
                this.posBulletX += this.bulletSpeed;
                this.posBulletY -= ((this.angleBullet + 270) / -45) * this.bulletSpeed;
            }
            if (this.angleBullet == -315) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX += this.bulletSpeed;
            }
            if (this.angleBullet < -315 && this.angleBullet > -360) {
                this.posBulletY -= this.bulletSpeed;
                this.posBulletX += (Chia - (this.angleBullet + 315) / -45) * this.bulletSpeed;
            }
        }
    }

    file Meteor.js

    
    function MeteorClass(image) {
        this.amount = 0;
        this.xMeteorCenter = 0;
        this.yMeteorCenter = 0;
        this.xMeteorStart = 0;
        this.yMeteorStart = 0;
        this.checkComplete = true;
        this.image = image;
        this.up = false;
        this.left = false;
        this.right = false;
        this.bottom = false;
    }
    

    File SpaceShips.js

    var Chia = 1;
    SpaceShipWar.prototype.moveUp = moveUp;
    SpaceShipWar.prototype.moveDown = moveDown;
    function SpaceShipWar(image, speedmove, speedRotate, posX, posY) {
        this.image = image;
        this.speedmove = speedmove;
        this.speedRotate = speedRotate;
        this.angle = 0;
        this.posX = posX;
        this.posY = posY;
        this.isBang = false;
    }
    
    function moveUp() {
        if (this.angle == 0) {
            this.posY -= this.speedmove;
        }
        if (this.angle > 0 && this.angle < 45) {         this.posY -= this.speedmove;         this.posX += (this.angle / 45) * this.speedmove;     }     if (this.angle == 45) {         this.posY -= this.speedmove;         this.posX += this.speedmove;     }     if (this.angle > 45 && this.angle < 90) {         this.posX += this.speedmove;         this.posY -= (Chia - (this.angle - 45) / 45) * this.speedmove;     }     if (this.angle == 90) {         this.posX += this.speedmove;     }     if (this.angle > 90 && this.angle < 135) {         this.posX += this.speedmove;         this.posY += ((this.angle - 90) / 45) * this.speedmove;     }     if (this.angle == 135) {         this.posX += this.speedmove;         this.posY += this.speedmove;     }     if (this.angle > 135 && this.angle < 180) {         this.posY += this.speedmove;         this.posX += (Chia - (this.angle - 135) / 45) * this.speedmove;     }     if (this.angle == 180) {         this.posY += this.speedmove;     }     if (this.angle > 180 && this.angle < 225) {         this.posY += this.speedmove;         this.posX -= ((this.angle - 180) / 45) * this.speedmove;     }     if (this.angle == 225) {         this.posY += this.speedmove;         this.posX -= this.speedmove;     }     if (this.angle > 225 && this.angle < 270) {         this.posX -= this.speedmove;        this.posY += (Chia - (this.angle - 225) / 45) * this.speedmove;     }     if (this.angle == 270) {         this.posX -= this.speedmove;     }     if (this.angle > 270 && this.angle < 315) {         this.posX -= this.speedmove;         this.posY -= ((this.angle - 270) / 45) * this.speedmove;     }     if (this.angle == 315) {         this.posY -= this.speedmove;         this.posX -= this.speedmove;     }     if (this.angle > 315 && this.angle < 360) {
            this.posY -= this.speedmove;
            this.posX -= (Chia - (this.angle - 315) / 45) * this.speedmove;
        }
    
        if (this.angle < 0 && this.angle > -45) {
            this.posY -= this.speedmove;
            this.posX -= this.angle / -45 * this.speedmove;
        }
        if (this.angle == -45) {
            this.posY -= this.speedmove;
            this.posX -= this.speedmove;
        }
        if (this.angle < -45 && this.angle > -90) {
            this.posX -= this.speedmove;
            this.posY -= (Chia - (this.angle + 45) / -45) * this.speedmove;
        }
    
        if (this.angle == -90) {
            this.posX -= this.speedmove;
        }
        if (this.angle < -90 && this.angle > -135) {
            this.posX -= this.speedmove;
            this.posY += ((this.angle + 90) / -45) * this.speedmove;
        }
        if (this.angle == -135) {
            this.posX -= this.speedmove;
            this.posY += this.speedmove;
        }
        if (this.angle < -135 && this.angle > -180) {
            this.posY += this.speedmove;
            this.posX -= (Chia - (this.angle + 135) / -45) * this.speedmove;
        }
        if (this.angle == -180) {
            this.posY += this.speedmove;
        }
        if (this.angle < -180 && this.angle > -225) {
            this.posY += this.speedmove;
            this.posX += ((this.angle + 180) / -45) * this.speedmove;
        }
        if (this.angle == -225) {
            this.posY += this.speedmove;
            this.posX += this.speedmove;
        }
        if (this.angle < -225 && this.angle > -270) {
            this.posX += this.speedmove;
            this.posY += (Chia - (this.angle + 225) / -45) * this.speedmove;
        }
        if (this.angle == -270) {
            this.posX += this.speedmove;
        }
        if (this.angle < -270 && this.angle > -315) {
            this.posX += this.speedmove;
            this.posY -= ((this.angle + 270) / -45) * this.speedmove;
        }
        if (this.angle == -315) {
            this.posY -= this.speedmove;
            this.posX += this.speedmove;
        }
        if (this.angle < -315 && this.angle > -360) {
            this.posY -= this.speedmove;
            this.posX += (Chia - (this.angle + 315) / -45) * this.speedmove;
        }
    
    };
    function moveDown() {
        if (this.angle == 0) {
            this.posY += this.speedmove;
        }
        if (this.angle > 0 && this.angle < 45) {         this.posY += this.speedmove;         this.posX -= this.angle / 45 * this.speedmove;     }     if (this.angle == 45) {         this.posY += this.speedmove;         this.posX -= this.speedmove;     }     if (this.angle > 45 && this.angle < 90) {         this.posX -= this.speedmove;         this.posY += (Chia - (this.angle - 45) / 45) * this.speedmove;     }     if (this.angle == 90) {         this.posX -= this.speedmove;     }     if (this.angle > 90 && this.angle < 135) {         this.posX -= this.speedmove;         this.posY -= ((this.angle - 90) / 45) * this.speedmove;     }     if (this.angle == 135) {         this.posX -= this.speedmove;         this.posY -= this.speedmove;     }     if (this.angle > 135 && this.angle < 180) {         this.posY -= this.speedmove;         this.posX -= (Chia - (this.angle - 135) / 45) * this.speedmove;     }     if (this.angle == 180) {         this.posY -= this.speedmove;     }     if (this.angle > 180 && this.angle < 225) {         this.posY -= this.speedmove;         this.posX += ((this.angle - 180) / 45) * this.speedmove;     }     if (this.angle == 225) {         this.posY -= this.speedmove;         this.posX += this.speedmove;     }     if (this.angle > 225 && this.angle < 270) {         this.posX += this.speedmove;         this.posY -= (Chia - (this.angle - 225) / 45) * this.speedmove;     }     if (this.angle == 270) {         this.posX += this.speedmove;     }     if (this.angle > 270 && this.angle < 315) {         this.posX += this.speedmove;         this.posY += ((this.angle - 270) / 45) * this.speedmove;     }     if (this.angle == 315) {         this.posY += this.speedmove;         this.posX += this.speedmove;     }     if (this.angle > 315 && this.angle < 360) {
            this.posY += this.speedmove;
            this.posX += (Chia - (this.angle - 315) / 45) * this.speedmove;
        }
    
        if (this.angle < 0 && this.angle > -45) {
            this.posY += this.speedmove;
            this.posX += this.angle / -45 * this.speedmove;
        }
        if (this.angle == -45) {
            this.posY += this.speedmove;
            this.posX += this.speedmove;
        }
        if (this.angle < -45 && this.angle > -90) {
            this.posX += this.speedmove;
            this.posY += (Chia - (this.angle + 45) / -45) * this.speedmove;
        }
    
        if (this.angle == -90) {
            this.posX += this.speedmove;
        }
        if (this.angle < -90 && this.angle > -135) {
            this.posX += this.speedmove;
            this.posY -= ((this.angle + 90) / -45) * this.speedmove;
        }
        if (this.angle == -135) {
            this.posX += this.speedmove;
            this.posY -= this.speedmove;
        }
        if (this.angle < -135 && this.angle > -180) {
            this.posY -= this.speedmove;
            this.posX += (Chia - (this.angle + 135) / -45) * this.speedmove;
        }
        if (this.angle == -180) {
            this.posY -= this.speedmove;
        }
        if (this.angle < -180 && this.angle > -225) {
            this.posY -= this.speedmove;
            this.posX -= ((this.angle + 180) / -45) * this.speedmove;
        }
        if (this.angle == -225) {
            this.posY -= this.speedmove;
            this.posX -= this.speedmove;
        }
        if (this.angle < -225 && this.angle > -270) {
            this.posX -= this.speedmove;
            this.posY -= (Chia - (this.angle + 225) / -45) * this.speedmove;
        }
        if (this.angle == -270) {
            this.posX -= this.speedmove;
        }
        if (this.angle < -270 && this.angle > -315) {
            this.posX -= this.speedmove;
            this.posY += ((this.angle + 270) / -45) * this.speedmove;
        }
        if (this.angle == -315) {
            this.posY += this.speedmove;
            this.posX -= this.speedmove;
        }
        if (this.angle < -315 && this.angle > -360) {
            this.posY += this.speedmove;
            this.posX -= (Chia - (this.angle + 315) / -45) * this.speedmove;
        }
    };
    

    CSS

    body {
    }
    #cv
            {
                margin: 0 auto;
                border: 1px solid black;
                width: 1000px;
                height: 800px;
                box-shadow: 0 0 2px black;
                background: url(../SpaceWarIMG/space_bg6.jpg) no-repeat;
            }
    

    1 số hình ảnh demo của game

    Và dưới đây là toàn bộ mã nguồn game Space War

    Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!