208 lines
4.6 KiB
HTML
208 lines
4.6 KiB
HTML
|
<!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>
|