Skip to content

php / dencare-game

Go to a project
Commit 147a61e7 by zhangheng
Options

y

parent 8342458d
Showing with 325 additions and 42 deletions
Public/static/css/main.css
...@@ -126,6 +126,7 @@ ul, li { ...@@ -126,6 +126,7 @@ ul, li {
.page_home { .page_home {
position: relative; position: relative;
height: 1238px;
} }
.page_home .game-bj { .page_home .game-bj {
position: absolute; position: absolute;
...@@ -134,9 +135,10 @@ ul, li { ...@@ -134,9 +135,10 @@ ul, li {
top: 0px; top: 0px;
background: url("../images/bj.jpg") left top; background: url("../images/bj.jpg") left top;
width: 640px; width: 640px;
height: 1193px; height: 1143px;
} }
.page_home .word { .page_home .word {
opacity: 0;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: 60px; left: 60px;
...@@ -144,8 +146,11 @@ ul, li { ...@@ -144,8 +146,11 @@ ul, li {
background: url("../images/home-word.png") left top; background: url("../images/home-word.png") left top;
width: 527px; width: 527px;
height: 132px; height: 132px;
-webkit-animation: rotateIn 0.5s 1 linear;
animation-fill-mode: forwards;
} }
.page_home .hand { .page_home .hand {
opacity: 0;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: 390px; left: 390px;
...@@ -153,6 +158,16 @@ ul, li { ...@@ -153,6 +158,16 @@ ul, li {
background: url("../images/hand.png") left top; background: url("../images/hand.png") left top;
width: 198px; width: 198px;
height: 131px; height: 131px;
-webkit-animation: y_c 1s linear 0s infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.page_home .btn-next-map {
position: absolute;
top: 731px;
left: 415px;
width: 137px;
height: 224px;
} }
.page-through { .page-through {
...@@ -237,8 +252,8 @@ ul, li { ...@@ -237,8 +252,8 @@ ul, li {
left: 234px; left: 234px;
top: 975px; top: 975px;
background: url("../images/btn-z-y-1.png") left top; background: url("../images/btn-z-y-1.png") left top;
width: 195px; width: 220px;
height: 49px; height: 90px;
} }
.page-m-b .btn-right { .page-m-b .btn-right {
z-index: 1; z-index: 1;
...@@ -263,11 +278,11 @@ ul, li { ...@@ -263,11 +278,11 @@ ul, li {
.page-m-b .btn-next { .page-m-b .btn-next {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: 226px; left: 219px;
top: 1000px; top: 1020px;
background: url("../images/btn-z-y-1.png") left top; background: url("../images/btn-z-y-1.png") left top;
width: 195px; width: 220px;
height: 49px; height: 90px;
} }
.page-m-b .word { .page-m-b .word {
position: absolute; position: absolute;
...@@ -286,9 +301,11 @@ ul, li { ...@@ -286,9 +301,11 @@ ul, li {
} }
.page-x-z .b-t { .page-x-z .b-t {
position: absolute; position: absolute;
left: 63px; left: 57px;
top: 878px; top: 878px;
width: 512px; width: 526px;
background: white;
padding: 13px 10px 2px 10px;
} }
.page-x-z .b-t img { .page-x-z .b-t img {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -313,7 +330,14 @@ ul, li { ...@@ -313,7 +330,14 @@ ul, li {
height: 83px; height: 83px;
background: white; background: white;
} }
.page-x-z .btn-x-map {
transition: all .5s ease-in;
}
.page-x-z .btn-x-map:active {
-webkit-transform: scale(0.1);
}
.page-x-z .w-p { .page-x-z .w-p {
overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -348,10 +372,10 @@ ul, li { ...@@ -348,10 +372,10 @@ ul, li {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: 94px; left: 94px;
top: 997px; top: 1047px;
background: url("../images/word-2.png") left top; background: url("../images/word-2.png") left top;
width: 425px; width: 425px;
height: 92px; height: 49px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: flex-end; align-items: flex-end;
...@@ -369,7 +393,7 @@ ul, li { ...@@ -369,7 +393,7 @@ ul, li {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: 41px; left: 41px;
top: 107px; top: 98px;
background: url("../images/f-h.png") left top; background: url("../images/f-h.png") left top;
width: 59px; width: 59px;
height: 59px; height: 59px;
...@@ -438,17 +462,16 @@ ul, li { ...@@ -438,17 +462,16 @@ ul, li {
} }
.checking { .checking {
width: 300px; width: 250px;
height: 300px; height: 250px;
position: fixed; position: fixed;
border-radius: 20px; border-radius: 20px;
background-color: black; background-color: black;
opacity: .6; opacity: .6;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -150px; margin-top: -137px;
margin-left: -150px; margin-left: -126px;
display: none;
} }
.checking .text_ { .checking .text_ {
...@@ -503,6 +526,9 @@ ul, li { ...@@ -503,6 +526,9 @@ ul, li {
background: url("../images/arrow.png") left top; background: url("../images/arrow.png") left top;
width: 97px; width: 97px;
height: 133px; height: 133px;
-webkit-animation: down_two 1s linear 0s infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
} }
.page-lang .bj { .page-lang .bj {
position: absolute; position: absolute;
...@@ -908,3 +934,108 @@ ul, li { ...@@ -908,3 +934,108 @@ ul, li {
height: 388px; height: 388px;
} }
} }
@-webkit-keyframes down_two {
0% {
-webkit-transform: translate3d(0, -10px, 0);
}
50% {
-webkit-transform: translate3d(0, 10px, 0);
}
100% {
-webkit-transform: translate3d(0, -10px, 0);
}
}
@-webkit-keyframes y_c {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.dialog_rule {
z-index: 999;
background: rgba(0, 0, 0, 0.7);
width: 640px;
}
.dialog_rule .bj {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.dialog_rule .bj .map {
width: 461px;
height: 642px;
}
.dialog_rule .bj .btn-close {
position: absolute;
top: 320px;
left: 472px;
width: 70px;
height: 70px;
}
.zhou {
z-index: 98;
position: absolute;
display: inline-block;
left: 605px;
top: 20px;
background: url("../images/y.png") left top;
width: 17px;
height: 28px;
}
.c-d {
z-index: 97;
position: absolute;
display: inline-block;
left: 564px;
top: 23px;
background: url("../images/x.png") left top;
width: 61px;
height: 61px;
}
.m-b-zhou-sate {
left: 585px !important;
top: 91px !important;
}
.m-b-sate {
left: 542px !important;
top: 94px !important;
}
.rotate-sate {
-webkit-animation: rotate 2s infinite linear;
}
@-webkit-keyframes rotate {
0%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Public/static/css/main.scss
...@@ -69,7 +69,7 @@ $ea-prefix-for-spec: false !global; ...@@ -69,7 +69,7 @@ $ea-prefix-for-spec: false !global;
display: inline-block; display: inline-block;
right: torem($x); right: torem($x);
top: torem($y); top: torem($y);
background: url($img) left top; background: url($img) left top no-repeat;
width: torem(image_width($img)); width: torem(image_width($img));
height: torem(image_height($img)); height: torem(image_height($img));
} }
...@@ -166,22 +166,30 @@ ul, li { ...@@ -166,22 +166,30 @@ ul, li {
.page_home { .page_home {
position: relative; position: relative;
//height: 1238px; height: 1238px;
.game-bj { .game-bj {
@include image_bounds_by_pos("../images/bj.jpg", 0px, 0px); @include image_bounds_by_pos("../images/bj.jpg", 0px, 0px);
} }
.word { .word {
opacity: 0;
@include image_bounds_by_pos("../images/home-word.png", 60px, 427px); @include image_bounds_by_pos("../images/home-word.png", 60px, 427px);
-webkit-animation: rotateIn 0.5s 1 linear;
animation-fill-mode: forwards
} }
.hand { .hand {
opacity: 0;
@include image_bounds_by_pos("../images/hand.png", 390px, 641px); @include image_bounds_by_pos("../images/hand.png", 390px, 641px);
-webkit-animation: y_c 1s linear 0s infinite;
@include animate_forwards;
} }
.btn-next-map{
position: absolute;
top:731px;
left: 415px;
width: 137px;
height: 224px;
}
} }
.page-through { .page-through {
...@@ -247,8 +255,7 @@ ul, li { ...@@ -247,8 +255,7 @@ ul, li {
@include image_bounds_by_pos("../images/arrow-left.png", 586px, 477px); @include image_bounds_by_pos("../images/arrow-left.png", 586px, 477px);
} }
.btn-next { .btn-next {
@include image_bounds_by_pos("../images/btn-z-y-1.png", 219px, 1020px);
@include image_bounds_by_pos("../images/btn-z-y-1.png", 226px, 1000px);
} }
.word { .word {
@include image_bounds_by_pos("../images/word-1.png", 226px, 907px); @include image_bounds_by_pos("../images/word-1.png", 226px, 907px);
...@@ -263,10 +270,11 @@ ul, li { ...@@ -263,10 +270,11 @@ ul, li {
.b-t { .b-t {
position: absolute; position: absolute;
left: 63px; left: 57px;
top: 878px; top: 878px;
width: 512px; width: 526px;
//height: 87px; background: white;
padding: 13px 10px 2px 10px;
img { img {
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -291,8 +299,15 @@ ul, li { ...@@ -291,8 +299,15 @@ ul, li {
height: 83px; height: 83px;
background: white; background: white;
} }
.btn-x-map{
transition: all .5s ease-in;
}
.btn-x-map:active{
-webkit-transform: scale(0.1);
}
.w-p { .w-p {
overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -306,6 +321,7 @@ ul, li { ...@@ -306,6 +321,7 @@ ul, li {
width: 96px; width: 96px;
height: 83px; height: 83px;
} }
} }
.b-y { .b-y {
@include image_bounds_by_pos("../images/btn-b-y.png", 94px, 997px); @include image_bounds_by_pos("../images/btn-b-y.png", 94px, 997px);
...@@ -319,7 +335,7 @@ ul, li { ...@@ -319,7 +335,7 @@ ul, li {
} }
.btn-w-p { .btn-w-p {
@include image_bounds_by_pos("../images/word-2.png", 94px, 997px); @include image_bounds_by_pos("../images/word-2.png", 94px, 1047px);
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: flex-end; align-items: flex-end;
...@@ -335,7 +351,8 @@ ul, li { ...@@ -335,7 +351,8 @@ ul, li {
width: 640px; width: 640px;
height: 1238px; height: 1238px;
.btn-s { .btn-s {
@include image_bounds_by_pos("../images/f-h.png", 41px, 107px);
@include image_bounds_by_pos("../images/f-h.png", 41px, 98px);
} }
.btn { .btn {
...@@ -402,17 +419,16 @@ ul, li { ...@@ -402,17 +419,16 @@ ul, li {
} }
.checking { .checking {
width: 300px; width: 250px;
height: 300px; height: 250px;
position: fixed; position: fixed;
border-radius: 20px; border-radius: 20px;
background-color: black; background-color: black;
opacity: .6; opacity: .6;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -150px; margin-top: -137px;
margin-left: -150px; margin-left: -126px;
display: none;
} }
.checking .text_ { .checking .text_ {
...@@ -459,7 +475,8 @@ ul, li { ...@@ -459,7 +475,8 @@ ul, li {
.arrow { .arrow {
@include image_bounds_by_pos("../images/arrow.png", 273px, 630px); @include image_bounds_by_pos("../images/arrow.png", 273px, 630px);
-webkit-animation: down_two 1s linear 0s infinite;
@include animate_forwards;
} }
.bj { .bj {
@include image_bounds_by_pos("../images/lang.jpg", 21px, 1160px); @include image_bounds_by_pos("../images/lang.jpg", 21px, 1160px);
...@@ -697,5 +714,98 @@ ul, li { ...@@ -697,5 +714,98 @@ ul, li {
//$img: url("../images/btn_map.png"); //$img: url("../images/btn_map.png");
//@include image_bounds_by_pos("../images/page_end.jpg", 333px, 933px); //@include image_bounds_by_pos("../images/page_end.jpg", 333px, 933px);
@-webkit-keyframes down_two {
0% {
-webkit-transform: translate3d(0, -10px, 0)
}
50% {
-webkit-transform: translate3d(0, 10px, 0)
}
100% {
-webkit-transform: translate3d(0, -10px, 0)
}
}
@-webkit-keyframes y_c {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1
}
}
.dialog_rule {
z-index: 999;
background: rgba(0, 0, 0, 0.7);
width: 640px;
.bj{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.map{
width: 461px;
height: 642px;
}
.btn-close{
position: absolute;
top: 320px;
left: 472px;
width: 70px;
height: 70px;
}
}
}
.zhou{
z-index: 98;
@include image_bounds_by_pos("../images/y.png", 605px, 20px);
}
.c-d{
z-index: 97;
@include image_bounds_by_pos("../images/x.png", 564px, 23px);
}
.m-b-zhou-sate{
left: 585px!important;
top: 91px!important;
}
.m-b-sate{
left: 542px!important;
top: 94px!important;
}
.rotate-sate{
-webkit-animation: rotate 2s infinite linear;
//-webkit-transform-origin: 46% 51%;
}
@-webkit-keyframes rotate {
0%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
\ No newline at end of file
Public/static/images/bj.jpg
Public/static/images/bj.jpg

193 KB | W: | H:

Public/static/images/bj.jpg

186 KB | W: | H:

Public/static/images/bj.jpg
Public/static/images/bj.jpg
Public/static/images/bj.jpg
Public/static/images/bj.jpg
  • 2-up
  • Swipe
  • Onion skin
Public/static/images/btn-b-y.png
Public/static/images/btn-b-y.png

6.81 KB | W: | H:

Public/static/images/btn-b-y.png

4.65 KB | W: | H:

Public/static/images/btn-b-y.png
Public/static/images/btn-b-y.png
Public/static/images/btn-b-y.png
Public/static/images/btn-b-y.png
  • 2-up
  • Swipe
  • Onion skin
Public/static/images/btn-z-y-1.png
Public/static/images/btn-z-y-1.png

3.42 KB | W: | H:

Public/static/images/btn-z-y-1.png

16.2 KB | W: | H:

Public/static/images/btn-z-y-1.png
Public/static/images/btn-z-y-1.png
Public/static/images/btn-z-y-1.png
Public/static/images/btn-z-y-1.png
  • 2-up
  • Swipe
  • Onion skin
Public/static/images/word-2.png
Public/static/images/word-2.png

6.46 KB | W: | H:

Public/static/images/word-2.png

4.11 KB | W: | H:

Public/static/images/word-2.png
Public/static/images/word-2.png
Public/static/images/word-2.png
Public/static/images/word-2.png
  • 2-up
  • Swipe
  • Onion skin
Public/static/js/index.js
...@@ -13,6 +13,22 @@ $(document).ready(function () { ...@@ -13,6 +13,22 @@ $(document).ready(function () {
this.css('z-index', window['max_zindex']); this.css('z-index', window['max_zindex']);
this.show(); this.show();
}; };
$('.btn-next-map').on('click',function () {
$('.page_home').hide();
$('.page-through').show();
setTimeout(function () {
$('.page-through').hide();
$('.page-lang').show();
},5000)
});
$('.c-d').on('click',function () {
if($(this).hasClass('rotate-sate')){
$(this).removeClass('rotate-sate')
}else {
$(this).addClass('rotate-sate')
}
});
$(window).scroll(function(event){ $(window).scroll(function(event){
var wScrollY = window.scrollY; // 当前滚动条位置 var wScrollY = window.scrollY; // 当前滚动条位置
if(wScrollY>=270){ if(wScrollY>=270){
...@@ -104,7 +120,7 @@ $(document).ready(function () { ...@@ -104,7 +120,7 @@ $(document).ready(function () {
if(wScrollY>=8464){ if(wScrollY>=8464){
$('.map-28').show() $('.map-28').show()
} }
if(wScrollY>=8889){ if(wScrollY>=8808){
$('.map-29').show() $('.map-29').show()
$('.map-30').show() $('.map-30').show()
} }
...@@ -196,6 +212,9 @@ $(document).ready(function () { ...@@ -196,6 +212,9 @@ $(document).ready(function () {
$('.x-z').hide(); $('.x-z').hide();
$('.x-z-sate').show(); $('.x-z-sate').show();
}); });
$('.btn-close').on('click',function () {
$('.dialog').hide();
});
$('.btn-next').on('click',function () { $('.btn-next').on('click',function () {
var bjGroup = new Konva.Group({ var bjGroup = new Konva.Group({
x: 0, x: 0,
...@@ -213,6 +232,9 @@ $(document).ready(function () { ...@@ -213,6 +232,9 @@ $(document).ready(function () {
layer.add(bjGroup); layer.add(bjGroup);
layer.draw(); layer.draw();
}; };
$('.x-z').hide();
$('.x-z-sate').show()
$('.dialog_rule').show();
$('.page-m-b').hide(); $('.page-m-b').hide();
$('.page-x-z').show(); $('.page-x-z').show();
}); });
......
index.html
...@@ -50,20 +50,25 @@ ...@@ -50,20 +50,25 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="page page_home" style="display: none"> <div class="page_home" style="display: block">
<div class="zhou"></div>
<div class="c-d"></div>
<div class="game-bj"></div> <div class="game-bj"></div>
<div class="word"></div> <div class="word"></div>
<div class="hand"></div> <div class="hand"></div>
<div class="btn-next-map"></div>
</div> </div>
<div class="page-through" style="display: none"> <div class="page-through" style="display: none">
<div class="through-map"></div> <div class="through-map"></div>
<div class="map-1"></div> <div class="map-1"></div>
<div class="map-2"></div> <div class="map-2"></div>
<div class="map-3"></div> <div class="map-3"></div>
<div class="map-4"></div> <div class="map-4"></div>
</div> </div>
<div class="page-lang" style="display: block"> <div class="page-lang" style="display: none">
<div class="zhou" style="position: fixed"></div>
<div class="c-d" style="position: fixed"></div>
<div class="word"></div> <div class="word"></div>
<div class="arrow"></div> <div class="arrow"></div>
<div class="bj"></div> <div class="bj"></div>
...@@ -98,6 +103,8 @@ ...@@ -98,6 +103,8 @@
<div class="map-30" style="display: none"></div> <div class="map-30" style="display: none"></div>
</div> </div>
<div class="page-m-b" style="display: none"> <div class="page-m-b" style="display: none">
<div class="zhou m-b-zhou-sate"></div>
<div class="c-d m-b-sate"></div>
<div class="swiper-container"> <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<img class="side-1 swiper-slide" src="Public/static/images/side-1-1.png"> <img class="side-1 swiper-slide" src="Public/static/images/side-1-1.png">
...@@ -113,6 +120,8 @@ ...@@ -113,6 +120,8 @@
<div class="word"></div> <div class="word"></div>
</div> </div>
<div class="page-x-z" style="display: none"> <div class="page-x-z" style="display: none">
<div class="zhou m-b-zhou-sate"></div>
<div class="c-d m-b-sate"></div>
<div class="b-j" id="b-j"> <div class="b-j" id="b-j">
</div> </div>
<div class="w-p x-z x-z-sate"> <div class="w-p x-z x-z-sate">
...@@ -138,6 +147,8 @@ ...@@ -138,6 +147,8 @@
</div> </div>
</div> </div>
<div class="page-s-c" style="display: none"> <div class="page-s-c" style="display: none">
<div class="zhou m-b-zhou-sate"></div>
<div class="c-d m-b-sate"></div>
<img class="h-b" src=""> <img class="h-b" src="">
<img class="btn-s" src="Public/static/images/f-h.png"> <img class="btn-s" src="Public/static/images/f-h.png">
<div class="btn"> <div class="btn">
...@@ -145,7 +156,15 @@ ...@@ -145,7 +156,15 @@
<div class="btn-prize btn-sate"></div> <div class="btn-prize btn-sate"></div>
</div> </div>
</div> </div>
<div class="dialog dialog_rule" style="display: none">
<div class="bj">
<img class="map" src="Public/static/images/dialog.png">
<div class="btn-close"></div>
</div>
</div>
</div> </div>
<div class="page_checking" style="display: none"> <div class="page_checking" style="display: none">
<div class="checking" style="display: block;z-index: 99"> <div class="checking" style="display: block;z-index: 99">
<div class="checkShow"> <div class="checkShow">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment