纵横释放·红目香薰写的小游戏

41e2a2ea · 62734f01072d6f2fb9e3f9db · d1bc583b · 41e2a2ea · 41e2a2ea · 41e2a2ea
隐藏空白更改
内联并排

Showing with 207 addition and 21 deletion

index.html index.html +18 -2

src/js.js src/js.js +107 -0

src/style.css src/style.css +82 -19

未找到文件。
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,18 +8,33 @@
    <title>Document</title>
    <link rel="stylesheet" href="src/style.css">
 </head>
+
 <body>
+    <!--使用说明-->
+    <!--本游戏为了训练玩家的反应速度而萌生的想法-->
+    <!--点击【start Game】开始游戏，根据上W下S左A右D的方式进行快速反应。-->
+    <!--【★】号每次出现并停留500-1000毫秒内-->
+    <!--反应成功并在500-1000毫秒内按下对应的按键即可得分-->
+    <!--开始游戏后会出现【out Game】退出游戏-->
    <div class="app">
-        <div class="title">纵横四方</div>
+        <div class="title">纵横四方·红目香薰</div>
        <div class="game">
            <div class="box top"></div>
            <div class="box left"></div>
            <div class="box right"></div>
            <div class="box bottom"></div>
+            <div class="box center">start Game</div>
        </div>
        <div class="info">
-            <h1>操作面板</h1>
+            <div class="bottom_box bottom_top">W</div>
+            <div class="bottom_box bottom_left">A</div>
+            <div class="bottom_box bottom_right">D</div>
+            <div class="bottom_box bottom_bottom">S</div>
+            <div class="bottom_box bottom_center">score:</div>
        </div>
    </div>
+    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
+    <script src="src/js.js"></script>
 </body>
+
 </html>
