flynx/Course-JavaScript
1
0
Fork 0
mirror of https://github.com/flynx/Course-JavaScript.git synced 2025-10-29 19:10:09 +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
# Timestamp: 20170421235203
# Timestamp: 20170423153313
CACHE:
simplesnake.html

59
simplesnake/simplesnake.css
View File

@ -11,8 +11,8 @@ body.hints:after {
body.hints:before {
content: "";
width: 100%;
border-top: dashed 0.5vmin red;
border-bottom: dashed 0.5vmin red;
border-top: dotted 0.3vmin rgba(255, 0, 0, 0.5);
border-bottom: dotted 0.3vmin rgba(255, 0, 0, 0.5);
}
body.hints:after {
content: "↺↻";
@ -20,19 +20,19 @@ body.hints:after {
right: 50%;
left: auto;
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);
font-size: 15vmin;
line-height: 70vmin;
line-height: 70vh;
white-space: pre;
letter-spacing: 50vmin;
}
.hints .simplesnake {
opacity: 0.3;
opacity: 0.2;
}
.hints .simplesnake:before,
.hints .simplesnake:after {
.hints .title:before,
.hints .title:after {
position: absolute;
display: block;
text-align: center;
@ -41,14 +41,51 @@ body.hints:after {
font-size: 5vh;
line-height: 10vh;
z-index: 100;
opacity: 0.6;
}
.hints .simplesnake:before {
content: "new level";
.hints .title:before {
content: "New level";
}
.hints .simplesnake:after {
.hints .title:after {
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 {

2
simplesnake/simplesnake.html
View File

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