first commit

历届学生/18课程/class18_2/课程/2020-12-23/game.js

@@ -0,0 +1,157 @@
+var body = document.querySelector("body");
+var people = document.querySelector(".people");
+var bombAudio = document.querySelector(".bombAudio");
+var appleAudio = document.querySelector(".appleAudio");
+// 屏幕的宽度
+var screenWidth = document.body.clientWidth;
+var screenHeight = document.body.clientHeight;
+var fraction = 0;
+var gameProbability = 0.4;
+var bmobSpeed = 80;
+var appleOffset = 20;
+function createdEle(type) {
+
+  var Img = document.createElement("img");
+  Img.src = type == 1 ? './img/apple.png' : './img/boom.png';
+  Img.className = type == 1 ? 'apple' : 'boom';
+   // 56  84
+  // 元素的宽度
+  var SpanWidth = type == 1 ? 40 : 60;
+  var SpanLeft = Math.random() * (screenWidth - SpanWidth)
+  if (SpanLeft <= SpanWidth) {
+    SpanLeft = 0
+  }
+
+  Img.style = `
+    position: absolute;
+    left: ${SpanLeft}px;
+    top: ${type == 1 ? -56 : -84}px;
+  `;
+
+  body.appendChild(Img);
+  animation(type, Img)
+}
+
+function animation(type, span) {
+  // 苹果🍎
+  if (type == 1) {
+    var appleInterval = setInterval(function (){
+      span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
+      // 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
+      if (parseInt(span.style.top) > screenHeight) {
+        body.removeChild(span)
+        clearInterval(appleInterval)
+      } else {
+        JudgingCollision(span, appleInterval)
+      }
+    },60)
+  // 炸弹💣
+  } else {
+    var boomInterval = setInterval(function (){
+      span.style.top = `${parseInt(span.style.top) + 20}px`;
+      //判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
+      if (parseInt(span.style.top) > screenHeight) {
+        body.removeChild(span)
+        clearInterval(boomInterval)
+      } else {
+        JudgingCollision(span, boomInterval)
+      }
+    },bmobSpeed)
+  }
+}
+
+/**
+ * 判断是否碰撞
+ * @constructor
+ */
+function JudgingCollision(span, timeout) {
+  var people = document.querySelector(".people");
+  var peopleX1 = parseInt(people.style.left);
+  var peopleX2 = parseInt(people.style.left) + people.clientWidth;
+  var peopleX3 = people.offsetTop;
+  var peopleX4 = people.offsetTop + people.clientHeight;
+  
+  var spanX1 = parseInt(span.style.left);
+  var spanX2 = parseInt(span.style.left) + span.clientWidth;
+  var spanX3 = parseInt(span.style.top);
+  var spanX4 = parseInt(span.style.top) +  span.clientHeight;
+
+  // 碰撞检测
+  if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
+    // 没碰上
+  }else{
+    if (span.className == "apple") {
+      fraction += 10;
+
+      // 如果分数超过100分，
+      if (fraction >= 100) {
+        // 降低苹果出现的概率，也就是提高炸弹数量
+        gameProbability = 0.2;
+        // 并且加快炸弹的速度
+        bmobSpeed = 80;
+        appleOffset = 40;
+      }
+
+      document.querySelector(".fraction").innerText = `${fraction}分`;
+      appleAudio.play()
+      body.removeChild(span)
+      clearInterval(timeout)
+    } else {
+      fraction -= 20;
+      document.querySelector(".fraction").innerText = `${fraction}分`;
+      bombAudio.play();
+
+      if (fraction <= 0) {
+        clearInterval(timeout)
+        confirm("游戏失败")
+        location.reload()
+      } else {
+        span.src = "./img/bombimg.png"
+        clearInterval(timeout)
+        setTimeout(function (){
+          body.removeChild(span)
+        },100)
+      }
+    }
+  }
+}
+
+function init () {
+  var probability = Number(Math.random().toFixed(1))
+  if (probability <= gameProbability) {
+    createdEle(1)
+  } else {
+    createdEle(2)
+  }
+}
+
+setInterval(function (){
+  init();
+},200)
+
+body.onmousemove = function (e) {
+  if (e.x <= 100) {
+    people.style.left = `0px`;
+  } else {
+    people.style.left = `${e.x - 100}px`;
+  }
+
+  // 判断人物向右移动
+  if (parseInt(people.style.left) > screenWidth / 2) {
+    people.className = 'people'
+  // 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
+  } else {
+    people.className = 'people leftPeople'
+  }
+}
+
+
+// 接到一个苹果加10分
+// 接到炸弹减20
+// 默认0分
+// 结束条件：分数 < 0
+
+
+// 任务
+// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
+//