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

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>

好吧,我承认很简单

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值