diff --git a/css/style.css b/css/style.css
index ba5b259..f9d3f99 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,14 +3,21 @@
}
@font-face {
- font-family: headersFont;
+ font-family: popUpFont;
src: url(/fonts/monaco.ttf);
}
+@font-face {
+ font-family: headersFont;
+ src: url(/fonts/Good_Morning.ttf);
+}
/*-----------------------Character CSS high-resolution--------------------------------*/
+html{
+ background-image: url(/img/background.png);
+}
/* HOVER STYLES */
div#pop-up-police {
display: none;
@@ -19,7 +26,7 @@ div#pop-up-police {
width: 90%;
max-width: 15rem;
background: #FFF;
- font-family: headersFont;
+ font-family: popUpFont;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
@@ -29,7 +36,7 @@ div#pop-up-police {
h1 {
font-family: headersFont;
font-size: 80px;
- color: lightblue;
+ color: #CDDADE;
display: flex;
align-items: center;
justify-content: center;
@@ -51,32 +58,32 @@ html {
#station-building {
position: absolute;
- top: 35rem;
- left: 15rem;
+ top: 49rem;
+ left: 17rem;
}
#police-building {
position: absolute;
- top: 15rem;
- left: 30rem;
+ top: 22rem;
+ left: 17rem;
}
#cinema-building {
position: absolute;
- top: 12rem;
- left: 57rem;
+ top: 19rem;
+ left: 54.5rem;
}
#burguer-building {
position: absolute;
- top: 15rem;
- left: 80rem;
+ top: 22rem;
+ left: 91rem;
}
#club-building {
position: absolute;
- top: 35rem;
- left: 95rem;
+ top: 50rem;
+ left: 89rem;
}
.building {
diff --git a/fonts/Good_Morning.ttf b/fonts/Good_Morning.ttf
new file mode 100644
index 0000000..f4998a3
Binary files /dev/null and b/fonts/Good_Morning.ttf differ
diff --git a/fonts/good_morning_2.zip b/fonts/good_morning_2.zip
new file mode 100644
index 0000000..0493aa4
Binary files /dev/null and b/fonts/good_morning_2.zip differ
diff --git a/img/background.png b/img/background.png
new file mode 100644
index 0000000..a5494b9
Binary files /dev/null and b/img/background.png differ
diff --git a/index.html b/index.html
index d9ad460..c30651d 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
- PLAY && LEARN
+ 3DSTUDY
diff --git a/js/snake.js b/js/snake.js
index cf7edfa..de0adf8 100644
--- a/js/snake.js
+++ b/js/snake.js
@@ -1,32 +1,72 @@
$(document).ready(function() {
console.log("ready");
- var snake = $("#snake");
var fruit = $("#fruit");
-
- function drawFruit(){
+ function setFruitCooridnates(){
var xFruit = Math.floor((Math.random()*10)+1)*4;
var yFruit = Math.floor((Math.random()*10)+1)*4;
var positionFruit = [xFruit,yFruit];
return positionFruit;
}
- function moveSnake(){
- snake.css({
- 'left' : "+=1rem",
+
+ function drawFruit(newPositionFruit){
+ fruit.css({
+ 'left': newPositionFruit[0] + 'rem',
+ 'top': newPositionFruit[1] + 'rem',
})
}
+ function eatFruit(){
+ var snake = $("#snake");
+ var fruit = $("#fruit");
+
+ var positionFruit = fruit.position();
+ var positionSnake = snake.position();
+ console.log(positionFruit.top);
+ console.log(positionFruit.top);
+ if(positionFruit.top == positionSnake.top
+ && positionFruit.left == positionSnake.left){
+ snake.css({"width": '+=1rem'});
+ drawFruit(setFruitCooridnates());
+ }
+ }
function startGame(){
- var myVar = setInterval(moveSnake(),3000);
+ var dir = 'bottom';
+ setInterval(move = function() {
+ var snake = $("#snake");
+ var fruit = $("#fruit");
+ if(dir == 'top') {
+ snake.css({"top": '-=1em'});
+ eatFruit();
+ }
+ if(dir == 'bottom') {
+ snake.css({"top": '+=1em'});
+ eatFruit();
+ }
+ if(dir == 'left') {
+ snake.css({"left": '-=1em'});
+ eatFruit();
+ }
+ if(dir == 'right') {
+ snake.css({"left": '+=1em'});
+ eatFruit();
+ }
+ }, 150);
+ $(document).keydown(function(event){
+ if(event.which == 38) {
+ dir = 'top';
+ } else if(event.which == 37) {
+ dir = 'left';
+ } else if(event.which == 39) {
+ dir = 'right';
+ } else if(event.which == 40) {
+ dir = 'bottom';
+ };
+ });
}
- for(var i = 0; i !==5; i++){
- startGame();
- }
- var newPositionFruit = drawFruit();
+ startGame();
+ eatFruit();
+
- fruit.css({
- 'left': newPositionFruit[0] + 'rem',
- 'top': newPositionFruit[1] + 'rem',
- })
// moveSnake();
})