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);
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: headersFont;
|
font-family: headersFont;
|
||||||
font-size: 80px;
|
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-pupil-right").attr('id','char-pupil-right-move');
|
||||||
$("#char-arm-left").attr('id','char-arm-left-up');
|
$("#char-arm-left").attr('id','char-arm-left-up');
|
||||||
$("#char-arm-right").attr('id','char-arm-right-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){
|
if(e.which == 38){
|
||||||
$("#char-arm-left-up").attr('id','char-arm-left');
|
$("#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');
|
$("#char-arm-right").attr('id','char-arm-right-up');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
$('div#police-building').mouseover(function(e){
|
//if($('#char-container').
|
||||||
$('#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',
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
267
js/snake.js
267
js/snake.js
@ -1,74 +1,209 @@
|
|||||||
$(document).ready(function() {
|
$(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");
|
|
||||||
|
|
||||||
var positionFruit = fruit.position();
|
var canvas = $("#myCanvas")[0];
|
||||||
var positionSnake = snake.position();
|
var ctx = canvas.getContext("2d");
|
||||||
console.log(positionFruit.top);
|
var w = $("#myCanvas").width();
|
||||||
console.log(positionFruit.top);
|
var h = $("#myCanvas").height();
|
||||||
if(positionFruit.top == positionSnake.top
|
var cw = 15;
|
||||||
&& positionFruit.left == positionSnake.left){
|
var food;
|
||||||
snake.css({"width": '+=1rem'});
|
var snake;
|
||||||
drawFruit(setFruitCooridnates());
|
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(){
|
$('#popup_question').submit(function(e){
|
||||||
var dir = 'bottom';
|
var form = $(this).serializeArray();
|
||||||
setInterval(move = function() {
|
e.preventDefault();
|
||||||
var snake = $("#snake");
|
form = JSON.stringify(form);
|
||||||
var fruit = $("#fruit");
|
localStorage.setItem("new_question",form);
|
||||||
if(dir == 'top') {
|
|
||||||
snake.css({"top": '-=1em'});
|
});
|
||||||
eatFruit();
|
$('#add_question').click(function(){
|
||||||
}
|
var isHidden = localStorage.getItem('isHidden');
|
||||||
if(dir == 'bottom') {
|
if(isHidden === null){
|
||||||
snake.css({"top": '+=1em'});
|
isHidden = 'true';
|
||||||
eatFruit();
|
}
|
||||||
}
|
if(isHidden === 'true'){
|
||||||
if(dir == 'left') {
|
$('#popup_question').fadeIn();
|
||||||
snake.css({"left": '-=1em'});
|
localStorage.setItem('isHidden', 'false');
|
||||||
eatFruit();
|
}else if(isHidden === 'false'){
|
||||||
}
|
$('#popup_question').fadeOut();
|
||||||
if(dir == 'right') {
|
localStorage.setItem('isHidden', 'true');
|
||||||
snake.css({"left": '+=1em'});
|
}
|
||||||
eatFruit();
|
})
|
||||||
}
|
|
||||||
}, 150);
|
|
||||||
$(document).keydown(function(event){
|
$('#session').text(getSessionScore())
|
||||||
if(event.which == 38) {
|
|
||||||
dir = 'top';
|
function update() {
|
||||||
} else if(event.which == 37) {
|
if (d == "RIGHT")
|
||||||
dir = 'left';
|
snake.x = snake.x + 1;
|
||||||
} else if(event.which == 39) {
|
else if (d == "LEFT")
|
||||||
dir = 'right';
|
snake.x = snake.x - 1;
|
||||||
} else if(event.which == 40) {
|
else if (d == "UP")
|
||||||
dir = 'bottom';
|
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();
|
function showGameOver() {
|
||||||
eatFruit();
|
|
||||||
|
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>
|
||||||
<head>
|
<title> Snake Game </title>
|
||||||
<meta charset="utf-8">
|
<link rel="stylesheet" href="snake.css">
|
||||||
|
|
||||||
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="snake"></div>
|
<div id="container">
|
||||||
<div id="fruit"></div>
|
<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>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user