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

Snake game first step

Browse Source
This commit is contained in:
Pawel 2017-12-19 11:27:17 +01:00
parent 1079ce011c
commit 7c58cc32a8
5 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
css/snake.css Normal file
View File

@ -0,0 +1,27 @@
*{
padding: 0;
margin: 0;
1 rem = 16px;
}
body{
background-color:#000;
}
.blank{
background-color:blank;
}
#snake{
position: absolute;
width: 1rem;
height: 1rem;
background-color:white;
}
.wall{
background-color:green;
}
#fruit{
position: absolute;
width : 1rem;
height: 1rem;
background-color:red;
}

2
index.html
View File

@ -22,7 +22,7 @@
Wejdz, zagraj i zdobądź dodatkowe punkty z przedmiotu
</p>
</div>
<a href="page1.html" class="active">
<a href="snake.html" class="active">
<div id="police-building" class="building"><img src="img/006-police.png"></div>
</a>
<a href="page1.html" class="active">

33
js/snake.js Normal file
View File

@ -0,0 +1,33 @@
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
var snake = $("#snake");
var fruit = $("#fruit");
function drawFruit(){
var xFruit = Math.floor((Math.random()*10) +1);
var yFruit = Math.floor((Math.random()*10) +1);
var positionFruit = [xFruit,yFruit];
return positionFruit;
}
function startGame(){
var myVar = setInterval(moveSnake(),1000);
}
function moveSnake(){
snake.css({
'left' : "+=1rem",
})
}
}
newPositionFruit = drawFruit();
fruit.css({
'left': newPositionFruit[0] + 'rem',
'top': newPositionFruit[1] + 'rem',
})
moveSnake();
})

17
page1.html
View File

@ -1,17 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
</head>
<body>
</body>
</html>

20
snake.html Normal file
View File

@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/snake.css">
</head>
<body>
<div id="snake"></div>
<div id="fruit"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/snake.js"></script>
</body>
</html>