es6版打灰机游戏 --- 玩家飞机类的构建

最新推荐文章于 2022-01-21 14:50:00 发布

miao淼

最新推荐文章于 2022-01-21 14:50:00 发布

阅读量747

点赞数

分类专栏： ES6学习系列 HTML5+JS游戏开发练习笔记 javascript学习记录文章标签： es6 javascript html5 canvas EcmaScript

本文链接：https://blog.csdn.net/wujimiao/article/details/78024984

版权

HTML5+JS游戏开发练习笔记同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

ES6学习系列

3 篇文章 0 订阅

订阅专栏

javascript学习记录

3 篇文章 0 订阅

订阅专栏

JavaScript新标准es6语法已经被大多数主流浏览器所支持，像谷歌，edge等最新版都支持ES6大多数语法。不需要额外编译器，Babel之类的。

为了适应社会潮流，我在看了阮一峰es6入门和一些网络教程，决定移植以前es5版本灰机游戏。由于时间原因，分步骤进行，此篇只讲玩家飞机类构建和键盘事件控制

主要变化

变量声明：

var ---> let

箭头函数使用

function (){} --> () => {}

class类（语法糖）使用

function aa(x,y){

this.x = x;

this.y = y;

} ---> class aa{

constructor(x,y){

this.x = x;

this.y = y;

}

其余变化都随着demo进行而作更改， hero类

//英雄类，es6提供了语法糖class，和以前function构建，原型函数构建类相比，和C#，java等类写法更类似，内部依旧是那样，目前class写法相对耗性能

//hero class 构造
class hero{
    //构造函数 和 以前function(x,y){this.x=x;this.y=y;}一样
    constructor(x,y,src,width,height){
        this.x = x;
        this.y = y;
        this.pic = new Image();
        this.pic.src = src;
        this.width = width;
        this.height = height;
    }
    //类的函数 和 es5 的 hero.prototype.draw = function (){}一样
    createNew (){
		//绘制玩家飞机
		ctx.drawImage(this.pic,this.x,this.y,this.width,this.height);
    }
}

html页面主要是初始化玩家飞机类，加载canvas画笔，定时器刷新画布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type="text/css">
		#fly{width: 600px;height: 600px;margin: 0 auto;}
		#can{background: #c3c8ca;box-shadow:15px 15px 10px #888;}
	</style>
    <title>ES6版打灰机小游戏</title>
</head>
<body>
    <!-- 该游戏为练习JavaScript新标准语法而写，由于物体运动算法知识薄弱和时间关系，便移植之前es5版的代码，高手勿喷 -->
    <div id="fly">
		<canvas id="can"></canvas>
    </div>
    
    <script>
        let canvas;//画布
        let ctx;//画笔
        let doc=document;//加快js效率
        let play;//玩家实例
        let bul;//子弹实例
        let enemy;//敌机实例
        let key={};//按键对象
        let reset;//是否停止游戏
        let flygame;
        let init;
        window.requestAnimFrame=(function(){
            return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
                    return window.setTimeout(callback, 1000 / 60);
                };
        })();//浏览器计时器API，效率高
        window.οnlοad=function(){
            canvas=doc.getElementById('can');
            ctx=canvas.getContext('2d');
            canvas.width=600;
            canvas.height=600;
            init();
	        flygame();//运行函数
        }
        init = () => {
            //初始化一个默认对象
            play= new hero(250,500,'img/self.jpg',98,108);
        }
        flygame = ()=>{
            ctx.clearRect(0,0,600,600);//清除画布
            play.createNew();
            if(!reset){
                requestAnimFrame(flygame);
            }
        }
       //键盘事件
        window.addEventListener('keydown',function(e){
            e=event||window.event;
            key[e.keyCode]=true;
            switch(e.keyCode){
                case 37://left
                    if(play.x<=0){return}
                    play.x-=4;
                break
                case 38://up
                    if(play.y<=play.height){return}
                    play.y-=4;
                break
                case 39://right
                    if(play.x>=canvas.width-play.width){return}
                    play.x+=4;
                break
                case 40://down
                    if(play.y>=canvas.height-play.height){return}
                    play.y+=4;
                break
            }
        });

        window.addEventListener('keyup',function(e){
            delete key[e.keyCode];//释放按键对象
        });	
        
        


    </script>

    <script src="js/hero.js"></script>
</body>
</html>

好吧，我承认很简单