• 接物游戏demo

    接物游戏demo：

    接物元素设置了不同分值

    指定时间内，接到元素则加分，接到炸弹则减分，计时结束，游戏停止

     demo代码：

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    6. <meta name="viewport" content="width=750, user-scalable=no">
    7. <meta http-equiv="pragma" content="no-cache">
    8. <meta http-equiv="Cache-Control" content="no-cache">
    9. <meta http-equiv="Expires" content="0">
    10. <meta name="apple-mobile-web-app-capable" content="yes">
    11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
    12. <meta name="format-detection" content="telephone=no">
    13. <meta name="apple-mobile-web-app-title" content="">
    14. <title>接物demotitle>
    15. <style>
    16.   @charset "utf-8";
    17.   *{ 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;}
    18.   html{ max-width:750px; margin:0 auto;}
    19.   body{ font-family:"PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"; font-size:28px; line-height:1.6; color:#333;
    20.       -webkit-user-select:none; user-select:none;
    21.       -webkit-touch-callout:none; touch-callout:none;
    22.   }
    23.   li{ list-style:none;}
    24.   i{ font-style:normal;}
    25.   
    26.   [v-cloak]{ display: none;}
    27.   
    28.   html, body{ height:100%; background-color: #fff; position:relative; overflow: hidden;}
    29.   .page{ width:100%; height:100%; position:absolute; left:0; top:0; overflow: hidden;}
    30.   .page.game{ background-color: skyblue; overflow-y: auto; -webkit-overflow-scrolling: touch;}
    31.   .game_body{}
    32.   
    33.   .show_time{ width: 100%; padding: 20px; text-align: center; position: absolute; left: 0; top: 0;}
    34.   .show_time span{ margin: 0 10px;}
    35.   .show_time span i{ margin: 0 5px; color: palevioletred; font-size: 32px; font-weight: bold;}
    36.   
    37.   #imgShowList{ width: 100%; height: 100vh; position: relative; overflow: hidden;}
    38.   
    39.   .basket{ width: 100%; position: fixed; left: 0; top: 1100px;}
    40.   #gameBtn{ width: 200px; height: 80px; position: absolute; left: 0; top: 0;}
    41.   
    42.   .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;}
    43. style>
    44. head>
    45.  
    46. <body>
    47.  
    48. <section id="app" v-cloak>
    49.   
    50.   <div class="page game">
    51.     <div class="game_body">
    52.       
    53.       <div id="imgShowList">
    54.         
    55.         <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>
    56.       div>
    57.       
    58.       
    59.       <div class="basket">
    60.         <img id="gameBtn" src="btn.png" >
    61.       div>
    62.       
    63.       <div v-if="!inGame" @click="gameStart" class="game_start_btn">开始游戏div>
    64.       
    65.       <div class="show_time"><span>剩余<i>{{countdownTime}}i>sspan> | <span>得分<i>{{currScore}}i>span>div>
    66.     div>
    67.   div>
    68.   
    69. section>
    70.  
    71.  
    72. <template id="imgDownTemp">
    73.   <div v-if="showTemp" :style="'text-align: center;position:absolute;width:' + down_img.imgW + 'px;left:' + down_img.imgX + 'px;top:' + imgY + 'px'">
    74.     <p v-if="showScore" style="width: 100%;position: absolute;left: 0;bottom: -100%;">{{down_img.score > 0 ? '+' + down_img.score : down_img.score}}p>
    75.     <img v-else :src="down_img.img" style="width: 100%;position: absolute;left: 0;bottom: -100%;" />
    76.   div>
    77. template>
    78.  
    79.  
    80. <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js">script>
    81.  
    82. <script src="//cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js">script>
    83. <script type="text/javascript">
    84.   var soundYes = new Howl({
    85.     src: ['game/yes.mp3']
    86.   });
    87.   var soundNo = new Howl({
    88.     src: ['game/no.mp3']
    89.   });
    90. script>
    91.  
    92. <script type="text/javascript">
    93. Vue.component('img-down', {
    94.   data: function () {
    95.     return {
    96.       showTemp:true, // 坠落图片Y轴超过区域时不再显示
    97.       imgY:0, // 坠落图片Y轴
    98.       showScore:false, // 坠落图片被“接住”时，展示加分或减分分值
    99.       setpNum:1, // 坠落图片Y轴偏移量
    100.       timer:null,
    101.       timeStep:null, // 定时器执行时长（毫秒）
    102.       // 定时器执行时长（坠落速度快、中、慢）（毫秒）
    103.       timeStepData:{
    104.         timeFast:5,
    105.         timeslow:8,
    106.         timeslowest:10,
    107.       }
    108.     }
    109.   },
    110.   props:['countdown_time','game_btn_height','game_btn_width','game_btn_top','game_btn_left','down_img'],
    111.   template: '#imgDownTemp',
    112.   mounted() {
    113.     // 坠落图片Y轴偏移量根据随机数值设置，以此影响不同的坠落速度效果
    114.     if(Math.random()*10 > 5){
    115.       this.setpNum = 2;
    116.     }
    117.     // 计时到20秒、10秒时，坠落速度不同程度加快
    118.     if(this.countdown_time <= 10){
    119.       this.timeStep = this.timeStepData['timeFast'];
    120.     }else if(this.countdown_time <= 20){
    121.       this.timeStep = this.timeStepData['timeslow'];
    122.     }else{
    123.       if(this.setpNum == 1){
    124.         this.timeStep = this.timeStepData['timeslow'];
    125.       }else{
    126.         this.timeStep = this.timeStepData['timeslowest'];
    127.       }
    128.     }
    129.     this.timer = setInterval(this.imgShowDown,this.timeStep);
    130.   },
    131.   methods:{
    132.     imgShowDown(){
    133.       // 计时结束-游戏结束
    134.       if(this.countdown_time <= 0){
    135.         clearInterval(this.timer);
    136.       }
    137.       this.imgY+=this.setpNum;
    138.       // 坠落图片到达接物篮子Y轴位置
    139.       if(this.imgY > this.game_btn_top){
    140.         // clearInterval(this.timer);
    141.         // 接到了
    142.         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)){
    143.           this.$emit('set_score',this.down_img.score);
    144.           this.showScore = true;
    145.           clearInterval(this.timer);
    146.           setTimeout(()=>{
    147.             this.showTemp = false;
    148.           },100)
    149.           if(this.down_img.score > 0){
    150.             soundYes.play();
    151.           }else{
    152.             soundNo.play();
    153.           }
    154.         }else{
    155.           // this.showTemp = false;
    156.         }
    157.       }
    158.       //
    159.       if(this.imgY > (this.game_btn_top + this.game_btn_height)){
    160.         clearInterval(this.timer);
    161.         this.showTemp = false;
    162.       }
    163.     }
    164.     
    165.   }
    166. })
    167.  
    168. document.oncontextmenu = function(e){
    169.   e.preventDefault();
    170. }
    171.  
    172. var VM = new Vue({
    173.   el:"#app",
    174.   data:{
    175.     winW:0, // 页面宽度
    176.     gameBtn:'', // 接物篮子
    177.     gameBtnHeight:0, // 接物篮子高度
    178.     gameBtnWidth:0, // 接物篮子宽度
    179.     gameBtnWidthHalf:0, // 接物篮子宽度一半
    180.     gameBtnMaxLeft:0, // 接物篮子最大left值
    181.     gameBtnTop:0, // 接物篮子对顶部距离
    182.     gameLeftNum:0, // 接物篮子left值
    183.     
    184.     inGame:false, // 是否游戏进行中
    185.     currScore:0, // 当前得分
    186.     
    187.     countdownTiming:0,
    188.     countdownTimeDefault:30, // 初始化倒计时时间（秒）
    189.     countdownTime:0,
    190.     
    191.     gameImgW:60, // 坠落图片宽
    192.     gameImgMaxLeft:0, // 坠落图片的最大left值
    193.     gameImgList:[], // 坠落图片-最终展示的列表数据
    194.     // 坠落图片-原始配置数据（图片及对应分值），游戏时从中随机取一个追加至gameImgList中
    195.     gameImgData:[
    196.       {
    197.         img:'game/1.png',
    198.         score:1,
    199.       },
    200.       {
    201.         img:'game/2.png',
    202.         score:2,
    203.       },
    204.       {
    205.         img:'game/3.png',
    206.         score:3,
    207.       },
    208.       {
    209.         img:'game/4.png',
    210.         score:4,
    211.       },
    212.       {
    213.         img:'game/5.png',
    214.         score:5,
    215.       },
    216.       {
    217.         img:'game/6.png',
    218.         score:-5,
    219.       },
    220.       {
    221.         img:'game/6.png',
    222.         score:-5,
    223.       },
    224.     ],
    225.   },
    226.   created() {
    227.   },
    228.   mounted() {
    229.     this.initParameter();
    230.   },
    231.   watch: {
    232.   },
    233.   methods:{
    234.     // 游戏参数初始化数据
    235.     initParameter(){
    236.       this.winW = document.documentElement.offsetWidth || document.body.offsetWidth;
    237.       this.gameBtn = document.getElementById('gameBtn');
    238.       this.gameBtnHeight = this.gameBtn.offsetHeight;
    239.       this.gameBtnWidth = this.gameBtn.offsetWidth;
    240.       this.gameBtnWidthHalf = this.gameBtnWidth / 2;
    241.       this.gameBtnMaxLeft = this.winW - this.gameBtnWidthHalf * 2;
    242.       this.gameBtnTop = document.getElementsByClassName('basket')[0].offsetTop;
    243.       
    244.       this.gameImgMaxLeft = this.winW - this.gameImgW;
    245.       
    246.       this.gameBtn.style.left = (this.winW / 2 - this.gameBtnWidthHalf) + 'px';
    247.     },
    248.     // 拖动接物篮子
    249.     touchmove(e){
    250.       e.preventDefault();
    251.       this.gameLeftNum = e.touches[0].pageX - this.gameBtnWidthHalf;
    252.       this.gameLeftNum = this.gameLeftNum < 0 ? 0 : this.gameLeftNum > this.gameBtnMaxLeft ? this.gameBtnMaxLeft : Math.floor(this.gameLeftNum);
    253.       this.gameBtn.style.left = this.gameLeftNum + 'px';
    254.       // console.log(this.gameLeftNum , this.gameBtn.offsetLeft)
    255.     },
    256.     // 开始游戏，计时等设置
    257.     startGame(){
    258.       this.inGame = true;
    259.       this.currScore = 0;
    260.       this.currScoreData = [];
    261.       
    262.       this.gameImgList = [];
    263.       
    264.       this.gameBtn.addEventListener('touchmove',this.touchmove,false);
    265.       this.gameBtn.style.left = (this.winW / 2 - this.gameBtnWidthHalf) + 'px';
    266.       
    267.       this.countdownTiming = 0;
    268.       this.countdownTime = this.countdownTimeDefault;
    269.       this.changeTime();
    270.     },
    271.     // 计时
    272.     // timing , rafId;
    273.     changeTime(k){
    274.       // console.log(k);
    275.       if(!this.timing && k){
    276.         this.timing = k
    277.       }
    278.       // 1秒执行60次
    279.       this.rafId = requestAnimationFrame(this.changeTime);
    280.       // 倒计时计算
    281.       this.countdownTiming++;
    282.       // 1秒(1000ms)执行一次
    283.       if(this.countdownTiming % 60 == 0){
    284.         this.countdownTime-= 1;
    285.       }
    286.       if(this.countdownTime <= 0){
    287.         this.gameEnd();
    288.         cancelAnimationFrame(this.rafId);
    289.       }
    290.       // 动态添加坠落图片（时间越短，添加的坠落图片越多）
    291.       if(this.countdownTiming % 40 == 0){
    292.         this.setImgToPage();
    293.       }
    294.     },
    295.     // 动态添加坠落图片
    296.     setImgToPage(){
    297.       let randomKey = Math.floor(Math.random() * this.gameImgData.length);
    298.       let imgX = Math.floor(Math.random() * this.gameImgMaxLeft);
    299.       this.gameImgList.push({imgX,imgY:0,imgW:this.gameImgW,...this.gameImgData[randomKey]})
    300.     },
    301.     // 加分减分统计
    302.     addScore(score){
    303.       this.currScore += score;
    304.       this.currScoreData.push(score);
    305.     },
    306.     
    307.     ///
    308.     
    309.     // 开始游戏
    310.     gameStart(){
    311.       this.startGame();
    312.     },
    313.     // 计时结束-游戏结束
    314.     gameEnd(){
    315.       console.log(this.currScoreData);
    316.       this.inGame = false;
    317.       this.gameBtn.removeEventListener('touchmove',this.touchmove,false);
    318.     },
    319.     
    320.   }
    321. })
    322. script>
    323.  
    324.  
    325. body>
    326. html>

  • 相关阅读:
    【示波器专题】示波器探头不同的衰减比对测量的影响
    【业务架构】价值实现、价值定位、价值创造
    2023年9月电子学会Python等级考试试卷（四级）答案解析
    虚拟号码认证如何开通？
    二维码智慧门牌管理系统升级解决方案：高效服务审核流程
    PHP数组处理$arr1转换为$arr2
    C语言 cortex-A7核UART总线实验
    【第八章 多线程、并行并发、多线程的创建方式】
    MySQL索引下推
    JAVA经典百题之9的次数
  • 原文地址：https://blog.csdn.net/qq_16494241/article/details/133952319