<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="function.js" charset="utf-8"></script>
    <script type="text/javascript" src="AStar.js" charset="utf-8"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Pokemon Escapes</title>
    <link rel="shortcut icon" href="https://www.frank397.cn/图标.ico">
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            font-size: 62.5%;
            text-align: center;
            background-color: #e5e3db;
        }

        .div1 {
            height: 100%;
        }

        #demo {
            height: 75%;
            margin: 0;
        }

        /* #button_up {
            width : 100%;
            height: 100%;
            padding:200px;
            background-color: #e5e3db;
            border: 0;
        }

        #button_down {
            height: 40%;
            background-color: #e5e3db;
            border: 0;
        }

        #button_left {
            height: 40%;
            background-color: #e5e3db;
            border: 0;
        }

        #button_right {
            height: 20%;
            background-color: #e5e3db;
            border: 0;
        } */
        
        ;
    </style>
</head>

<body>
    <div class=div1 align="center">

        <span id="current_stage"></span>

        <div class="button_all">
            <span id="mytime"></span>
            <button onclick="start()">开始游戏</button>
            <button onclick="stop()">暂停</button>
            <button onclick="time_continue()">继续</button>
            <button onclick="renovates()">重新开始</button>
        </div>
        

        <canvas id="demo" style="border:1px solid #ddd;">
            <!--画布 id="demo" style="边框:宽度1px 实线 淡灰色-->
            您的浏览器不支持canvas,建议使用最新版的Chrome浏览器
        </canvas>

        <input value="点击全屏" onclick="fullScreen();" type="button">

        <div class="direction_button">
            <button type="button" id="button_left" onclick="eventjs.getDirection_left()"><img src='button_left.png'></button>
            <button type="button" id="button_up" onclick="eventjs.getDirection_up()"><img src='button_up.png'></button>
            <button type="button" id="button_down" onclick="eventjs.getDirection_down()"><img src='button_down.png'></button>
            <button type="button" id="button_right" onclick="eventjs.getDirection_down()"><img src='button_right.png'></button>
        </div>

        <script type="text/javascript">
            /*
             * @date 2022-11-04
             * @author Frank
             */

            var eventjs = {
                //添加事件
                bind: function (elem, type, handler) {
                    if (elem.addEventListener) {
                        elem.addEventListener(type, handler, false);
                    } else if (elem.attachEvent) {
                        //IE
                        elem.attachEvent("on" + type, handler);
                    } else {
                        elem["on" + type] = handler;
                    };
                },
                //删除事件
                unbind: function (elem, type, handler) {
                    if (elem.removeEventListener) {
                        elem.removeEventListener(type, handler, false);
                    } else if (elem.detachEvent) {
                        //IE
                        elem.detachEvent("on" + type, handler)
                    } else {
                        elem["on" + type] = handler;
                    };
                },
                //获取事件
                getEvent: function (event) {
                    return event ? event : window.event;
                },
                //获取事件目标
                getTarget: function (event) {
                    return event.target || event.srcElement;
                },
                //相关元素
                relatedTarget: function (event) {
                    if (event.relatedTarget) {
                        return event.relatedTarget;
                    } else if (event.toElement) {
                        return event.toElement;
                    } else if (event.formElement) {
                        return event.formElement;
                    } else {
                        return null;
                    };
                },
                //阻止默认行为
                preventDefault: function (event) {
                    if (event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                },
                //取消捕获/冒泡
                cancelBubble: function (event) {
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    };
                },

                //获取键盘code
                getCharCode: function (event) {
                    if (typeof event.charCode == "number") {
                        console.log('char code');
                        return event.charCode;
                    } else {
                        return event.keyCode;
                    };
                },

                //获取点击按钮
                getButtonId: function (event) {
                    if (event.target.type || event.srcElement.type == "button" ) {
                        return event.target.id || event.srcElement.id;
                    } ;
                },
                getDirection: function (event) {
                    var keyCode = event.which || event.keyCode; //键盘
                    switch (keyCode) {
                        case 38://up对应keycode || 方向上键对应id
                            return 'up';
                            break;
                        case 40://down对应keycode
                            return 'down';
                            break;
                        case 37://left对应keycode
                            return 'left';
                            break;
                        case 39://right对应keycode
                            return 'right';
                            break;
                        case 339: //exit
                        case 240: //back
                            return 'back';
                            break;
                    };

                },
                getDirection_up: function () {
                            return 'up';
                },
                getDirection_down: function () {
                        return 'down';
                },
                getDirection_left: function () {
                        return 'left';
                },
                getDirection_right: function () {
                        return 'right';
                }

            };
        </script>

        <script type="text/javascript">
            var Stage = 1; //第几关
            stage_str = "当前关卡：" + Stage
            current_stage = document.getElementById('current_stage');
            current_stage.innerHTML = stage_str;

            var aa = 9; //迷宫初始线条数
            var tree = [];//存放是否联通
            var isling = [];//判断是否相连



            /////////////////////////////////////////////////////////////////////////
            //画迷宫
            var chess = document.getElementById("demo");
            var context = chess.getContext('2d');
            ///////////////////////////////////////////////////////////////////////

            // 画人物和出口
            var canvas = document.getElementById('demo');
            var ctx = canvas.getContext('2d');


            //player base
            var playerImage = new Image();
            playerImage.src = 'kabi.png';
            var player = {
                x: 5,       // 在canvas中的坐标
                y: 5,
                imageX: 0,  // 图像定位坐标
                imageY: 100,
                width: 50,  // 图像显示区域大小
                height: 50,
                run: false  // 是否移动
            };

            // 方向初始
            var d = '';


            // end初始
            var end = false;

            // 出口
            var ExitImage = new Image();
            ExitImage.src = 'exit.png';

            // NPC
            var NPCImage = new Image();
            NPCImage.src = 'Charizard.png';
            var npc = {
                x: 5,       // 在canvas中的坐标
                y: 5,
                imageX: 0,  // 图像定位坐标
                imageY: 100,
                width: 50,  // 图像显示区域大小
                height: 50,
            };


            // 初始画面
            var init = (function (options) {
                options = options || {};
                canvas.width = options.width || aa * 60;
                canvas.height = options.height || aa * 60;
                //bind user event
                eventjs.bind(document, 'keydown', function (event) {
                    d = eventjs.getDirection(event);
                    player.run = true;
                    playerAction(d);
                });
                eventjs.bind(document, 'keyup', function (event) {
                    d = eventjs.getDirection(event);
                    player.run = false;
                    playerAction(d);
                });
                document.getElementById("button_up").addEventListener('click', function () {
                    d = eventjs.getDirection_up();
                    player.run = true;
                    playerAction(d);
                });
                document.getElementById("button_down").addEventListener('click', function () {
                    d = eventjs.getDirection_down();
                    player.run = true;
                    playerAction(d);
                });
                document.getElementById("button_left").addEventListener('click', function () {
                    d = eventjs.getDirection_left();
                    player.run = true;
                    playerAction(d);
                });
                document.getElementById("button_right").addEventListener('click', function () {
                    d = eventjs.getDirection_right();
                    player.run = true;
                    playerAction(d);
                });

            })({ width: aa * 60, height: aa * 60 });


            var h = m = s = ms = 0;  //定义时，分，秒，毫秒并初始化为0；
            var time = 0;
            var i = 0;
            var npc_step = 0; //npc步数初始化为0
            var st = -3000; //npc延迟行动时间
            var npc_x = [5];
            var npc_y = [5]; //储存npc移动位置
            var npc_xy = ['5,5'];


        </script>


        <footer>&copy; 2022 Frank</a>
        </footer>
        <a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2022009690号-1</a>
    </div>
</body>

</html>