diff --git a/index.html b/index.html
index 3cf1d1874a517215d63219393ea79519651cb7e5..3f5433a26d728ef420ee4dd0ba0a12fa36abd291 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
@@ -7,18 +8,33 @@
Document
+
+
+
+
+
+
+
-
纵横四方
+
纵横四方·红目香薰
-
操作面板
+
W
+
A
+
D
+
S
+
score:
+
+
+
\ No newline at end of file
diff --git a/src/js.js b/src/js.js
new file mode 100644
index 0000000000000000000000000000000000000000..fb12898721c98e5cd22591d4c900240f92b75459
--- /dev/null
+++ b/src/js.js
@@ -0,0 +1,107 @@
+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
diff --git a/src/style.css b/src/style.css
index 40c510861c648b7ea2e0c0343e42de233e3809d0..c2c6906da98e9a8403ce602bca6b2a71d534ccd8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,56 +1,119 @@
-*{
+* {
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