flynx/Course-JavaScript
1
0
Fork 0
mirror of https://github.com/flynx/Course-JavaScript.git synced 2025-10-29 02:50:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added hints...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-04-12 23:24:22 +03:00
parent 80571184ad
commit 97454ee0f2
1 changed files with 74 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
jsssnake/simplesnake.html
View File

@ -2,6 +2,60 @@
<html> <html>
<style> <style>
body.hints:before,
body.hints:after {
display: block;
position: absolute;
left: 0;
top: 12.5%;
bottom: 12.5%;
z-index: 100;
}
body.hints:before {
content: "";
width: 100%;
border-top: dashed 3pt red;
border-bottom: dashed 3pt red;
}
body.hints:after {
content: "↺↻";
width: 37vmin;
right: 50%;
left: auto;
overflow: visible;
border-right: dashed 3pt red;
color: red;
font-size: 100pt;
line-height: 70vmin;
white-space: pre;
letter-spacing: 50vmin;
}
.hints .simplesnake {
opacity: 0.3;
}
.hints .simplesnake:before,
.hints .simplesnake:after {
position: absolute;
display: block;
text-align: center;
width: 100vmax;
color: red;
font-size: 30pt;
z-index: 100;
}
.hints .simplesnake:before {
content: "new level";
}
.hints .simplesnake:after {
content: "pause";
}
body {
font-family: sans-serif;
overflow: hidden;
}
.simplesnake .field { .simplesnake .field {
position: relative; position: relative;
left: 50%; left: 50%;
@ -307,23 +361,27 @@ var KEY_CONFIG = {
} }
function makeKeyboardHandler(snake){ function makeKeyboardHandler(snake){
return function(event){ return function(event){
//console.log('KEY:', event.key) clearHints()
var action = KEY_CONFIG[event.key] var action = KEY_CONFIG[event.key]
action action
&& action[0] in snake && action[0] in snake
&& snake[action[0]].apply(snake, action.slice(1)) }} && snake[action[0]].apply(snake, action.slice(1)) }}
function makeTapHandler(snake){ function makeTapHandler(snake){
return function(event){ return function(event){
// top of screen... clearHints()
(event.clientY || event.changedTouches[0].pageY) <= (document.body.clientHeight / 8) ? // top of screen (1/8)...
setup() ;(event.clientY || event.changedTouches[0].pageY) <= (document.body.clientHeight / 8) ?
// bottom of screen... setup()
: (event.clientY || event.changedTouches[0].pageY) >= (document.body.clientHeight / 5)*4 ? // bottom of screen 1/8...
Snake.pause() : (event.clientY || event.changedTouches[0].pageY) >= (document.body.clientHeight / 8)*8 ?
// left/right of screen... Snake.pause()
: (event.clientX || event.changedTouches[0].pageX) <= (document.body.clientWidth / 2) ? // left/right of screen...
Snake.left() : (event.clientX || event.changedTouches[0].pageX) <= (document.body.clientWidth / 2) ?
: Snake.right() }} Snake.left()
: Snake.right() }}
function clearHints(){
document.body.classList.contains('hints')
&& document.body.classList.remove('hints') }
//--------------------------------------------------------------------- //---------------------------------------------------------------------
@ -367,7 +425,7 @@ function setup(snake, timer, size){
<head> <title>Simple Snake</title> </head> <head> <title>Simple Snake</title> </head>
<body onload="setup()"> <body onload="setup()" onclick="clearHints()" class="hints">
<div class="simplesnake"> </div> <div class="simplesnake"> </div>