flynx/Course-JavaScript
1
0
Fork 0
mirror of https://github.com/flynx/Course-JavaScript.git synced 2025-11-04 05:50:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added game title + fixed a layout bug...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-04-23 15:37:43 +03:00
parent dcc6dddc4b
commit 9c63e7c209
3 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
simplesnake/simplesnake.appcache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# Timestamp: 20170421235203 # Timestamp: 20170423153313
CACHE: CACHE:
simplesnake.html simplesnake.html

59
simplesnake/simplesnake.css
View File

@ -11,8 +11,8 @@ body.hints:after {
body.hints:before { body.hints:before {
content: ""; content: "";
width: 100%; width: 100%;
border-top: dashed 0.5vmin red; border-top: dotted 0.3vmin rgba(255, 0, 0, 0.5);
border-bottom: dashed 0.5vmin red; border-bottom: dotted 0.3vmin rgba(255, 0, 0, 0.5);
} }
body.hints:after { body.hints:after {
content: "↺↻"; content: "↺↻";
@ -20,19 +20,19 @@ body.hints:after {
right: 50%; right: 50%;
left: auto; left: auto;
overflow: visible; overflow: visible;
border-right: dashed 0.5vmin red; border-right: dotted 0.3vmin rgba(255, 0, 0, 0.5);
color: rgba(255, 0, 0, 0.5); color: rgba(255, 0, 0, 0.5);
font-size: 15vmin; font-size: 15vmin;
line-height: 70vmin; line-height: 70vh;
white-space: pre; white-space: pre;
letter-spacing: 50vmin; letter-spacing: 50vmin;
} }
.hints .simplesnake { .hints .simplesnake {
opacity: 0.3; opacity: 0.2;
} }
.hints .simplesnake:before, .hints .title:before,
.hints .simplesnake:after { .hints .title:after {
position: absolute; position: absolute;
display: block; display: block;
text-align: center; text-align: center;
@ -41,14 +41,51 @@ body.hints:after {
font-size: 5vh; font-size: 5vh;
line-height: 10vh; line-height: 10vh;
z-index: 100; z-index: 100;
opacity: 0.6;
} }
.hints .simplesnake:before { .hints .title:before {
content: "new level"; content: "New level";
} }
.hints .simplesnake:after { .hints .title:after {
bottom: 0; bottom: 0;
content: "pause"; content: "Pause game";
} }
.hints .title {
display: block;
}
.hints .title h1:after {
content: "Touch control hints...";
display: block;
position: relative;
font-size: 4vmin;
font-weight: normal;
font-style: italic;
text-shadow: 3pt 3pt 10pt rgba(0,0,0,0.2);
opacity: 0.7;
}
.title {
display: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
z-index: 500;
color: rgba(255,0,0,0.7);
}
.title h1 {
position: relative;
display: block;
top: 50%;
font-size: 10vmin;
margin-top: -22vmin;
font-weight: bolder;
text-shadow: 3pt 3pt 15pt rgba(0,0,0,0.2);
}
body { body {

2
simplesnake/simplesnake.html
View File

@ -12,6 +12,8 @@
</head> </head>
<body onload="setup()" onclick="clearHints()" class="hints"> <body onload="setup()" onclick="clearHints()" class="hints">
<div class="title"> <h1>SimpleSnake</h1> </div>
<div class="simplesnake"> </div> <div class="simplesnake"> </div>
</body> </body>