快乐的小鸟之避难（一）

欢迎查看我的cancvs画图类实践

纯前端的简单cancvs学习之路，没有复杂的业务逻辑，不涉及高深的算法，只为自我充实。

代码提取：
链接：https://pan.baidu.com/s/1NyrAxJi9S03H-bjGtL3O9g
提取码：bfjn

整体效果图

1. 窗口的大小改变，支持自适应；
2. 游戏提示，支持国际化；
3. 简易的操作过程，支持自定义操作按钮；

窗口变化

1. 使用resize进行监听窗口大小

	$(window).resize(function () {//重绘窗口大小
            init_window();
     })
     /**
         * 初始化窗口大小
         * size 9最大化 2缩小  0默认大小屏幕的二分之一
         */
        function init_window(size) {
            if(window) {
                var birdsyle = {};
                if(size === 9) {//最大化
                    sWidth = document.body.clientWidth-10;//有效宽度
                    sHeight = document.body.clientHeight-10;//有效高度 
                    birdsyle =  {"height":sHeight, "width":sWidth, "margin-top":0};
                } else if (size === 2) {//当前大小的二分之一缩小
                    sWidth = sWidth/2;
                    sHeight = sHeight/2;
                    if(sWidth <  document.body.clientWidth/4) {
                        alert("已经足够小了，不能更小了.");
                        return;
                    }
                    birdsyle =  {"height":sHeight, "width":sWidth, "margin-top": (document.body.clientHeight -sHeight)/2};
                } else {//默认大小二分之一大小
                    sWidth = document.body.clientWidth/2;//有效宽度
                    sHeight = document.body.clientHeight/2;//有效高度 
                    birdsyle =  {"height":sHeight, "width":sWidth, "margin-top":(document.body.clientHeight -sHeight)/2};
                }
               $("#main_bird").css(birdsyle);
               init_playwindow();
            } else {
               alert("请联系管理员！");
            } 
        }

支持国际化

1. 使用统一语言管理的方式，加载语言

var lable ={
    welcome: "欢迎：",//0
    playname: "快乐的小鸟之避难", //1
    playpathurl: "https://blog.csdn.net/ljcc122",
    playpathtitle: "去快乐的小鸟官网",//2
    zoomout :"缩小", //3
    zoomouttitle : "缩小", //
    maximum : "最大化",//4
    maximumtitle : "最大化",
    shutdow : "退出",//5
    shutdowtitle : "退出",
    shutdowmsg : "是否确定退出?",//6
    username : "素雪年华",//7
    error: "发生异常，请联系管理员！",//8
    lifyname:"当前生命值：",//9
    motionerror:"方向错误，请按照正确的方向移动",//10
    rewelcome:"欢迎下次再来！",//11
    gemover:"游戏结束，是否再来一局?",//12
    keydowerror:"请选择指定的按钮",//13
    protection:"剩余无敌时间：",//14
    survive:"生存时间：",//15
    gold: "金币：",
    integral: "积分：",
    description:"关于使用说明",
    description1:"使用'A'或者'<-'左移动， 'D'或者'->’右移动躲避移动的物体,生存时间越长，获得的积分越高。",
    startplay : "游戏#time#秒后开始",
}

2. 语言展示

 /**
         * 初始化游戏数据,以及展示语言，实现方式一
         */
        function init_msg() {
            $("#playname").text(lable.playname).attr({"href":lable.playpathurl, "title":lable.playpathtitle});
            $(".zoomout").text(lable.zoomout).attr({"title":lable.zoomouttitle});
            $(".maximum").text(lable.maximum).attr({"title":lable.maximumtitle});
            $(".shutdow").text(lable.shutdow).attr({"title":lable.shutdowtitle});
            $(".username").text(lable.welcome+lable.username);
            $(".integral").text(lable.integral+userbase.integral).attr({"title":(lable.integral+userbase.integral)});
            $(".gold").text(lable.gold+userbase.gold).attr({"title":(lable.gold+userbase.gold)});
        }

支持自定义操作按钮

  //全局键盘事件
        $(document).keydown(function(event){
            fnkeydow(event);
        });
        /**
 * 键盘事件
 */
function fnkeydow(event) {
    // 这里监听左右移动
    if(event.keyCode == birdbase.leftbtn || event.keyCode == 37 ) {//左移动
        bird.motion("left");
    } else if( event.keyCode ==  birdbase.rightbtn || event.keyCode == 39 ) {//右移动
        bird.motion("right");
    } else {
        if(window.console) console.log(lable.keydowerror);
    }
}

//这里自定义相关数据，在加载前设定
var birdbase = {
    protection:3,
    fontsize : "12px Arial",
    fontsize_20: '20px Arial',
    startendtime: 3,
    leftbtn:65,//左
    rightbtn: 68,//右
    birdspeed :5,//鸟的移动速度
    birdfirepower:1,//鸟的火力
} ;

主要问题

1. 监听窗口变化，依据窗口大小重置游戏窗口大小，使用window.resize实现。
2. 多语言，使用统一标签管理，在初始化前进行加载，类似系统异步请求。
3. 抽象数据类型，都具有生命，位置，速度等共有属性。
4. 动画效果，可以使用定时器，或者window.requestAnimationFrame的动画函数。
5. 碰撞检测依据位置检测。
6. 生命检测，依据鸟实例的生命值进行检测。

演示

---

样式修改：
主要利用css的动画：animation

  body{
            background:#95c2f7;
            animation:mymove 5s infinite;
            /*Safari 和 Chrome:*/
            -webkit-animation:mymove 5s infinite;
        }
        @keyframes mymove{
            from {background-color:#95c2f7;}
            to {background-color:#b5d5fb;}
        }

最后这只是小白的简单实现，下一步小白将修改样式，同时继续扩展并完善相关功能。