s434585/3Dstudy
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add new functions to snakeGame

Browse Source
This commit is contained in:
Paweł Kawczyński 2017-12-19 17:02:39 +01:00
parent 1ee29ac8cf
commit 814b8fdb41
6 changed files with 76 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/style.css
View File

@ -3,14 +3,21 @@
} }
@font-face { @font-face {
font-family: headersFont; font-family: popUpFont;
src: url(/fonts/monaco.ttf); src: url(/fonts/monaco.ttf);
} }
@font-face {
font-family: headersFont;
src: url(/fonts/Good_Morning.ttf);
}
/*-----------------------Character CSS high-resolution--------------------------------*/ /*-----------------------Character CSS high-resolution--------------------------------*/
html{
background-image: url(/img/background.png);
}
/* HOVER STYLES */ /* HOVER STYLES */
div#pop-up-police { div#pop-up-police {
display: none; display: none;
@ -19,7 +26,7 @@ div#pop-up-police {
width: 90%; width: 90%;
max-width: 15rem; max-width: 15rem;
background: #FFF; background: #FFF;
font-family: headersFont; font-family: popUpFont;
border-radius: .25em .25em .4em .4em; border-radius: .25em .25em .4em .4em;
text-align: center; text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
@ -29,7 +36,7 @@ div#pop-up-police {
h1 { h1 {
font-family: headersFont; font-family: headersFont;
font-size: 80px; font-size: 80px;
color: lightblue; color: #CDDADE;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -51,32 +58,32 @@ html {
#station-building { #station-building {
position: absolute; position: absolute;
top: 35rem; top: 49rem;
left: 15rem; left: 17rem;
} }
#police-building { #police-building {
position: absolute; position: absolute;
top: 15rem; top: 22rem;
left: 30rem; left: 17rem;
} }
#cinema-building { #cinema-building {
position: absolute; position: absolute;
top: 12rem; top: 19rem;
left: 57rem; left: 54.5rem;
} }
#burguer-building { #burguer-building {
position: absolute; position: absolute;
top: 15rem; top: 22rem;
left: 80rem; left: 91rem;
} }
#club-building { #club-building {
position: absolute; position: absolute;
top: 35rem; top: 50rem;
left: 95rem; left: 89rem;
} }
.building { .building {

BIN
fonts/Good_Morning.ttf Normal file
View File

Binary file not shown.

BIN
fonts/good_morning_2.zip Normal file
View File

Binary file not shown.

BIN
img/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

2
index.html
View File

@ -13,7 +13,7 @@
</head> </head>
<body> <body>
<h1>PLAY &amp;&amp; LEARN</h1> <h1>3DSTUDY</h1>
<div id="game-container"></div> <div id="game-container"></div>
<!-- popup police --> <!-- popup police -->
<div id="pop-up-police"> <div id="pop-up-police">

70
js/snake.js
View File

@ -1,32 +1,72 @@
$(document).ready(function() { $(document).ready(function() {
console.log("ready"); console.log("ready");
var snake = $("#snake");
var fruit = $("#fruit"); var fruit = $("#fruit");
function setFruitCooridnates(){
function drawFruit(){
var xFruit = Math.floor((Math.random()*10)+1)*4; var xFruit = Math.floor((Math.random()*10)+1)*4;
var yFruit = Math.floor((Math.random()*10)+1)*4; var yFruit = Math.floor((Math.random()*10)+1)*4;
var positionFruit = [xFruit,yFruit]; var positionFruit = [xFruit,yFruit];
return positionFruit; return positionFruit;
} }
function moveSnake(){
snake.css({ function drawFruit(newPositionFruit){
'left' : "+=1rem", 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(){ 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();
startGame(); eatFruit();
}
var newPositionFruit = drawFruit();
fruit.css({
'left': newPositionFruit[0] + 'rem',
'top': newPositionFruit[1] + 'rem',
})
// moveSnake(); // moveSnake();
}) })