Add test_question to project
This commit is contained in:
parent
67ae7af771
commit
4b367091d5
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@ -38,7 +38,6 @@ div#pop-up-police {
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-family: headersFont;
|
||||
font-size: 80px;
|
||||
|
||||
49
js/script — kopia.txt
Normal file
49
js/script — kopia.txt
Normal file
@ -0,0 +1,49 @@
|
||||
$(document).ready(function() {
|
||||
console.log("ready");
|
||||
$(document).on('keydown', function(e){
|
||||
if(e.which == 37){
|
||||
$("#move-left").attr('id','char-pants-left');
|
||||
$("#char-arm-left-up").attr('id','char-arm-left');
|
||||
$("#char-arm-right-up").attr('id','char-arm-right');
|
||||
$("#char-container").css({
|
||||
'left': '-=2rem',
|
||||
})
|
||||
$("#char-pants-left").attr('id','move-left');
|
||||
$("#char-pupil-left").attr('id','char-pupil-left-move');
|
||||
$("#char-pupil-right").attr('id','char-pupil-right-move');
|
||||
$("#char-arm-left").attr('id','char-arm-left-up');
|
||||
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||
}
|
||||
if(e.which == 38){
|
||||
$("#char-arm-left-up").attr('id','char-arm-left');
|
||||
$("#char-arm-right-up").attr('id','char-arm-right');
|
||||
$("#char-container").css({
|
||||
'top': '-=2rem',
|
||||
})
|
||||
$("#char-arm-left").attr('id','char-arm-left-up');
|
||||
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||
}
|
||||
if(e.which == 39){
|
||||
$("#move-right").attr('id','char-pants-right');
|
||||
$("#char-arm-left-up").attr('id','char-arm-left');
|
||||
$("#char-arm-right-up").attr('id','char-arm-right');
|
||||
$("#char-container").css({
|
||||
'left': '+=2rem',
|
||||
})
|
||||
$("#char-pants-right").attr('id','move-right');
|
||||
$("#char-pupil-left-move").attr('id','char-pupil-left');
|
||||
$("#char-pupil-right-move").attr('id','char-pupil-right');
|
||||
$("#char-arm-left").attr('id','char-arm-left-up');
|
||||
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||
}
|
||||
if(e.which == 40){
|
||||
$("#char-arm-left-up").attr('id','char-arm-left');
|
||||
$("#char-arm-right-up").attr('id','char-arm-right');
|
||||
$("#char-container").css({
|
||||
'top': '+=2rem',
|
||||
})
|
||||
$("#char-arm-left").attr('id','char-arm-left-up');
|
||||
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||
}
|
||||
})
|
||||
});
|
||||
34
js/script.js
34
js/script.js
@ -13,25 +13,6 @@ $(document).ready(function() {
|
||||
$("#char-pupil-right").attr('id','char-pupil-right-move');
|
||||
$("#char-arm-left").attr('id','char-arm-left-up');
|
||||
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||
var positionCharXCornerLeft = $('#char-container').offset().left;
|
||||
var positionCharYCornerLeft = $('#char-container').offset().top;
|
||||
var positionCharXRightCorner = $('#char-container').offset().left + $('#char-container').innerWidth();
|
||||
var positionCharYRightCorner = $('#char-container').offset().top + $('#char-container').innerHeight();
|
||||
|
||||
//https://stackoverflow.com/questions/8872578/if-element-is-over-another-element
|
||||
//uproscic kod(funkcje/zmienne);
|
||||
var positionXPoliceBuildingCornerLeft = $('#police-building').offset().left;
|
||||
var positionYPoliceBuildingCornerLeft = $('#police-building').offset().top;
|
||||
var positionXPoliceBuildingCornerRight = $('#police-building').offset().left + $('#police-building').innerWidth();
|
||||
var positionYPoliceBuildingCornerRight = $('#police-building').offset().top + $('#police-building').innerHeight();
|
||||
|
||||
if(positionXPoliceBuildingCornerRight>positionCharXCornerLeft && positionYPoliceBuildingCornerRight>positionCharYCornerLeft &&
|
||||
positionXPoliceBuildingCornerLeft<positionCharXRightCorner &&
|
||||
positionYPoliceBuildingCornerLeft<positionCharYRightCorner){
|
||||
console.log('jestem na policji');
|
||||
$('#police-building').parent().attr('class', 'active');
|
||||
}
|
||||
//tutaj koniec upraszczania kodu
|
||||
}
|
||||
if(e.which == 38){
|
||||
$("#char-arm-left-up").attr('id','char-arm-left');
|
||||
@ -65,18 +46,5 @@ $(document).ready(function() {
|
||||
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||
}
|
||||
})
|
||||
$('div#police-building').mouseover(function(e){
|
||||
$('#pop-up-police').css({
|
||||
'display' : 'inline',
|
||||
'visibility' : 'visible',
|
||||
left: e.pageX + 1,
|
||||
top: e.pageY + 1,
|
||||
'z-index' : '2',
|
||||
})
|
||||
}).mouseout(function(){
|
||||
$('#pop-up-police').css({
|
||||
'visibility' : 'hidden',
|
||||
})
|
||||
|
||||
})
|
||||
//if($('#char-container').
|
||||
});
|
||||
267
js/snake.js
267
js/snake.js
@ -1,74 +1,209 @@
|
||||
$(document).ready(function() {
|
||||
console.log("ready");
|
||||
var fruit = $("#fruit");
|
||||
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 drawFruit(newPositionFruit){
|
||||
fruit.css({
|
||||
'left': newPositionFruit[0] + 'rem',
|
||||
'top': newPositionFruit[1] + 'rem',
|
||||
})
|
||||
}
|
||||
function eatFruit(){
|
||||
var snake = $("#snake");
|
||||
var fruit = $("#fruit");
|
||||
$(document).ready(function () {
|
||||
|
||||
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());
|
||||
var canvas = $("#myCanvas")[0];
|
||||
var ctx = canvas.getContext("2d");
|
||||
var w = $("#myCanvas").width();
|
||||
var h = $("#myCanvas").height();
|
||||
var cw = 15;
|
||||
var food;
|
||||
var snake;
|
||||
var d = "RIGHT";
|
||||
var gameloop;
|
||||
|
||||
function start(gameloop){
|
||||
gameloop = setInterval(update, 100);
|
||||
return gameloop
|
||||
}
|
||||
function reset() {
|
||||
window.location.reload()
|
||||
}
|
||||
function stop(gameloop){
|
||||
clearInterval(gameloop);
|
||||
}
|
||||
|
||||
function getSessionScore(){
|
||||
var sessionScore = localStorage.getItem("session_score");
|
||||
return sessionScore;
|
||||
}
|
||||
function getCurrentScore(){
|
||||
var currentScore = localStorage.getItem("current");
|
||||
return currentScore;
|
||||
}
|
||||
function setSessionScore(score){
|
||||
localStorage.setItem("session_score", score);
|
||||
}
|
||||
function setCurrentScore(score){
|
||||
localStorage.setItem("current", score);
|
||||
}
|
||||
function checkScore(score){
|
||||
var session = getSessionScore();
|
||||
var current = getCurrentScore();
|
||||
if(current === null){
|
||||
setCurrentScore(score);
|
||||
setSessionScore(score);
|
||||
}
|
||||
if (session < score){
|
||||
current = 0;
|
||||
setCurrentScore(score);
|
||||
setSessionScore(score);
|
||||
}
|
||||
}
|
||||
function startGame(){
|
||||
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';
|
||||
};
|
||||
});
|
||||
$('#popup_question').submit(function(e){
|
||||
var form = $(this).serializeArray();
|
||||
e.preventDefault();
|
||||
form = JSON.stringify(form);
|
||||
localStorage.setItem("new_question",form);
|
||||
|
||||
});
|
||||
$('#add_question').click(function(){
|
||||
var isHidden = localStorage.getItem('isHidden');
|
||||
if(isHidden === null){
|
||||
isHidden = 'true';
|
||||
}
|
||||
if(isHidden === 'true'){
|
||||
$('#popup_question').fadeIn();
|
||||
localStorage.setItem('isHidden', 'false');
|
||||
}else if(isHidden === 'false'){
|
||||
$('#popup_question').fadeOut();
|
||||
localStorage.setItem('isHidden', 'true');
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
$('#session').text(getSessionScore())
|
||||
|
||||
function update() {
|
||||
if (d == "RIGHT")
|
||||
snake.x = snake.x + 1;
|
||||
else if (d == "LEFT")
|
||||
snake.x = snake.x - 1;
|
||||
else if (d == "UP")
|
||||
snake.y = snake.y - 1;
|
||||
else if (d == "DOWN")
|
||||
snake.y = snake.y + 1;
|
||||
|
||||
check_borders();
|
||||
check_food();
|
||||
blank();
|
||||
paint_cell(food.x, food.y, "grey");
|
||||
paint_cell(snake.x, snake.y, "green");
|
||||
}
|
||||
|
||||
startGame();
|
||||
eatFruit();
|
||||
|
||||
|
||||
function showGameOver() {
|
||||
|
||||
var current = $('#current').text();
|
||||
$('#final').text(current);
|
||||
$('#popup').fadeIn();
|
||||
$('#yes').click(function () {
|
||||
if ($('#yes').is(':checked')) {
|
||||
$('#correct').fadeIn('slow');
|
||||
$('#session').text(getSessionScore());
|
||||
$('#no').attr('disabled','disabled');
|
||||
}
|
||||
});
|
||||
$('#no').click(function(){
|
||||
if($('#no').is(':checked')){
|
||||
$('#incorrect').fadeIn('slow');
|
||||
$('#yes').attr('disabled','disabled');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function updateHighScore() {
|
||||
var current = $("#current").text();
|
||||
var highest = $("#highest").text();
|
||||
if (parseInt(current) > parseInt(highest)) {
|
||||
$('#highest').text(current)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function placeFood() {
|
||||
food = {
|
||||
x: Math.round(Math.random() * (w - cw) / cw),
|
||||
y: Math.round(Math.random() * (h - cw) / cw)
|
||||
}
|
||||
}
|
||||
|
||||
function placeSnake() {
|
||||
snake = {
|
||||
x: Math.round(Math.random() * (w - cw) / cw),
|
||||
y: Math.round(Math.random() * (h - cw) / cw)
|
||||
}
|
||||
}
|
||||
|
||||
function blank() {
|
||||
//Paint The Canvas
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
ctx.strokeStyle = "white";
|
||||
ctx.strokeRect(0, 0, w, h);
|
||||
|
||||
}
|
||||
|
||||
function check_borders() {
|
||||
if (snake.x < 0 || snake.x > (w - cw) / cw || snake.y < 0 || snake.y > (h - cw) / cw) {
|
||||
stop(gameloop);
|
||||
showGameOver();
|
||||
}
|
||||
}
|
||||
|
||||
function paint_cell(x, y, color) {
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x * cw, y * cw, cw, cw);
|
||||
ctx.strokeStyle = "white";
|
||||
ctx.strokeRect(x * cw, y * cw, cw, cw);
|
||||
}
|
||||
|
||||
function check_food() {
|
||||
if (food.x == snake.x && food.y == snake.y) {
|
||||
var current = parseInt($('#current').text());
|
||||
current += 1;
|
||||
$('#current').text(current);
|
||||
checkScore(current);
|
||||
placeFood();
|
||||
}
|
||||
|
||||
|
||||
// moveSnake();
|
||||
})
|
||||
}
|
||||
|
||||
gameloop = start();
|
||||
|
||||
placeFood();
|
||||
paint_cell(food.x, food.y, "grey");
|
||||
placeSnake();
|
||||
paint_cell(snake.x, snake.y, "green");
|
||||
|
||||
//Keyboard Controller
|
||||
$(document).keydown(function (e) {
|
||||
//39: RIGHT
|
||||
//37: LEFT
|
||||
//38: UP
|
||||
//40: DOWN
|
||||
var key = e.which;
|
||||
if (key == "37") {
|
||||
snake.x -= 1;
|
||||
d = "LEFT";
|
||||
} else if (key == "38") {
|
||||
snake.y -= 1;
|
||||
d = "UP";
|
||||
} else if (key == "39") {
|
||||
snake.x += 1;
|
||||
d = "RIGHT";
|
||||
} else if (key == "40") {
|
||||
snake.y += 1;
|
||||
d = "DOWN";
|
||||
} else if(key == "32"){
|
||||
reset();
|
||||
}
|
||||
|
||||
check_food();
|
||||
blank();
|
||||
color = "grey";
|
||||
paint_cell(food.x, food.y);
|
||||
color = "green";
|
||||
paint_cell(snake.x, snake.y);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
16
package-lock.json
generated
Normal file
16
package-lock.json
generated
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
"get-form-data": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/get-form-data/-/get-form-data-2.0.0.tgz",
|
||||
"integrity": "sha512-YUpw0aTWeGliifqMYrTohe/YdqVmKLmaNwuscd2WlRNGfba57JHGuuvvv2c6LiZdFys285POVWANTh6SqcwFag=="
|
||||
},
|
||||
"local-storage-library": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/local-storage-library/-/local-storage-library-1.2.5.tgz",
|
||||
"integrity": "sha1-UtDZf8jD+ytC/bxMMLuNwd5IQHg="
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
przejsciowy/bg.png
Normal file
BIN
przejsciowy/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
przejsciowy/coin.png
Normal file
BIN
przejsciowy/coin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
przejsciowy/ghost1.png
Normal file
BIN
przejsciowy/ghost1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
przejsciowy/ghost2.png
Normal file
BIN
przejsciowy/ghost2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
207
przejsciowy/index.html
Normal file
207
przejsciowy/index.html
Normal file
@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>PacMan</title>
|
||||
<style>
|
||||
{
|
||||
/* outline: 1px dotted purple; */
|
||||
}
|
||||
|
||||
.wall {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url('wall.png');
|
||||
display: inline-block;
|
||||
}
|
||||
.coin {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url('coin.png');
|
||||
display: inline-block;
|
||||
}
|
||||
.ground {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url('bg.png');
|
||||
display: inline-block;
|
||||
}
|
||||
.ghost {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url('ghost1.png');
|
||||
display: inline-block;
|
||||
}
|
||||
.pacman {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url('pacman.png');
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div {
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
#popup{
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
height: 650px;
|
||||
width: 500px;
|
||||
left: 700px;
|
||||
top: 10px;
|
||||
background: rgb(231, 216, 174);
|
||||
text-align: center;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="popup">
|
||||
<h2>Uderzyłeś w ściane albo chciałeś zjeść duszka!</h2>
|
||||
<h4>Musisz odpowiedzieć na pytanie z wykładu</h4>
|
||||
<p>Czy lubisz jabłka?</p>
|
||||
<input id="yes" type="radio" name="yes_no" value="tak">a) Tak</input><br>
|
||||
<input id="no" type="radio" name="yes_no" value="nie">b) Nie</input><br>
|
||||
<a onClick="window.location.reload()" href="#">Click To Play Again</a>
|
||||
</div>
|
||||
<div id='world'>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script>
|
||||
// All of our JavaScript code goes here...
|
||||
|
||||
// 1 => <div class='wall'></div>
|
||||
// 2 => <div class='coin'></div>
|
||||
// 3 => <div class='ground'></div>
|
||||
// 4 => <div class='ghost'></div>
|
||||
// 5 => <div class='pacman'></div>
|
||||
// map = [ 1, 2, 3 ]
|
||||
// map = [ [1,2,3], [1,2,3], [1,2,3] ];
|
||||
|
||||
pacman = {
|
||||
x: 6,
|
||||
y: 4
|
||||
}
|
||||
|
||||
map = [
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,2,2,4,2,2,1,2,2,2,4,2,1],
|
||||
[1,2,1,1,1,2,1,2,1,1,1,2,1],
|
||||
[1,2,1,2,2,2,2,2,2,2,1,2,1],
|
||||
[1,2,2,2,1,1,5,1,1,2,2,2,1],
|
||||
[1,2,1,2,2,2,2,2,2,2,1,2,1],
|
||||
[1,2,1,1,2,2,1,2,2,1,1,2,1],
|
||||
[1,2,2,2,2,2,1,2,2,2,2,2,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1]
|
||||
]
|
||||
|
||||
var el = document.getElementById('world');
|
||||
|
||||
function drawWorld(){
|
||||
el.innerHTML = '';
|
||||
for(var y = 0; y < map.length ; y = y + 1) {
|
||||
for(var x = 0; x < map[y].length ; x = x + 1) {
|
||||
if (map[y][x] === 1) {
|
||||
el.innerHTML += "<div class='wall'></div>";
|
||||
}
|
||||
else if (map[y][x] === 2) {
|
||||
el.innerHTML += "<div class='coin'></div>";
|
||||
}
|
||||
else if (map[y][x] === 3) {
|
||||
el.innerHTML += "<div class='ground'></div>";
|
||||
}
|
||||
else if (map[y][x] === 4) {
|
||||
el.innerHTML += "<div class='ghost'></div>";
|
||||
}
|
||||
else if (map[y][x] === 5) {
|
||||
el.innerHTML += "<div class='pacman'></div>";
|
||||
}
|
||||
}
|
||||
el.innerHTML += "<br>";
|
||||
}
|
||||
}
|
||||
|
||||
drawWorld();
|
||||
|
||||
document.onkeydown = function(event){
|
||||
// console.log(event);
|
||||
if (event.keyCode === 37){ // PACMAN MOVE LEFT
|
||||
if ( map[pacman.y][pacman.x-1] !== 1 && map[pacman.y][pacman.x-1] !== 4){
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
pacman.x = pacman.x - 1;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
drawWorld();
|
||||
}
|
||||
else{
|
||||
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
$('div#popup').css({
|
||||
'display': 'inline-block',
|
||||
'visibility': 'visible',
|
||||
})
|
||||
console.log('trafilem na ghosta albo sciane');
|
||||
drawWorld();
|
||||
}
|
||||
}
|
||||
else if (event.keyCode === 38){ // PACMAN MOVE UP
|
||||
if ( map[pacman.y-1][pacman.x] !== 1){
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
pacman.y = pacman.y - 1;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
drawWorld();
|
||||
}
|
||||
else{
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
console.log('trafilem na ghosta albo sciane');
|
||||
drawWorld();
|
||||
}
|
||||
}
|
||||
else if (event.keyCode === 39){ // PACMAN MOVE RIGHT
|
||||
if ( map[pacman.y][pacman.x+1] !== 1){
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
pacman.x = pacman.x + 1;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
drawWorld();
|
||||
}
|
||||
else{
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
console.log('trafilem na ghosta albo sciane');
|
||||
drawWorld();
|
||||
}
|
||||
}
|
||||
else if (event.keyCode === 40){ // PACMAN MOVE DOWN
|
||||
if ( map[pacman.y+1][pacman.x] !== 1){
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
pacman.y = pacman.y + 1;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
drawWorld();
|
||||
}
|
||||
else{
|
||||
map[pacman.y][pacman.x] = 3;
|
||||
map[pacman.y][pacman.x] = 5;
|
||||
console.log('trafilem na ghosta albo sciane');
|
||||
drawWorld();
|
||||
}
|
||||
}
|
||||
//console.log(map)
|
||||
}
|
||||
function showPopUp(){
|
||||
|
||||
}
|
||||
// function checkIfGhost() {
|
||||
// if (map[pacman.y][pacman.x] == 4){
|
||||
// console.log("trafilem na ghosta");
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
</html>
|
||||
BIN
przejsciowy/pacman.png
Normal file
BIN
przejsciowy/pacman.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
55
przejsciowy/snake.css
Normal file
55
przejsciowy/snake.css
Normal file
@ -0,0 +1,55 @@
|
||||
body {
|
||||
background-color: rgb(226, 238, 159);
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#myCanvas {
|
||||
background-color: #000000;
|
||||
border: 3px red solid;
|
||||
|
||||
}
|
||||
|
||||
#popup {
|
||||
position : absolute;
|
||||
top: 150px;
|
||||
left: 300px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: rgb(100, 219, 223);
|
||||
display: none;
|
||||
}
|
||||
#continue_game{
|
||||
display: none;
|
||||
}
|
||||
#correct{
|
||||
display: none;
|
||||
}
|
||||
#incorrect{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#score {
|
||||
width: 600px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
#current, #highest {
|
||||
font-size : 25px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color : #FFFFFF;
|
||||
}
|
||||
|
||||
span {
|
||||
color : #FFFFFF;
|
||||
}
|
||||
42
przejsciowy/snake.html
Normal file
42
przejsciowy/snake.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title> Snake Game </title>
|
||||
<link rel="stylesheet" href="snake.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="popup">
|
||||
Odpowiedz na pytanie!
|
||||
<br>
|
||||
<p>Czy lubisz jabłka?</p>
|
||||
<input id="yes" type="radio" value="yes" name="yes_no">Tak<br>
|
||||
<input id="no" type="radio" value="no" name="yes_no">No<br>
|
||||
<a type="submit" value="submit">
|
||||
<span id="correct">To jest dobra odpowiedz,<br> mozesz grac dalej!</span><br>
|
||||
<button id="continue_game">Ruszaj dalej!</button>
|
||||
<span id="incorrect">To jest zla odpowiedz!Przegraleś!<br>
|
||||
Twoj wynik to: <span id="final"></span>
|
||||
</span>
|
||||
|
||||
<br>
|
||||
<a id="#restart" onClick="window.location.reload()" href="#">Click To Play Again</a>
|
||||
</div>
|
||||
<canvas id="myCanvas" width="600" height="450">
|
||||
Your browser does not support the canvas feature
|
||||
</canvas>
|
||||
<div id="score">
|
||||
<div>Current Score:<span id="current">0</span>
|
||||
</div>
|
||||
<div>High Score:<span id="highest">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
|
||||
<!-- Main JS -->
|
||||
<script src="snake.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
143
przejsciowy/snake.js
Normal file
143
przejsciowy/snake.js
Normal file
@ -0,0 +1,143 @@
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var canvas = $("#myCanvas")[0];
|
||||
var ctx = canvas.getContext("2d");
|
||||
var w = $("#myCanvas").width();
|
||||
var h = $("#myCanvas").height();
|
||||
var cw = 15;
|
||||
var food;
|
||||
var snake;
|
||||
var d = "RIGHT";
|
||||
|
||||
var gameloop = setInterval(update, 100);
|
||||
|
||||
function update() {
|
||||
if (d == "RIGHT")
|
||||
snake.x = snake.x + 1;
|
||||
else if (d == "LEFT")
|
||||
snake.x = snake.x - 1;
|
||||
else if (d == "UP")
|
||||
snake.y = snake.y - 1;
|
||||
else if (d == "DOWN")
|
||||
snake.y = snake.y + 1;
|
||||
|
||||
check_borders();
|
||||
check_food();
|
||||
blank();
|
||||
paint_cell(food.x, food.y, "grey");
|
||||
paint_cell(snake.x, snake.y, "green");
|
||||
}
|
||||
|
||||
function showGameOver() {
|
||||
|
||||
var current = $('#current').text();
|
||||
$('#final').text(current);
|
||||
$('#popup').fadeIn();
|
||||
$('#yes').click(function() {
|
||||
if($('#yes').is(':checked')){
|
||||
$('#correct').fadeIn('slow');
|
||||
}
|
||||
else{
|
||||
$('#incorrect').fadeIn();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function updateHighScore() {
|
||||
var current = $("#current").text();
|
||||
var highest = $("#highest").text();
|
||||
if (parseInt(current) > parseInt(highest)) {
|
||||
$('#highest').text(current)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function placeFood() {
|
||||
food = {
|
||||
x : Math.round(Math.random()*(w-cw)/cw),
|
||||
y : Math.round(Math.random()*(h-cw)/cw)
|
||||
}
|
||||
}
|
||||
|
||||
function placeSnake() {
|
||||
snake = {
|
||||
x : Math.round(Math.random()*(w-cw)/cw),
|
||||
y : Math.round(Math.random()*(h-cw)/cw)
|
||||
}
|
||||
}
|
||||
|
||||
function blank(){
|
||||
//Paint The Canvas
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
ctx.strokeStyle = "white";
|
||||
ctx.strokeRect(0, 0, w, h);
|
||||
|
||||
}
|
||||
|
||||
function check_borders() {
|
||||
if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {
|
||||
clearInterval(gameloop);
|
||||
showGameOver();
|
||||
}
|
||||
}
|
||||
|
||||
function paint_cell(x,y, color){
|
||||
ctx.fillStyle=color;
|
||||
ctx.fillRect(x*cw,y*cw,cw,cw);
|
||||
ctx.strokeStyle="white";
|
||||
ctx.strokeRect(x*cw,y*cw,cw,cw);
|
||||
}
|
||||
|
||||
function check_food() {
|
||||
if (food.x == snake.x && food.y == snake.y) {
|
||||
var current = parseInt($('#current').text());
|
||||
current += 1;
|
||||
$('#current').text(current);
|
||||
placeFood();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
placeFood();
|
||||
paint_cell(food.x, food.y, "grey");
|
||||
placeSnake();
|
||||
paint_cell(snake.x, snake.y, "green");
|
||||
|
||||
//Keyboard Controller
|
||||
$(document).keydown(function(e){
|
||||
//39: RIGHT
|
||||
//37: LEFT
|
||||
//38: UP
|
||||
//40: DOWN
|
||||
var key = e.which;
|
||||
if(key == "37") {
|
||||
snake.x -= 1;
|
||||
d = "LEFT";
|
||||
}
|
||||
else if(key == "38") {
|
||||
snake.y -= 1;
|
||||
d = "UP";
|
||||
}
|
||||
else if(key == "39") {
|
||||
snake.x += 1;
|
||||
d = "RIGHT";
|
||||
}
|
||||
else if(key == "40") {
|
||||
snake.y += 1;
|
||||
d = "DOWN";
|
||||
}
|
||||
|
||||
check_food();
|
||||
blank();
|
||||
color = "grey";
|
||||
paint_cell(food.x, food.y);
|
||||
color = "green";
|
||||
paint_cell(snake.x, snake.y);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
BIN
przejsciowy/wall.png
Normal file
BIN
przejsciowy/wall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
71
snake.css
Normal file
71
snake.css
Normal file
@ -0,0 +1,71 @@
|
||||
body {
|
||||
background-color: rgb(226, 238, 159);
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#myCanvas {
|
||||
background-color: #000000;
|
||||
border: 3px red solid;
|
||||
|
||||
}
|
||||
|
||||
#add_question {
|
||||
position : absolute;
|
||||
top: 100px;
|
||||
left: 1500px;
|
||||
}
|
||||
#popup {
|
||||
position : absolute;
|
||||
top: 150px;
|
||||
left: 300px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: rgb(100, 219, 223);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#popup_question {
|
||||
position : absolute;
|
||||
top: 150px;
|
||||
left: 1500px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: rgb(100, 219, 223);
|
||||
display: none;
|
||||
|
||||
}
|
||||
#continue_game{
|
||||
display: none;
|
||||
}
|
||||
#correct{
|
||||
display: none;
|
||||
}
|
||||
#incorrect{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#score {
|
||||
width: 600px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
#current, #highest, #session {
|
||||
font-size : 25px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color : #FFFFFF;
|
||||
}
|
||||
|
||||
span {
|
||||
color : #FFFFFF;
|
||||
}
|
||||
62
snake.html
62
snake.html
@ -1,20 +1,54 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
<title> Snake Game </title>
|
||||
<link rel="stylesheet" href="snake.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="snake"></div>
|
||||
<div id="fruit"></div>
|
||||
<div id="container">
|
||||
<button id="add_question">AddQuestion</button>
|
||||
<form id='popup_question'>
|
||||
<input type="text" name="question" placeholder="Podaj pytanie"><br>
|
||||
<input type="text" name="answer1"placeholder="Podaj odpowiedz 1"><br>
|
||||
<input type="text" name="answer2"placeholder="Podaj odpowiedz 2"><br>
|
||||
<input type="text" name="answer3"placeholder="Podaj odpowiedz 3"><br>
|
||||
<input type="text" name="answer4" placeholder="Podaj odpowiedz 4"><br>
|
||||
<button id="send_question" type="submit">Wyslij</button>
|
||||
</form>
|
||||
<div id="popup">
|
||||
Odpowiedz na pytanie!
|
||||
<br>
|
||||
<p>Czy lubisz jabłka?</p>
|
||||
<input id="yes" type="radio" value="yes" name="yes_no">Tak<br>
|
||||
<input id="no" type="radio" value="no" name="yes_no">No<br>
|
||||
<a type="submit" value="submit">
|
||||
<span id="correct">To jest dobra odpowiedz,<br> mozesz grac dalej!</span><br>
|
||||
<!-- <button id="continue_game">Ruszaj dalej!</button> -->
|
||||
<div id="incorrect">To jest zla odpowiedz!Przegraleś!<br>
|
||||
Twoj wynik to: <span id="final"></span>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<a id="#restart" onClick="window.location.reload()" href="#">Click To Play Again</a>
|
||||
</div>
|
||||
<canvas id="myCanvas" width="600" height="450">
|
||||
Your browser does not support the canvas feature
|
||||
</canvas>
|
||||
<div id="score">
|
||||
<div>Current Score:<span id="current">0</span>
|
||||
</div>
|
||||
<div>Session Score:<span id="session">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
|
||||
<!-- Main JS -->
|
||||
<script src="js/snake.js"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="js/snake.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user