快乐的小鸟之避难（一）

灰太狼 2022-03-20 09:50 147阅读 0赞

### 快乐的小鸟之避难（一） ###

*  欢迎查看我的cancvs画图类实践
 *   *  整体效果图
     *  窗口变化
     *  支持国际化
     *  支持自定义操作按钮
     *  主要问题
     *  演示!\[在这里插入图片描述\](/images/20220320/8ad6132ec13740f7bdeb8b4c2dabc2bb.png)

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

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

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

## 整体效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]

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#秒后开始",
    }

1.  语言展示

/**
             * 初始化游戏数据,以及展示语言，实现方式一
             */
            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.  生命检测，依据鸟实例的生命值进行检测。

## 演示![在这里插入图片描述][20190212105719823.gif] ##

--------------------

样式修改：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 2]  
主要利用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;}
            }

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

[https_pan.baidu.com_s_1NyrAxJi9S03H-bjGtL3O9g]: https://pan.baidu.com/s/1NyrAxJi9S03H-bjGtL3O9g
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]: /images/20220320/fe74137fa56f4059bb39b0d9fabd3724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]: /images/20220320/5c1ddf5433374802b47845fb2e9c0d3f.png
[20190212105719823.gif]: /images/20220320/8ad6132ec13740f7bdeb8b4c2dabc2bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 2]: /images/20220320/4d0922c6640b47ed9112a3bb0d96d1cd.png