eplayer 1.5.2 → 1.5.4

package/docs/eplayer.js

@@ -4,18 +4,20 @@ class Eplayer extends HTMLElement {
     this.doms = {}
     this.src = this.getAttribute('src')
     this.type = this.getAttribute('type')
+    this.beatMap = this.getAttribute('beatMap')
 
     this.init()
     this.stream()
   }
 
   static get observedAttributes() {
-    return ['src', 'type']
+    return ['src', 'type', 'beatMap']
   }
 
   attributeChangedCallback(name, _, newVal) {
     if (name === 'src') this.src = this.$('.video').src = newVal
     if (name === 'type') this.type = newVal
+    if (name === 'beatMap') this.beatMap = newVal
     this.stream()
     this.video.load()
   }
@@ -24,6 +26,8 @@ class Eplayer extends HTMLElement {
     return this.doms[key]
   }
 
+
+
   waiting() {
     this.$('.mark').removeEventListener('click', this.mark.bind(this))
     this.$('.mark').classList.remove('playing')
@@ -43,10 +47,24 @@ class Eplayer extends HTMLElement {
   }
 
   mark() {
+    if (this.beatMap) return
     clearTimeout(this.timer)
     this.timer = setTimeout(() => this.play(), 200)
   }
 
+  connectedCallback() {
+    console.log('emmm')
+    const beats = this.beatMap.split('|').map(item => {
+      const [fps, button] = item.split(':')
+      return {
+        fps, button
+      }
+    })
+
+
+    new Mug(beats,this.$('.mug'),this.video)
+  }
+
   canplay() {
     this.$('.mark').classList.remove('loading')
     this.$('.mark').classList.add('playing')
@@ -55,6 +73,7 @@ class Eplayer extends HTMLElement {
   }
 
   play() {
+    if (this.beatMap) return
     if (this.video.paused) {
       this.video.play()
       this.$('.ep-video').style.display = 'none'
@@ -138,13 +157,13 @@ class Eplayer extends HTMLElement {
       case 38:
         try {
           this.video.volume = parseInt(this.video.volume * 100) / 100 + 0.05
-        } catch (e) {}
+        } catch (e) { }
         setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
       case 40:
         try {
           this.video.volume = parseInt(this.video.volume * 100) / 100 - 0.05
-        } catch (e) {}
+        } catch (e) { }
         setVolume(this.video.volume.toFixed(1) * 10, this.$('.line'))
         break
       case 32:
@@ -231,6 +250,7 @@ class Eplayer extends HTMLElement {
           overflow: hidden;
         }
         .controls{
+          display:${this.beatMap ? 'none' : 'block'};
           position:absolute;
           left:0;
           right:0;
@@ -272,10 +292,11 @@ class Eplayer extends HTMLElement {
         }
         .lines{
           padding:0 10px;
+          display:flex;
+          align-items: center;
         }
         .line{
-          padding:0;
-          margin-bottom: -2px;
+          padding:0 2px;
           cursor:pointer
         }
         .line i{
@@ -375,6 +396,7 @@ class Eplayer extends HTMLElement {
         }
         .ep-video {
           position: absolute;
+          display:${this.beatMap ? 'none' : 'block'};
           bottom: 25px;
           right: 20px;
           font-size:40px;
@@ -413,7 +435,24 @@ class Eplayer extends HTMLElement {
             margin-left:-10px;
             display:inline-block;
         }
+        .mug {
+          height: 450px;
+          width: 281px;
+          position: absolute;
+          z-index: 999;
+          /* pointer-events: none; */
+          transform: translate(-50%, -50%);
+          left: 50%;
+          top: 50%;
+          opacity: 0.95;
+        }
+        .wrap{
+          position: relative;
+          height: 450px;
+        }
       </style>
+      <div class="wrap">
+      <div class="mug"></div>
       <div class="eplayer">
         <video id="video" class="video" src="${this.src || ''}"></video>
         <div class="mark loading"></div>
@@ -458,6 +497,7 @@ class Eplayer extends HTMLElement {
         <div class="epicon ep-video"></div>
         <div class="panel"></div>
       </div>
+      </div>
     `
     let template = document.createElement('template')
     template.innerHTML = html
@@ -491,6 +531,7 @@ class Eplayer extends HTMLElement {
       '.panel',
       '.speed',
       '.pip',
+      '.mug'
     ]
 
     for (const key of doms) {
@@ -530,6 +571,7 @@ class Eplayer extends HTMLElement {
 
   mount() {
     this.video = this.$('.video')
+    this.mug = this.$('.mug')
     this.video.volume = 0.5
     setVolume(this.video.volume * 10, this.$('.line'))
     this.video.onwaiting = this.waiting.bind(this)
@@ -565,7 +607,7 @@ class Eplayer extends HTMLElement {
         setVolume(index + 1, this.$('.line'))
       }
     })
-    document.oncontextmenu = () => false
+    this.$('.eplayer').oncontextmenu = () => false
   }
 }
 
@@ -598,7 +640,7 @@ function isFullScreen() {
   return document.isFullScreen || document.webkitIsFullScreen || document.mozIsFullScreen
 }
 
-;(function () {
+; (function () {
   let link = document.createElement('link')
   link.setAttribute('href', 'https://at.alicdn.com/t/font_836948_g9fk6jqpl8l.css')
   link.setAttribute('rel', 'stylesheet')

package/docs/game.html

@@ -0,0 +1,17 @@
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/pixi.js/4.5.2/pixi.min.js"></script>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
+</head>
+
+<body>
+
+
+</body>
+
+</html>
+
+<script src="./mug-class.js"></script>

package/docs/index.html

@@ -6,6 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>eplayer</title>
+  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/pixi.js/4.5.2/pixi.min.js"></script>
+  <script src="./mug.js"></script>
 </head>
 
 <body>
@@ -16,8 +18,10 @@
 
     .wrapper {
       width: 800px;
-      margin: 100px auto;
-      height: 450px;
+      position: absolute;
+      transform: translate(-50%, -50%);
+      left: 50%;
+      top: 50%;
     }
 
     @media screen and (max-width: 500px) {
@@ -39,16 +43,16 @@
       box-sizing: border-box;
     }
 
-    .wrapper a:nth-child(3) {
+    .wrapper a:nth-child(2) {
       background: #333;
     }
 
-    .wrapper a:nth-child(2) {
+    .wrapper a:nth-child(4) {
       margin-top: 30px;
-      background: #e91e63;
+      background: #946ce6;
     }
 
-    .wrapper a:nth-child(4) {
+    .wrapper a:nth-child(3) {
       background: #1ea6e9;
     }
   </style>
@@ -97,17 +101,19 @@
     }
   </style>
   <div class="wrapper">
-    <e-player id="ep"
-      src="https://gss3.baidu.com/6LZ0ej3k1Qd3ote6lo7D0j9wehsv/tieba-smallvideo/3_d97abb65fc36a1d689efd3a105bebce1.mp4">
+
+    <e-player id="ep" src="https://mp4.ziyuan.wang/view.php/67c796ed2dad70c429bda73a647704f0.mp4"
+      beatMap="1:2|2:1|3:3|4:4|6:2|6:1|7:3|8:4|8:2|9:1|11:3|12:4|12:2|13:1|14:3|15:4|16:2|16:1|17:3|19:4|19:2|20:1|21:3|22:4">
     </e-player>
+
     <a href="https://github.com/132yse/eplayer">github</a>
     <a href="https://github.com/132yse/eplayer/blob/master/README.md">README</a>
-    <a href="https://www.clicli.top">clicli.us</a>
+    <a href="https://www.clicli.cc">clicli.cc</a>
   </div>
   <script src="https://unpkg.com/@webcomponents/webcomponentsjs"></script>
   <script src="https://unpkg.com/hls.js"></script>
   <script src="./eplayer.js"></script>
-  <script src="./pic.js"></script>
+  <!-- <script src="./pic.js"></script> -->
 </body>
 
 </html>

package/docs/mug.js

@@ -0,0 +1,356 @@
+class Mug {
+    constructor(beatMap, container, video) {
+        this.container = container
+        this.beatMap = beatMap
+        this.gameStatus = 0
+        this.buttonX = 85
+
+        this.buttonArray = []
+        this.imgNumber = 1
+        this.fps = 0
+        this.score = 0
+        this.str = "0"
+        this.app = new PIXI.Application(500, 800)
+        this.container.appendChild(this.app.view)
+        console.log(container)
+        this.app.view.style.width = container.offsetWidth + 'px'
+        this.video = video
+
+        this.drawUI()
+        const buttonArray = this.buttonArray
+        document.onkeydown = function (e) {
+            if (e && e.keyCode == 68) {
+                buttonArray[0].keyDown()
+            } else if (e && e.keyCode == 70) {
+                buttonArray[1].keyDown()
+            } else if (e && e.keyCode == 74) {
+                buttonArray[2].keyDown()
+            } else if (e && e.keyCode == 75) {
+                buttonArray[3].keyDown()
+            }
+        }
+        document.onkeyup = function (e) {
+            if (e && e.keyCode == 68) {
+                buttonArray[0].keyUp()
+            } else if (e && e.keyCode == 70) {
+                buttonArray[1].keyUp()
+            } else if (e && e.keyCode == 74) {
+                buttonArray[2].keyUp()
+            } else if (e && e.keyCode == 75) {
+                buttonArray[3].keyUp()
+            }
+        }
+
+        this.app.ticker.add(this.animate.bind(this))
+    }
+
+    animate() {
+        if (this.gameStatus == 0) {
+            return
+        }
+
+        this.fps = this.video.currentTime
+        //创建动物
+        const head = this.beatMap[0]
+
+
+        if (head && this.fps >= head.fps) {
+            console.log(this.fps)
+            this.beatMap.shift()
+            let button = this.buttonArray[head.button - 1]
+            button.createAnimal()
+        }
+
+        //图片移动
+        for (let i = 0; i < this.buttonArray.length; i++) {
+            let button = this.buttonArray[i]
+            button.animalMove()
+            button.deleteAnimal()
+            button.scoreMove()
+        }
+
+        if (!head) {
+            this.over()
+        }
+    }
+
+    drawUI() {
+        //游戏元素图层
+        let gameCeng = new PIXI.Container()
+        this.app.stage.addChild(gameCeng)
+        //游戏背景
+        let bg = new PIXI.Sprite.fromImage("res/beijing.png")
+        gameCeng.addChild(bg)
+        //ui图层
+        let uiCeng = new PIXI.Container()
+        this.app.stage.addChild(uiCeng)
+        this.uiCeng = uiCeng
+
+        //游戏对象层
+        let gameObjectCeng = new PIXI.Container()
+        gameCeng.addChild(gameObjectCeng)
+
+        //line 图层
+        let lineCeng = new PIXI.Container()
+        gameObjectCeng.addChild(lineCeng)
+
+        //兔子图片图层
+        let animalCeng = new PIXI.Container()
+        gameObjectCeng.addChild(animalCeng)
+
+        //score图层
+        let scoreCeng = new PIXI.Container()
+        gameObjectCeng.addChild(scoreCeng)
+
+        //点击位置
+        let touming = new PIXI.Sprite.fromImage("res/touming.png")
+        lineCeng.addChild(touming)
+        touming.y = 600
+        touming.x = 250
+        touming.anchor.set(0.5, 0.5)
+
+
+        for (let i = 0; i < 4; i++) {
+            let button = new Button(this.imgNumber, gameObjectCeng, uiCeng, lineCeng, animalCeng, this.buttonX, this)
+            this.buttonX = button.bjt.x + 110
+            this.imgNumber++
+            this.buttonArray.push(button)
+        }
+
+
+        let style = {
+            font: 'bold 40px 微软雅黑',//加粗 倾斜 字号 字体名称
+            fill: '#F7EDCA',//颜色
+            stroke: '#4a1850',//描边颜色
+            strokeThickness: 5,//描边宽度
+            dropShadow: true,//开启阴影
+            dropShadowColor: '#000000',//阴影颜色
+            dropShadowAngle: Math.PI / 6,//阴影角度
+            dropShadowDistance: 6,//投影距离
+            wordWrap: true,//开启自动换行(注：开启后在文本中空格处换行，如文本中没有空格则不换行)
+            wordWrapWidth: 150,//自动换行宽度
+        }
+
+        let text = new PIXI.Text("得分 ", style)
+        uiCeng.addChild(text)
+        text.x = 30
+        text.y = 30
+
+        //创建文本
+        let scoreTxt = new PIXI.Text(this.str, style)
+        this.scoreTxt = scoreTxt
+        uiCeng.addChild(scoreTxt)
+        scoreTxt.x = 130
+        scoreTxt.y = 30
+
+        let startBtn = new PIXI.Sprite.fromImage("res/kaishianniu.png")
+        uiCeng.addChild(startBtn)
+        startBtn.interactive = true
+        startBtn.on("pointerdown", () => {
+            startBtn.visible = false
+            this.gameStatus = 1
+            this.video.play()
+        })
+
+        startBtn.x = 200
+        startBtn.y = 345
+
+    }
+
+    over() {
+        this.video.pause()
+        let gameoverPanel = new PIXI.Sprite.fromImage("res/beiban.png")
+        this.uiCeng.addChild(gameoverPanel)
+        gameoverPanel.x = 20
+        gameoverPanel.y = 100
+        gameoverPanel.alpha = 0.9
+
+        let style = {
+            font: 'bold 40px 微软雅黑',//加粗 倾斜 字号 字体名称
+            fill: '#F7EDCA',//颜色
+        }
+        let scoreTxt = new PIXI.Text(this.score, style)
+        gameoverPanel.addChild(scoreTxt)
+        scoreTxt.x = 210
+        scoreTxt.y = 110
+
+        let restartBtn = new PIXI.Sprite.fromImage("res/fanhuianniu.png")
+        gameoverPanel.addChild(restartBtn)
+        restartBtn.x = 185
+        restartBtn.y = 330
+        restartBtn.interactive = true
+        restartBtn.on("click", function () {
+            window.location.reload()
+        })
+        restartBtn.on("touchstart", function () {
+            window.location.reload()
+        })
+        this.gameStatus = 0
+
+    }
+
+}
+
+//获取显示对象的世界坐标
+function getWorldPosition(displayObject) {
+    let x = displayObject.transform.worldTransform.tx
+    let y = displayObject.transform.worldTransform.ty
+    return { "x": x, "y": y }
+}
+
+class Button {
+    constructor(imgNumber, gameObjectCeng, uiCeng, lineCeng, animalCeng, buttonX, that) {
+        this.gameObjectCeng = gameObjectCeng
+        this.bjt = new PIXI.Sprite.fromImage(`res/bjt${imgNumber}.png`)
+        gameObjectCeng.addChild(this.bjt)
+        this.bjt.anchor.set(0.5, 1)
+        this.bjt.x = buttonX
+        this.bjt.y = 800
+        this.bjt.visible = false
+        this.animalCeng = animalCeng
+
+        this.button = new PIXI.Sprite.fromImage(`res/anniu${imgNumber}.png`)
+        uiCeng.addChild(this.button)
+        this.button.anchor.set(0.5, 0.5)
+        this.button.y = 754
+        this.button.x = this.bjt.x
+        this.type = imgNumber
+
+        this.kong = new PIXI.Sprite.fromImage("res/kong.png")
+        lineCeng.addChild(this.kong)
+        this.kong.anchor.set(0.5, 0.5)
+        this.kong.x = this.bjt.x
+        this.kong.y = 600
+
+        this.button.interactive = true
+        this.animalArray = []
+
+        this.show = true
+
+        this.scoreArray = []
+
+        this.soft = that
+
+        // Handlers for button
+        this.button.on("pointerdown", this.buttonMouseHandler.bind(this))
+        this.button.on("pointerup", this.buttonMouseupHandler.bind(this))
+        this.button.on("click", this.buttonClick.bind(this))
+    }
+
+    createAnimal() {
+        let animal = new Animal(this.type, this.button.x)
+        this.animalCeng.addChild(animal.animal)
+        this.animalArray.push(animal)
+    }
+
+    animalMove() {
+        for (let i = 0; i < this.animalArray.length; i++) {
+            let animal = this.animalArray[i]
+            animal.move()
+        }
+    }
+
+    deleteAnimal() {
+        for (let i = this.animalArray.length - 1; i >= 0; i--) {
+            let animal = this.animalArray[i]
+            if (this.kong.y + 46 < animal.animal.y && this.show == true) {
+                this.scoreAction("miss")
+                this.show = false
+            }
+            if (animal.animal.y > 800) {
+                this.show = true
+                this.animalCeng.removeChild(animal.animal)
+                this.animalArray.splice(i, 1)
+            }
+        }
+    }
+
+    buttonMouseHandler() {
+        this.buttonClick()
+    }
+
+    buttonMouseupHandler() {
+        this.bjt.visible = false
+    }
+
+    buttonClick() {
+        const soft = this
+        this.bjt.visible = true
+
+        for (let i = 0; i < soft.animalArray.length; i++) {
+            if (soft.kong.y - 10 < soft.animalArray[i].animal.y && soft.kong.y + 10 > soft.animalArray[i].animal.y) {
+                this.soft.score += 10
+                this.soft.scoreTxt.text = this.soft.score
+                this.animalCeng.removeChild(soft.animalArray[i].animal)
+                soft.animalArray.splice(i, 1)
+                this.scoreAction("perfect")
+
+            } else if (soft.kong.y - 20 < soft.animalArray[i].animal.y && soft.kong.y + 20 > soft.animalArray[i].animal.y) {
+                this.soft.score += 5
+                this.soft.scoreTxt.text = this.soft.score
+                this.animalCeng.removeChild(soft.animalArray[i].animal)
+                soft.animalArray.splice(i, 1)
+                this.scoreAction("good")
+            } else if (soft.kong.y - 30 < soft.animalArray[i].animal.y && soft.kong.y + 30 > soft.animalArray[i].animal.y) {
+                this.soft.score += 1
+                this.soft.scoreTxt.text = this.soft.score
+                this.animalCeng.removeChild(soft.animalArray[i].animal)
+                soft.animalArray.splice(i, 1)
+                this.scoreAction("bad")
+            }
+        }
+    }
+
+    keyDown() {
+        this.buttonClick()
+    }
+
+    keyUp() {
+        this.bjt.visible = false
+    }
+
+    scoreAction(name) {
+        let score = new PIXI.Sprite.fromImage("res/" + name + ".png")
+        this.gameObjectCeng.addChild(score)
+        score.y = 540
+        score.x = this.bjt.x
+        score.anchor.set(0.5, 0.5)
+        score.alpha = 1
+        this.scoreArray.push(score)
+    }
+
+    scoreMove() {
+        for (let i = 0; i < this.scoreArray.length; i++) {
+            let score = this.scoreArray[i]
+            score.alpha -= 0.01
+            score.y -= 2
+        }
+        for (let i = this.scoreArray.length - 1; i >= 0; i--) {
+            let score = this.scoreArray[i]
+            if (score.y <= 400) {
+                this.gameObjectCeng.removeChild(score)
+                this.scoreArray.splice(i, 1)
+            }
+        }
+    }
+}
+
+class Animal {
+    constructor(type, animalX) {
+        let number = 3
+        let typeMap = {
+            1: "lan",
+            2: "lv",
+            3: "hong",
+            4: "huang"
+        }
+        this.animal = new PIXI.Sprite.fromImage(`res/${typeMap[type]}${number}.png`)
+        this.animal.anchor.set(0.5, 0.5)
+        this.animal.x = animalX
+        this.animal.y = 0
+    }
+
+    move() {
+        this.animal.y += 3.33
+    }
+}