读心术样式图

规律：从10到99的两位数减去个位和十位相加都为9的倍数

初始化

1.定义三个变量和随机数函数

//定义游戏是否结束
var isGameOver=false;
//定义最大引用图片下标
var maxImgindex=15；
//定义九的倍数背景图的下标
var resultNumber=null；

function creatRandom(min,max){
  return Math.floor(Math.random()*(max-min+1)+min)
}

2.初始化的方法 function init()

• 首先观察右侧示意图图片次数为100个，所以写一个for循环判断次数是否为9的倍数。
• 定义当前图片下标索引变量为nowIndex，将resultNumber赋值为0-15的随机数

var nowIndex=null;
resultNumber=creatRandom(0,maxIndex)

• 如果当前的次数是9的倍数，那么nowIndex等于resultNumber
• 不是的话，nowIndex等于0-15的随机数
• 填充右侧区域的数字和图片

  rightImg.innerHTML += 
       `<div>
        <span class="number">${i}</span>
        <span>
        <img  class='randomImg' src="./images/values/${nowIndex}.png">
        </span>
        </div>`

交互

注册点击事件

• 魔法盘点击后，判断游戏是否结束

游戏结束

• 询问玩家是否还要玩一次
• 如果继续玩，初始化右侧显示区域，设置游戏状态为未结束；
• 结果图片透明度为0，魔盘中心图片透明度为1；
• 设置触发对象的过渡和旋转为空；
• 解除魔盘监听旋转事件；

if（window.confirm('是否再玩一次')）{
   isGameOver=false;
   init（）；
    valueImg.style.opacity = '0'
    centerImg.style.opacity = '1';
   e.currentTarget.setAttribute('style','')
   leftArea.removeEventListener('transitionend', transitionendHandle);

游戏未结束

• 补充 target和currentTarget的不同 target在事件流的目标阶段；

currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，

target指向被单击的对象

currentTarget指向当前事件活动的对象（一般为父级）。

给图片元素增加过渡动画和旋转属性；并且监听旋转结束

  e.currentTarget.style.transition = 'all 2s'
  e.currentTarget.style.transform = 'rotate(1800deg)'
  leftArea.addEventListener('transitionend',transitionendHandle);//过渡后的处理

transitionendHandle方法

• 当旋转结束后，设置游戏状态为结束；
• 魔法中心图片透明度为0;
• 设置结果图片的路径,路径里图片的索引为resultIndex;
• 结果图片的透明度为1

function transitionendHandle(){
   isGameOver=true;
   centerImg.style.opacity='0';
   valueImg.src=`images/values/${resultNumber}.png`
   valueImg.style.opacity='1'
}