【无标题】

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

html部分

    <div id="fbox">
      <img src="images/game_bg.jpg" id="img_" />
      <div class="box1">开始游戏</div>
      <div class="box2"></div>
      <div id="score"></div>
      <div class="box" style="height: 15px"></div>
      <div class="wol"></div>
    </div>

css部分

     #wrap {
        width: 1000px;
        height: 700px;
        border: 2px solid rgb(83, 80, 80);
        position: relative;
       
        background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }

js部分

 <script>
      var wols_Arr = [];
      var score = 0;
   
      var Score = document.getElementById("score");
      var wol = document.getElementsByClassName("wol")[0];
      var box = document.getElementsByClassName("box")[0];
      var box1 = document.getElementsByClassName("box1")[0];
      var box2 = document.getElementsByClassName("box2")[0];
      box1.onclick=function(){
        score = 0;
        box1.style.display='none';
            var wlof_time=setInterval(function(){
                createwlof();
            },1000)
            var box_width=180;
        var box_time=setInterval(function(){
			box_width--; 
			if(box_width==0){
			clearInterval(box_time);
			clearInterval(wlof_time);
			box2.style.display='block';
			box2.innerHTML='<p id="p1">游戏结束:</p><p id="p2">'+score+'</p><p id="p3">是否继续继续游戏</p>';
                p3.onclick=function(){
                   box2.style.display='none';
                   box1.style.display='block';
                 
                }
			}else{
			box.style.width=box_width+'px';
			}
		},100)
    
      }
      function getRand(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }
      var wolfs_obj = [
        { x: 96, y: 115, flag: true },
        { x: 15, y: 160, flag: true },
        { x: 185, y: 140, flag: true },
        { x: 102, y: 190, flag: true },
        { x: 15, y: 221, flag: true },
        { x: 195, y: 211, flag: true },
        { x: 205, y: 293, flag: true },
        { x: 115, y: 274, flag: true },
        { x: 30, y: 291, flag: true },
      ];
      //生成一只狼狗
   
      function createwlof() {
        var img = document.createElement("img");
        var rand = getRand(0, 100);
        var h;
        if (rand < 70) {
          h = "h";
        } else {
          h = "x";
        }
        img.src = "images/" + h + "0.png";
        img.style.position = "absolute";
        var wolfIndex = getRand(0, wolfs_obj.length - 1);
        if (wolfs_obj[wolfIndex].flag) {
          img.style.top = wolfs_obj[wolfIndex].y + "px";
          img.style.left = wolfs_obj[wolfIndex].x + "px";
          wol.appendChild(img);
          wolfs_obj[wolfIndex].flag=false;
          var unm = 0,
            un = 6;
          //定时器
          img.times = setInterval(function () {
            if (unm < 5) {
              img.src = "images/" + h + unm + ".png";
              unm++;
            } else{
              clearInterval(img.times);
              unm=5;
              img.Time = setInterval(function () { 
                if (unm < 0) {
                  clearInterval(img.Time);
                  img.remove();
                  wolfs_obj[wolfIndex].flag = true;
                }else{
                    img.src = "images/" + h + unm + ".png";
                unm--;
                }             
              }, 200);
            }
          }, 200);
          //添加点击事件
          img.addEventListener("click", click_wolf);
          function click_wolf(e) {
              //判断加减分
              if(h =="h"){
                score+=10;
              }else{
                score-=10;
              }
              Score.innerHTML=score;
            clearInterval(img.times);
            clearInterval(img.Time);
            var e = e || window.event;
            img.Times = setInterval(function () {
              un++;
              if (un>9) {
                clearInterval(img.Times);
                img.remove();
                wolfs_obj[wolfIndex].flag = true;
              } else {
                img.src = "images/" + h + un + ".png";
              }
            }, 100);
          }
          wolfs_obj[wolfIndex].flag = false;
        } else {
          createwlof();
        }
      }
      
    </script>

图片

|(需要说有图片联系作者)