vue练习，写游戏

最新推荐文章于 2024-06-15 21:49:01 发布

Agrass啊草

最新推荐文章于 2024-06-15 21:49:01 发布

阅读量1.5k

点赞数 2

分类专栏： vue 文章标签： vue 游戏

本文链接：https://blog.csdn.net/unaMattin/article/details/77745784

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

Agrass啊草

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue练习，写游戏

<!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"> <titl
复制链接

扫一扫