vue练习，写游戏

来源：互联网发布：中文校对软件编辑：程序博客网时间：2024/05/21 09:16
<!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>game</title>  <link rel="stylesheet" href="css/css.min.css">  <script src="js/vue.js" charset="utf-8"></script></head><body>  <div id="gembox" >     <div id="game">         <div id="paddle" :style="{            left:paddle.x+'px',            bottom:paddle.y+'px',            width:paddle.w+'px',            height:paddle.h+'px',         }"></div>         <div id="ball" :style="{            left:ball.x+'px',            bottom:ball.y+'px',            width:ball.size+'px',            height:ball.size+'px'         }"></div>         <div class="brick" v-for="brick in brickclass[state.level]" :style="{            left:brick.x+'px',            bottom:brick.y+'px',         }">{{brick.life?brick.life:1}}</div>         <div id="result" v-show="result.show">               <p>{{result.message[result.msgid][0]}}</p>               <button @click="resultGame()">{{result.message[result.msgid][1]}}</button>         </div>         <span id="score">分数：{{state.score}}</span>         <div id="set" @click="state.setting=!state.setting"></div>     </div>      <div id="control" v-show="state.setting">            <p>               <span>运动：</span>               <input type="button" :value='state.toggle?"暂停":"开始"' @click="state.toggle=!state.toggle"></input>            </p>            <p>               <span>速度：{{ball.fps}}</span>               <input type="range" min="5" max="100" :value="ball.fps"  v-model.number="ball.fps"/>               <span class="text" v-show="ball.fps>80">(小伙子怕是要作死啊)</span>            </p>            <p>               <span>挡板：{{paddle.w}}</span>               <input type="range" min="50" max="500" :value="paddle.w"  v-model.number="paddle.w" />               <span class="text" v-show="paddle.w>400">(你这是在开挂你知道吗)</span>            </p>            <div class="level">               关卡：               <span v-for="(level,index) in brickclass">                  <input type="radio" :value="index" v-model="state.level">                  <label>{{index+1}}</label>               </span>            </div>      </div>  </div><script type="text/javascript">   const log = console.log.bind(console)   const BreaktheBricks = new Vue({      el:"#gembox",      data:{         state:{            toggle:false,            clear:false,            setting:true,            level:0,            score:0         },         paddle:{            x:200,            y:20,            w:100,            h:10,            speed:30         },         ball:{            x:250,            y:35,            size:15,            speed:5,            fps:20         },         brickclass:[            [{x:350,y:360}],            [{x:50,y:360,life:2}],            [{x:50,y:360,life:2},{x:150,y:360,life:2},{x:250,y:360,life:2},{x:350,y:360,life:2}]         ],         result:{            show:true,            msgid:0,            message:[               ["确定要玩这款辣鸡游戏?","开始"],               ["恭喜你闯成功","下一关"],               ["辣鸡游戏都玩不过","我不服"],               ["恭喜你通关完成","最强荣誉"]            ]         }      },      methods:{         resultGame(){            let g = this,                i = g.result.msgid,            init = function(){               g.result.show = false               g.ball.x = 250               g.ball.y = 35               g.paddle.x = 200               g.state.clear = false               g.state.toggle = true               g.updataGame()            }            if (i == 0 ) {               document.onkeydown = function(e){                  g.paddleGame(e.key)               }            }            if(i == 1){               g.state.level++            }            log('init')            init()         },         paddleGame(key){            let g = this,                o = this.paddle            //判断撞墙            let move = function(n){               if(n < 0){n = 0}               if(n > 500 - o.w){                  n = 500 - o.w               }               o.x = n            }            //移动            if (key == "ArrowLeft") {              move(o.x - o.speed)            }            if (key == "ArrowRight") {              move(o.x + o.speed)            }         },         updataGame(){            let g = this                o = g.ball,                p = g.paddle,                b = g.brickclass[g.state.level]                x = o.speed,                y = o.speed,            updata = function(){               if( g.state.toggle ){                  let 反弹 = function(){                     y *= -1                     Math.floor(Math.random()*2) == 0 ? x *= -1:x                  }                  //判断球与墙是否相撞                  if (o.x < 0 || o.x > 500 - o.size) {                     x *= -1                  }                  if (o.y > 400 - o.size) {                     y *= -1                  }                  if (o.y < 0 ) {                     g.state.toggle = false                     g.state.clear = true                     g.result.show = true                     g.result.msgid = 2                  }                  //判断球与挡板是否相撞                  if(g.rectIntersect(o,p)){                     反弹()                  }                  //判断球与砖块是否相撞                  for (let i = 0; i < b.length; i++) {                     if(!b[i].life){ b[i].life = 1 }                     b[i].w = 50                     b[i].h = 20                     if(g.rectIntersect(o,b[i])){                        反弹()                        g.brickGame(b,b[i],i)                     }                  }                  // move                  o.x += x                  o.y += y               }               let updatatimer = setTimeout(updata,1000/o.fps)               if(g.state.clear){                  log('clear')                  clearTimeout(updatatimer)               }            }            updata()         },         brickGame(b,o,i){            let g = this            o.life--            if(o.life == 0){               b.splice(i,1)               g.state.score +=10               if(b.length == 0){                  g.result.msgid = 1                  g.state.toggle = false                  g.state.clear = true                  g.result.show = true               }            }         },         rectIntersect(a,b){            if (a.y + a.size > b.y && a.y < b.y + b.h) {               if (a.x + a.size > b.x && a.x < b.x + b.w) {                  return true                }            }             return false         }      },      watch:{         paddle:{            handler:function(a,b){               log(a,b)               if(a.w + a.x > 500){                  a.x -= a.w + a.x - 500               }            },            deep: true         }      }   })</script></pody></html>
阅读全文
1 0