刮刮乐真心话大冒险

最新推荐文章于 2021-07-11 09:38:38 发布

lsl1201

最新推荐文章于 2021-07-11 09:38:38 发布

阅读量189

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/lsl1201q/article/details/117875335

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .box{
               width: 610px;
               height: 417px;
               position: relative;
           }
           #canvas{
               position: absolute;
               border: 1px solid;
               box-sizing: border-box;
           }
           .content{
               margin: auto;
               padding-top: 200px;
               width: 200px;
               height: 100px;
               font-size: 44px;
           }
           .tips{
               position: absolute;
               top: 0;
               left: 205px;
               margin: auto 0;
               width: 200px;
               height: 100px;
               background-color: aqua;
               line-height: 100px;
               text-align: center;
           }
           button{
               width: 303px;
               height: 150px;
               text-align: center;
               font-size: 44px;
           }
       </style>
   </head>
   <body>
       <div class="box">
           <canvas id="canvas" width="610" height="417"></canvas>
           <div class="content">请选择</div>
           <div class="tips">请选择你要接受的惩罚</div>
       </div>
       <button type="button" class="zxh">真心话</button>
       <button type="button" class="dmx">大冒险</button>
   </body>
   <script type="text/javascript">
       var box = document.querySelector('.box')
       var canvas = document.querySelector('#canvas')
       var zxhBtn = document.querySelector('.zxh')
       var dmxBtn = document.querySelector('.dmx')
       var content=document.querySelector(".content")
       var tips = document.querySelector('.tips')
       //定义一个变量储存按钮是否点击过状态的
       var isBtn = false
       zxhBtn.οnclick=function(){
           // location.reload();
           isBtn = true
           tips.innerHTML = "现在刮开吧"
           tips.style.fontSize="16px"
           content.style.fontSize='22px'
           var zxhArr = [
               {content:"写首自己最最喜爱的歌?",p:0},
               {content:"你最后悔的一件事是什么?",p:1},
               {content:"如果看到自己最爱的人熟睡在你面前你会做什么?",p:2},
               {content:"曾经有过最被感动的事是什么??",p:3},
               {content:"最后一次发自内心的笑是什么时候??",p:4},
               ]
           var randomNum= Math.round(Math.random()*5) //0-4 round

           if(randomNum==0){
               content.innerHTML=zxhArr[0].content
           }else if(randomNum==1){
               content.innerHTML=zxhArr[1].content
           }else if(randomNum==2){
               content.innerHTML=zxhArr[2].content
           }else if(randomNum==3){
               content.innerHTML=zxhArr[3].content
           }else if(randomNum==4){
               content.innerHTML=zxhArr[4].content
           }

       }
       dmxBtn.οnclick=function(){

           isBtn = true
           tips.innerHTML = "现在刮开吧"
           tips.style.fontSize="16px"
           content.style.fontSize='22px'
           var dmxArr = [
               {content:"与一位异性关在黑屋呆一轮再出来",p:0},
               {content:"对着离你最近的异性的耳根敏感部位哈气，持续5秒",p:1},
               {content:"女生靠在墙上，男生撑在上面，做五下俯卧撑;(脸对脸)",p:2},
               {content:"与异性贴身热舞",p:3},
               {content:"直接互亲嘴角(注意是互亲)",p:4},
               ]
           var randomNum= Math.round(Math.random()*5) //0-4 round
           if(randomNum==0){
               content.innerHTML=dmxArr[0].content
           }else if(randomNum==1){
               content.innerHTML=dmxArr[1].content
           }else if(randomNum==2){
               content.innerHTML=dmxArr[2].content
           }else if(randomNum==3){
               content.innerHTML=dmxArr[3].content
           }else if(randomNum==4){
               content.innerHTML=dmxArr[4].content
           }
       }
       //获取画笔
       var ctx = canvas.getContext('2d')
       var imgbg = new Image()
       imgbg.src='img/zxhdmx.jpeg' //获取图片地址
       imgbg.οnlοad=function(){
           ctx.drawImage(imgbg,0,0,610,417)
           //定义一个变量来决定是否可以刮开
           var isDarw = false;
           canvas.οnmοusedοwn=function(){
               isDarw=true
               if(!isBtn){
                   tips.innerHTML = "请先选择"
                   tips.style.fontSize="44px"
               }
           }
           canvas.οnmοusemοve=function(e){
               if(isDarw&&isBtn){
                   var x = e.pageX - box.offsetLeft
                   var y = e.pageY - box.offsetTop

                   ctx.globalCompositeOperation = 'destination-out'
                   ctx.arc(x,y,20,0,2*Math.PI)
                   ctx.fill()
               }
           }
           canvas.οnmοuseup=function(){
               isDarw=false
           }
       }
   </script>

</html>