first commit

历届学生/吴欣阳/项目开发/上课项目/js案例/game/js/index.js

@@ -0,0 +1,136 @@
+var body = $("body"),
+    people = $(".people"),
+    clientWidth = document.body.clientWidth,
+    clientHeight = document.body.clientHeight,
+    totalNums = 0;
+
+// 1：让人物移动起来
+// 2：生成炸弹和苹果（随机生成）
+// 3：炸弹 苹果 和 人物的碰撞检测
+//    超过屏幕删除
+//    如果没有超过屏幕，需要进行碰撞检测
+//    炸弹 - 分数
+//    苹果 + 分数
+
+body.onmousemove = function (e) {
+    var x = e.x, moveX = x - 100;
+    people.style.left = `${moveX < 0 ? 0 : moveX}px`;
+
+    // 右移动
+    if (moveX > clientWidth / 2) {
+        people.classList.remove("right")
+    // 左移动
+    } else {
+        people.classList.add("right")
+    }
+}
+
+function CreatedResources(type) {
+    var x = parseInt(Math.random() * clientWidth) - (type == 'apple'? 40 : 60) ;
+    x < 0 ? x = 0 : x;
+
+    var apple = document.createElement("img");
+    apple.src = type == "apple" ? "./img/apple.png" : "./img/boom.png";
+    apple.className = type == "apple" ? "apple motion" : "boom motion";
+    apple.style.left = `${x}px`;
+    apple.style.top = `${type == 'apple'? -40 : -60}px`;
+    body.appendChild(apple);
+    motion(apple, type)
+}
+
+function motion (el, type) {
+    var apple = 0, bmob = 0
+    if (type == "apple") {
+        apple = setInterval(() => {
+            el.style.top = `${parseInt(el.style.top) + 30}px`;
+            if (parseInt(el.style.top) > clientHeight) {
+                body.removeChild(el)
+                clearInterval(apple)
+            } else {
+                JudgingCollision(el, apple)
+            }
+        },60)
+
+    } else {
+        bmob = setInterval(() => {
+            el.style.top = `${parseInt(el.style.top) + 50}px`;
+            if (parseInt(el.style.top) > clientHeight) {
+                setTimeout(()=> {
+                    try {
+                        body.removeChild(el)
+                        clearInterval(bmob)
+                    } catch (e) {}
+
+                },500)
+            } else {
+                JudgingCollision(el,bmob)
+            }
+        },80)
+
+    }
+
+
+}
+
+
+/**
+ * 判断是否碰撞
+ * @constructor
+ */
+function JudgingCollision(span, timeout) {
+    var people = $(".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.classList.contains("apple")) {
+            console.log("苹果");
+            totalNums+=30;
+            $(".appleaudio").play()
+            $(".totalNums").innerText = `${totalNums}分`
+            setTimeout(()=>{
+                body.removeChild(span)
+                clearInterval(timeout)
+            },540)
+        } else {
+            totalNums-=40;
+            span.src = "./img/bombimg.png"
+            $(".boomaudio").play()
+            $(".totalNums").innerText = `${totalNums}分`
+            setTimeout(()=>{
+                body.removeChild(span)
+                clearInterval(timeout)
+            },540)
+            console.log("炸弹")
+        }
+    }
+}
+
+function Created() {
+    var random = parseInt(Math.random() * 100);
+    if (random <= 80) {
+        CreatedResources("bomb")
+        console.log("生成炸弹")
+    } else {
+        CreatedResources("apple")
+        console.log("生成苹果")
+    }
+}
+
+setInterval(() => {
+    Created();
+},1000)
+
+
+function $(className) {
+    return document.querySelector(className)
+}