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

来源：互联网发布：今晚非农数据最新消息编辑：程序博客网时间：2024/06/04 23:19

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.onload=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>

好吧，我承认很简单

阅读全文

0 0