接物游戏demo

羽筠
已于 2023-10-20 19:04:23 修改
阅读量315
点赞数
分类专栏： vue.js HTML + CSS + JS JS 文章标签：游戏
于 2023-10-20 18:58:24 首次发布
本文链接：https://blog.csdn.net/qq_16494241/article/details/133952319
版权
JS 同时被 3 个专栏收录
72 篇文章 0 订阅
订阅专栏
HTML + CSS + JS
40 篇文章 2 订阅
订阅专栏
vue.js
13 篇文章 0 订阅
订阅专栏
接物游戏demo：
接物元素设置了不同分值
指定时间内，接到元素则加分，接到炸弹则减分，计时结束，游戏停止
demo代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=750, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>接物demo</title>
<style>
  @charset "utf-8";
  *{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
  html{ max-width:750px; margin:0 auto;}
  body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:28px; line-height:1.6; color:#333;
      -webkit-user-select:none; user-select:none;
      -webkit-touch-callout:none; touch-callout:none;
  }
  li{ list-style:none;}
  i{ font-style:normal;}
  
  [v-cloak]{ display: none;}
  
  html, body{ height:100%; background-color: #fff; position:relative; overflow: hidden;}
  .page{ width:100%; height:100%; position:absolute; left:0; top:0; overflow: hidden;}
  .page.game{ background-color: skyblue; overflow-y: auto; -webkit-overflow-scrolling: touch;}
  .game_body{}
  
  .show_time{ width: 100%; padding: 20px; text-align: center; position: absolute; left: 0; top: 0;}
  .show_time span{ margin: 0 10px;}
  .show_time span i{ margin: 0 5px; color: palevioletred; font-size: 32px; font-weight: bold;}
  
  #imgShowList{ width: 100%; height: 100vh; position: relative; overflow: hidden;}
  
  .basket{ width: 100%; position: fixed; left: 0; top: 1100px;}
  #gameBtn{ width: 200px; height: 80px; position: absolute; left: 0; top: 0;}
  
  .game_start_btn{ padding: 0 15px; height: 60px; line-height: 60px; border-radius: 30px 0 0 30px; background-color: pink; position: absolute; right: 0; top: 60vh;}
</style>
</head>

<body>

<section id="app" v-cloak>
  
  <div class="page game">
    <div class="game_body">
      <!-- 坠落图片展示区 -->
      <div id="imgShowList">
        <!-- <img v-if="item.imgY < gameBtnTop" v-for="item in gameImgList" :style="'width:' + item.imgW + 'px;left:' + item.imgX + 'px;'" :src="item.img" /> -->
        <img-down v-on:set_score="addScore" :countdown_time="countdownTime" :game_btn_height="gameBtnHeight" :game_btn_width="gameBtnWidth" :game_btn_top="gameBtnTop" :game_btn_left="gameLeftNum" :down_img="item" v-for="item in gameImgList"></img-down>
      </div>
      
      <!-- 接物篮子 -->
      <div class="basket">
        <img id="gameBtn" src="btn.png" >
      </div>
      
      <div v-if="!inGame" @click="gameStart" class="game_start_btn">开始游戏</div>
      
      <div class="show_time"><span>剩余<i>{{countdownTime}}</i>s</span> | <span>得分<i>{{currScore}}</i></span></div>
    </div>
  </div>
  
</section>


<template id="imgDownTemp">
  <div v-if="showTemp" :style="'text-align: center;position:absolute;width:' + down_img.imgW + 'px;left:' + down_img.imgX + 'px;top:' + imgY + 'px'">
    <p v-if="showScore" style="width: 100%;position: absolute;left: 0;bottom: -100%;">{{down_img.score > 0 ? '+' + down_img.score : down_img.score}}</p>
    <img v-else :src="down_img.img" style="width: 100%;position: absolute;left: 0;bottom: -100%;" />
  </div>
</template>


<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>
<script type="text/javascript">
  var soundYes = new Howl({
    src: ['game/yes.mp3']
  });
  var soundNo = new Howl({
    src: ['game/no.mp3']
  });
</script>

<script type="text/javascript">
Vue.component('img-down', {
  data: function () {
    return {
      showTemp:true, // 坠落图片Y轴超过区域时不再显示
      imgY:0, // 坠落图片Y轴
      showScore:false, // 坠落图片被“接住”时，展示加分或减分分值
      setpNum:1, // 坠落图片Y轴偏移量
      timer:null,
      timeStep:null, // 定时器执行时长（毫秒）
      // 定时器执行时长（坠落速度快、中、慢）（毫秒）
      timeStepData:{
        timeFast:5,
        timeslow:8,
        timeslowest:10,
      }
    }
  },
  props:['countdown_time','game_btn_height','game_btn_width','game_btn_top','game_btn_left','down_img'],
  template: '#imgDownTemp',
  mounted() {
    // 坠落图片Y轴偏移量根据随机数值设置，以此影响不同的坠落速度效果
    if(Math.random()*10 > 5){
      this.setpNum = 2;
    }
    // 计时到20秒、10秒时，坠落速度不同程度加快
    if(this.countdown_time <= 10){
      this.timeStep = this.timeStepData['timeFast'];
    }else if(this.countdown_time <= 20){
      this.timeStep = this.timeStepData['timeslow'];
    }else{
      if(this.setpNum == 1){
        this.timeStep = this.timeStepData['timeslow'];
      }else{
        this.timeStep = this.timeStepData['timeslowest'];
      }
    }
    this.timer = setInterval(this.imgShowDown,this.timeStep);
  },
  methods:{
    imgShowDown(){
      // 计时结束-游戏结束
      if(this.countdown_time <= 0){
        clearInterval(this.timer);
      }
      this.imgY+=this.setpNum;
      // 坠落图片到达接物篮子Y轴位置
      if(this.imgY > this.game_btn_top){
        // clearInterval(this.timer);
        // 接到了
        if((this.down_img.imgX + this.down_img.imgW) > this.game_btn_left && this.down_img.imgX < (this.game_btn_width + this.game_btn_left)){
          this.$emit('set_score',this.down_img.score);
          this.showScore = true;
          clearInterval(this.timer);
          setTimeout(()=>{
            this.showTemp = false;
          },100)
          if(this.down_img.score > 0){
            soundYes.play();
          }else{
            soundNo.play();
          }
        }else{
          // this.showTemp = false;
        }
      }
      //
      if(this.imgY > (this.game_btn_top + this.game_btn_height)){
        clearInterval(this.timer);
        this.showTemp = false;
      }
    }
    
  }
})

document.oncontextmenu = function(e){
  e.preventDefault();
}

var VM = new Vue({
  el:"#app",
  data:{
    winW:0, // 页面宽度
    gameBtn:'', // 接物篮子
    gameBtnHeight:0, // 接物篮子高度
    gameBtnWidth:0, // 接物篮子宽度
    gameBtnWidthHalf:0, // 接物篮子宽度一半
    gameBtnMaxLeft:0, // 接物篮子最大left值
    gameBtnTop:0, // 接物篮子对顶部距离
    gameLeftNum:0, // 接物篮子left值
    
    inGame:false, // 是否游戏进行中
    currScore:0, // 当前得分
    
    countdownTiming:0,
    countdownTimeDefault:30, // 初始化倒计时时间（秒）
    countdownTime:0,
    
    gameImgW:60, // 坠落图片宽
    gameImgMaxLeft:0, // 坠落图片的最大left值
    gameImgList:[], // 坠落图片-最终展示的列表数据
    // 坠落图片-原始配置数据（图片及对应分值），游戏时从中随机取一个追加至gameImgList中
    gameImgData:[
      {
        img:'game/1.png',
        score:1,
      },
      {
        img:'game/2.png',
        score:2,
      },
      {
        img:'game/3.png',
        score:3,
      },
      {
        img:'game/4.png',
        score:4,
      },
      {
        img:'game/5.png',
        score:5,
      },
      {
        img:'game/6.png',
        score:-5,
      },
      {
        img:'game/6.png',
        score:-5,
      },
    ],
  },
  created() {
  },
  mounted() {
    this.initParameter();
  },
  watch: {
  },
  methods:{
    // 游戏参数初始化数据
    initParameter(){
      this.winW = document.documentElement.offsetWidth || document.body.offsetWidth;
      this.gameBtn = document.getElementById('gameBtn');
      this.gameBtnHeight = this.gameBtn.offsetHeight;
      this.gameBtnWidth = this.gameBtn.offsetWidth;
      this.gameBtnWidthHalf = this.gameBtnWidth / 2;
      this.gameBtnMaxLeft = this.winW - this.gameBtnWidthHalf * 2;
      this.gameBtnTop = document.getElementsByClassName('basket')[0].offsetTop;
      
      this.gameImgMaxLeft = this.winW - this.gameImgW;
      
      this.gameBtn.style.left = (this.winW / 2 - this.gameBtnWidthHalf) + 'px';
    },
    // 拖动接物篮子
    touchmove(e){
      e.preventDefault();
      this.gameLeftNum = e.touches[0].pageX - this.gameBtnWidthHalf;
      this.gameLeftNum = this.gameLeftNum < 0 ? 0 : this.gameLeftNum > this.gameBtnMaxLeft ? this.gameBtnMaxLeft : Math.floor(this.gameLeftNum);
      this.gameBtn.style.left = this.gameLeftNum + 'px';
      // console.log(this.gameLeftNum , this.gameBtn.offsetLeft)
    },
    // 开始游戏，计时等设置
    startGame(){
      this.inGame = true;
      this.currScore = 0;
      this.currScoreData = [];
      
      this.gameImgList = [];
      
      this.gameBtn.addEventListener('touchmove',this.touchmove,false);
      this.gameBtn.style.left = (this.winW / 2 - this.gameBtnWidthHalf) + 'px';
      
      this.countdownTiming = 0;
      this.countdownTime = this.countdownTimeDefault;
      this.changeTime();
    },
    // 计时
    // timing , rafId;
    changeTime(k){
      // console.log(k);
      if(!this.timing && k){
        this.timing = k
      }
      // 1秒执行60次
      this.rafId = requestAnimationFrame(this.changeTime);
      // 倒计时计算
      this.countdownTiming++;
      // 1秒(1000ms)执行一次
      if(this.countdownTiming % 60 == 0){
        this.countdownTime-= 1;
      }
      if(this.countdownTime <= 0){
        this.gameEnd();
        cancelAnimationFrame(this.rafId);
      }
      // 动态添加坠落图片（时间越短，添加的坠落图片越多）
      if(this.countdownTiming % 40 == 0){
        this.setImgToPage();
      }
    },
    // 动态添加坠落图片
    setImgToPage(){
      let randomKey = Math.floor(Math.random() * this.gameImgData.length);
      let imgX = Math.floor(Math.random() * this.gameImgMaxLeft);
      this.gameImgList.push({imgX,imgY:0,imgW:this.gameImgW,...this.gameImgData[randomKey]})
    },
    // 加分减分统计
    addScore(score){
      this.currScore += score;
      this.currScoreData.push(score);
    },
    
    ///
    
    // 开始游戏
    gameStart(){
      this.startGame();
    },
    // 计时结束-游戏结束
    gameEnd(){
      console.log(this.currScoreData);
      this.inGame = false;
      this.gameBtn.removeEventListener('touchmove',this.touchmove,false);
    },
    
  }
})
</script>


</body>
</html>