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 + + + + + + +
-
纵横四方
+
纵横四方·红目香薰
+
start Game
-

操作面板

+
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