\ No newline at end of file
--- a/src/js.js
+++ b/src/js.js
+var startTime;
+var playGames;
+var gameTime = 0;
+var startText = "";
+var score = 0;
+$(function() {
+    $("body").keypress(function() {
+        if (event.keyCode == 119) {
+            $(".bottom_top").css("background-color", "gray");
+            if ($(".top").text() == "★") {
+                score += 100;
+                $(".bottom_center").text("分数:" + score);
+            }
+            setTimeout("clearStyle('119')", 100);
+        } else if (event.keyCode == 97) {
+            $(".bottom_left").css("background-color", "gray");
+            if ($(".left").text() == "★") {
+                score += 100;
+                $(".bottom_center").text("分数:" + score);
+            }
+            setTimeout("clearStyle('97')", 100);
+        } else if (event.keyCode == 100) {
+            $(".bottom_right").css("background-color", "gray");
+            if ($(".right").text() == "★") {
+                score += 100;
+                $(".bottom_center").text("分数:" + score);
+            }
+            setTimeout("clearStyle('100')", 100);
+        } else if (event.keyCode == 115) {
+            $(".bottom_bottom").css("background-color", "gray");
+            if ($(".bottom").text() == "★") {
+                score += 100;
+                $(".bottom_center").text("score:" + score);
+            }
+            setTimeout("clearStyle('115')", 100);
+        }
+    });
+    $(".center").click(function() {
+        if ($(".center").text() == "start Game") {
+            score = 0;
+            $(".info").text("score");
+            gameTime = 0;
+            startText = $(".title").text();
+            $(".center").text("out Game");
+            startTime = setInterval("playTime()", 1000);
+            playGames = setInterval("playGame()", 2200);
+        } else {
+            clearInterval(startTime);
+            clearInterval(playGames);
+            $(".center").text("start Game");
+            $(".title").text(startText);
+        }
+    });
+});
+
+function playTime() {
+    gameTime++;
+    var info = startText + gameTime + "s";
+    $(".title").text(info);
+}
+
+function playGame() {
+    var ranTime = (Math.random() * 500) + 500;
+    setTimeout("playGo()", ranTime);
+}
+
+function playGo() {
+    var ranImg = parseInt(Math.random() * 4);
+    var ranNum = parseInt((Math.random() * 500) + 500);
+    if (ranImg == 0) {
+        $(".top").text("★");
+        setTimeout("clearStar('0')", ranNum);
+    } else if (ranImg == 1) {
+        $(".left").text("★");
+        setTimeout("clearStar('1')", ranNum);
+    } else if (ranImg == 2) {
+        $(".right").text("★");
+        setTimeout("clearStar('2')", ranNum);
+    } else if (ranImg == 3) {
+        $(".bottom").text("★");
+        setTimeout("clearStar('3')", ranNum);
+    }
+}
+
+function clearStar(num) {
+    if (num == 0) {
+        $(".top").text("");
+    } else if (num == 1) {
+        $(".left").text("");
+    } else if (num == 2) {
+        $(".right").text("");
+    } else if (num == 3) {
+        $(".bottom").text("");
+    }
+}
+
+function clearStyle(num) {
+    if (num == 119) {
+        $(".bottom_top").css("background-color", "lightslategray");
+    } else if (num == 97) {
+        $(".bottom_left").css("background-color", "lightslategray");
+    } else if (num == 100) {
+        $(".bottom_right").css("background-color", "lightslategray");
+    } else if (num == 115) {
+        $(".bottom_bottom").css("background-color", "lightslategray");
+    }
+}
\ No newline at end of file
--- a/src/style.css
+++ b/src/style.css
-*{
+* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 }
-ul{
+
+ul {
    list-style: none;
 }
-.app{
+
+.app {
    margin: 0px auto;
    width: 80%;
    height: 100vh;
    background-color: lightblue;
 }
-.title{
-    font-size: 0.5rem;
+
+.title {
+    font-size: 50%;
    text-align: center;
    height: 8vh;
    line-height: 8vh;
 }
-.game{
+
+.game {
    width: 100%;
    height: 70vh;
-    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
 }
-.info{
+
+.info {
    width: 100%;
    height: 22vh;
    line-height: 22vh;
+    margin: 0px auto;
 }
-.box{
+
+.box {
    width: 33.3%;
    height: 23.3vh;
-    background-color: gray;
    position: relative;
    float: left;
+    text-align: center;
+    font-size: 3rem;
+    line-height: 23.3vh;
 }
-.top{
+
+.top {
    left: 33.3%;
 }
-.left{
+
+.left {
    left: -33.3%;
-    top:23.3vh;
-    background-color: red;
+    top: 23.3vh;
 }
-.right{
+
+.right {
    right: 0px;
    top: 23.3vh;
-    background-color: aqua;
 }
-.bottom{
+
+.bottom {
    left: 33.3%;
-    top:23.3vh;
-    background-color: blueviolet;
+    top: 23.3vh;
+}
+
+.center {
+    background-color: skyblue;
+    border-radius: 90px;
+    text-align: center;
+    font-size: 50%;
+    line-height: 23.3vh;
+    cursor: pointer;
+    color: gray;
+}
+
+.center:hover {
+    background-color: rgb(55, 176, 224);
+    color: white;
+}
+
+.bottom_box {
+    width: 16.7%;
+    height: 7.3vh;
+    line-height: 7.3vh;
+    float: left;
+    background-color: lightslategray;
+    position: relative;
+    text-align: center;
+}
+
+.bottom_top {
+    border-radius: 90px 90px 0px 0px;
+    left: 42%;
 }
+
+.bottom_left {
+    border-radius: 90px 0px 0px 90px;
+    top: 33%;
+    left: 8.6%;
+}
+
+.bottom_right {
+    border-radius: 0px 90px 90px 0px;
+    top: 33%;
+    left: 25.3%;
+}
+
+.bottom_bottom {
+    border-radius: 0px 0px 90px 90px;
+    top: 66%;
+    left: -8.1%;
+}
+
+.bottom_center {
+    background-color: lightblue;
+    font-size: 50%;
+    width:30%;
+}
\ No newline at end of file