贪吃蛇-event事件池

最新推荐文章于 2024-04-29 04:28:15 发布

nanling0220

最新推荐文章于 2024-04-29 04:28:15 发布

阅读量90

点赞数

分类专栏：贪吃蛇

本文链接：https://blog.csdn.net/nanling0220/article/details/105329099

版权

贪吃蛇专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTMM代码


<!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">
    <title>Event事件池</title>
</head>
<body>
    

    <script>
        
        class Event{
            //事件池，记录所有的相关事件及处理函数
            events = {}; 

            // constructor(){
            //     this.events = {};
            // }
            /*
                事件存放的形式
                events = {
                    "click" : [f1,f2,f3....],
                    "mousemove": [f1,f2,f3....]
                }
            */

  //添加事件的功能
            on(eventName,fn){
                if(!this.events[eventName]){
                    this.events[eventName] = [];
                }
                this.events[eventName].push(fn);
            }

            //删除事件的功能
            off(eventName,fn){
                if(!this.events[eventName]){
                    //如果没有添加过该事件，直接跳出不处理了
                    return;
                }
                this.events[eventName] = this.events[eventName].filter(item=>item!=fn);
            }

 // dispatch: 负责把触发到的事件给执行了
            dispatch(eventName){  
                if(!this.events[eventName]){
                    //如果没有添加过该事件，直接跳出不处理了
                    return;
                } 

                this.events[eventName].forEach(item => {
                    console.log("我是item"+ item);
                    console.log("我是this"+ this);
                    item.call(this);
                });
            }
        }    

        let event = new Event;
        
   </script>
</body>
</html>

JS代码

  // 工具类
 export default class Event{
    events = {};

    on(eventName,fn){
        if(!this.events[eventName]){
            this.events[eventName] = [];
        }
        if(!this.events[eventName].includes(fn)){
            this.events[eventName].push(fn);
        }
    }

    off(eventName,fn){
       if(!this.events[eventName]){
            return;
       }
       this.events[eventName] = this.events[eventName].filter(item=>item!=fn);
    }

    dispatch(eventName,...arg){
        if(!this.events[eventName]){
            return;
        }
        this.events[eventName].forEach(item =>{
            // console.log(item);
            // console.log(this); 
            item.call(this,...arg);
        });
    }

}

最终版

//样式
 <style>
        #map {
            width: 400px;
            height: 400px;
            background: #000;
            position: relative;
        }
    </style>

//内容框
<body>

    <h2 id="grade">0</h2>
    <div id="map"></div>
</body>

//js代码
<script type="module">
        
        //import 拥有提前量 (自动提升到顶层执行)
        import Game from "./js/game.js";
        {
            
            let map = document.querySelector("#map");
            let gradeEl = document.querySelector("#grade");
            let game = new Game(map, 10);

            game.on("changegrade",(grade)=>{
                console.log(grade);
            });

            document.onclick = function(){
                game.start();
            }
        }



    </script>

nanling0220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇-event事件池

HTMM代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