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

Add new functions to snakeGame

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-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 {

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>
<body>
<h1>PLAY &amp;&amp; LEARN</h1>
<h1>3DSTUDY</h1>
<div id="game-container"></div>
<!-- popup police -->
<div id="pop-up-police">

70
js/snake.js
View File

@ -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();
})