Show sourcecode
The following files exists in this folder. Click to view.
webbserverprogrammering/GYA/js/
box.js
branch_box_1.js
branch_gate.js
branch_main_1.js
branch_main_2.js
branch_player_1.js
door.js
gate.js
global.js
imagesNSound_handler-Kits-Dator.js
imagesNSound_handler.js
main.js
player.js
pressure_plate.js
rolling_stone.js
world.js
main.js
347 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
// Offscreen-buffer för scenen
let bufferCanvas = document.createElement("canvas");
let buffer = bufferCanvas.getContext("2d");
bufferCanvas.width = canvas.canvas.width;
bufferCanvas.height = canvas.canvas.height;
// Stäng av bildutjämning för skarp pixelart i början av spelet
buffer.imageSmoothingEnabled = false;
canvas.imageSmoothingEnabled = false;
// Tangenthantering
document.addEventListener("keydown", function(e) {
keysDown[e.key.toLowerCase()] = true;
updateDirection();
if (e.keyCode == 32 || e.keyCode == 69 || e.keyCode == 70) {
playerAtGate();
}
});
document.addEventListener("keyup", function(e) {
delete keysDown[e.key.toLowerCase()];
updateDirection();
});
for (let y = 0; y < world[level].length; y++) {
for (let x = 0; x < world[level][y].length; x++) {
if (world[level][y][x] == 1) {
stones.push({
// Stenens atribut
x : tile_size * x,
y : tile_size * y,
width : tile_size,
height : tile_size,
color : "gray"
})
}
else if (world[level][y][x] == 2) {
bushes.push({
// Buskens atribut
x : tile_size * x,
y : tile_size * y,
width : tile_size,
height : tile_size,
color : "green"
})
}
}
}
// För att temporärt avaktivera ett objekt, gör det här
function load() {
loadBoxes(level);
loadR_s(level);
loadP_p(level);
loadGate(level);
}
function loadItems() {
// Byt till level vid kollision med världskanten
// Level 1, går till vänster (level 0)
if (level === 1 && player.x <= 0 && (player.y > tile_size * 3 && player.y < tile_size * 6)) {
level = 0;
player.x = canvas.canvas.width - (tile_size * 2);
load();
// Level 0, går till höger (level 1)
} else if (level === 0 && player.x >= canvas.canvas.width - tile_size && (player.y > tile_size * 3 && player.y < tile_size * 6)) {
level = 1;
player.x = tile_size / 4;
load();
// Level 1, går till höger (level 2)
} else if (level === 1 && player.x >= canvas.canvas.width - tile_size && (player.y > tile_size * 2 && player.y < tile_size * 6)) {
level = 2;
player.x = tile_size / 4;
player.y = player.y + tile_size * 2;
load();
// Level 2, går till vänster (level 1)
} else if (level === 2 && player.x <= 0 && (player.y > tile_size * 5 && player.y < tile_size * 8)) {
level = 1;
player.x = canvas.canvas.width - (tile_size * 2);
player.y -= tile_size * 2;
load();
// Level 2, går till vänster (level 3)
} else if (level === 2 && (player.x <= tile_size * 9 && player.x > tile_size * 8) && (player.y > tile_size * 5 && player.y < tile_size * 8)) {
level = 3;
player.x -= tile_size * 2;
load();
// Level 3, går till höger (level 2)
} else if (level === 3 && (player.x <= tile_size * 8 && player.x > tile_size * 7) && (player.y > tile_size * 5 && player.y < tile_size * 8)) {
level = 2;
player.x += tile_size * 2;
load();
// Level 3, går upp (level 4)
} else if (level === 3 && player.y <= 0) {
level = 4;
player.x -= tile_size;
player.y = tile_size * 8.5;
load();
// Level 4, går ner (level 3)
} else if (level === 4 && player.y > tile_size * 9) {
level = 3;
player.x += tile_size;
player.y = tile_size * 0.5;
load();
// Level 3, går ner (level 5)
} else if (level === 3 && player.y > tile_size * 9) {
level = 5;
player.y = tile_size * 0.5;
load();
// Level 5, går upp (level 3)
} else if (level === 5 && player.y <= 0) {
level = 3;
player.y = tile_size * 8;
load();
// Level 5 går till vänster (level 6)
} else if (level === 5 && player.x <= 0) {
level = 6;
player.x = canvas.canvas.width - tile_size;
load();
// Level 6 går till höger (level 5)
} else if (level === 6 && player.x > canvas.canvas.width - tile_size) {
level = 5;
player.x = tile_size * 0.1;
load();
// Level 6 går upp (level 7)
} else if (level === 6 && player.y <= 0) {
level = 7;
player.y = tile_size * 9;
load();
// Level 7 går ner (level 6)
} else if (level === 7 && player.y > tile_size * 9 && (player.x > tile_size && player.x <= tile_size * 4)) {
level = 6;
player.y = tile_size * 0.6;
load();
};
}
function draw() {
// Synka buffer
if (bufferCanvas.width !== canvas.canvas.width || bufferCanvas.height !== canvas.canvas.height) {
bufferCanvas.width = canvas.canvas.width;
bufferCanvas.height = canvas.canvas.height;
}
if (!transitionScreen) {
movePlayer();
}
// Flyttar på lådan
moveBox();
// Flyttar på stenen
moveR_s();
// Aktiverar tryck knappen
activateP_p();
// Kallar på grindens kollison
gateCollision();
// Låser spelarens rörelser till kanten av spelplanen
clampPlayer(canvas);
loadItems();
// Stannar spelaren vid kollision
if (playerBlocked(world[level], tile_size, blockedTypes)) {
player.x -= player.dx * player.speed;
player.y -= player.dy * player.speed;
}
// Starta transition vid dörrkollision
if (!transitionScreen && (door(player.x, player.y) || door(player.x + player.width - 1, player.y) || door(player.x, player.y + player.height - 1) || door(player.x + player.width - 1, player.y + player.height - 1))) {
transitionDiameter = 0;
player.dx = 0;
player.dy = 0;
transitionScreen = true;
}
// Rita världen på buffer
let ctxTarget = transitionScreen ? buffer : canvas;
// Ritar bakgrunden
for (let y = 0; y < world[level].length; y++) {
for (let x = 0; x < world[level][y].length; x++) {
ctxTarget.fillStyle = ((x + y) % 2 == 0) ?
"rgba(154, 153, 153, 1)" : "rgba(142, 141, 141, 1)"; // Bakgrund
ctxTarget.fillRect(x * tile_size, y * tile_size, tile_size, tile_size);
}
}
// Ritar grinden på spelplanen
drawGate(ctxTarget);
// Ritar världen
for (let y = 0; y < world[level].length; y++) {
for (let x = 0; x < world[level][y].length; x++) {
const w = world[level][y][x];
if (world[level][y][x] == "b") {
make_base(wallTextures["b"], x * tile_size, y *tile_size, tile_size, tile_size, ctxTarget);
} else if(w > 0 && w < 19) {
make_base(wallTextures[w], x * tile_size, y * tile_size, tile_size, tile_size, ctxTarget);
}
}
}
// Ritar tryck knappen på spelplan
drawP_p(ctxTarget);
// Ritar spelaren på spelplanen
drawPlayer(ctxTarget);
// Ritar lådan på spelplanen
drawBox(ctxTarget);
// Ritar lådan på spelplanen
drawR_s(ctxTarget);
// Om transition: rita svart och cirkel som växer
if (transitionScreen) {
canvas.save();
// Svart bakgrund
canvas.fillStyle = "black";
canvas.fillRect(0, 0, canvas.canvas.width, canvas.canvas.height);
// Rita buffern i en cirkel som växer
canvas.beginPath();
canvas.arc(canvas.canvas.width / 2, canvas.canvas.height / 2, transitionDiameter / 2, 0, Math.PI * 2);
canvas.closePath();
canvas.clip();
canvas.drawImage(bufferCanvas, 0, 0);
canvas.restore();
// Öka cirkelns storlek
transitionDiameter += 10;
// När den täcker hela skärmen -> avsluta
if (transitionDiameter >= Math.max(canvas.canvas.width, canvas.canvas.height) * 1.5) {
transitionScreen = false;
level = 1;
player.y = player.y - tile_size * 2;
load();
}
}
}
// Startar spelet
function startGame() {
setInterval(draw, 4);
load();
}
// Växlar mellan full och liten skärm
function toggleFullScreen() {
// Spara grid-positioner innan ändring
let playerCol = player.x / tile_size;
let playerRow = player.y / tile_size;
let boxCols = boxes.map(b => b.x / tile_size);
let boxRows = boxes.map(b => b.y / tile_size);
let r_sCols = r_s.map(b => b.x / (tile_size * 0.2));
let r_sRows = r_s.map(b => b.y / (tile_size * 1.2));
let p_pCols = p_p.map(b => b.x / (tile_size * 0.2));
let p_pRows = p_p.map(b => b.y / (tile_size * 1.2));
let gateCols = gate.map(b => b.x / (tile_size));
let gateRows = gate.map(b => b.y / (tile_size));
// Lokal variabel för main
const main = document.getElementById("main");
if (fullScreen) {
// Windowed
document.exitFullscreen();
canvas.canvas.width = 640;
canvas.canvas.height = 400;
bufferCanvas.width = 640;
bufferCanvas.height = 400;
tile_size = 40;
canvas.imageSmoothingEnabled = false;
buffer.imageSmoothingEnabled = false;
document.body.style.paddingTop = "5%";
document.getElementById("fullScreenBtn").style.top = "81vh";
document.getElementById("fullScreenBtn").style.left = "71.5vw";
} else {
// Fullscreen
main.requestFullscreen();
canvas.canvas.width = 960;
canvas.canvas.height = 600;
bufferCanvas.width = 960;
bufferCanvas.height = 600;
tile_size = 60;
canvas.imageSmoothingEnabled = false;
buffer.imageSmoothingEnabled = false;
document.body.style.paddingTop = "0";
document.getElementById("fullScreenBtn").style.top = "92.6vh";
document.getElementById("fullScreenBtn").style.left = "94.7vw";
}
// Återställ spelaren till samma grid-position
player.width = tile_size * 0.8;
player.height = tile_size * 0.8;
player.x = playerCol * tile_size;
player.y = playerRow * tile_size;
// Återställ alla boxar till samma grid-positioner
for (let i = 0; i < boxes.length; i ++) {
boxes[i].width = tile_size;
boxes[i].height = tile_size;
boxes[i].x = boxCols[i] * tile_size;
boxes[i].y = boxRows[i] * tile_size;
}
// Återställ alla rullande stenar till samma grid-positioner
for (let i = 0; i < r_s.length; i ++) {
r_s[i].width = tile_size * 1.6;
r_s[i].height = tile_size * 1.6;
r_s[i].x = r_sCols[i] * tile_size * 0.2;
r_s[i].y = r_sRows[i] * tile_size * 1.2;
}
// Återställ alla tryck knappar till samma grid-positioner
for (let i = 0; i < p_p.length; i ++) {
p_p[i].width = tile_size * 2;
p_p[i].height = tile_size * 2;
p_p[i].x = p_pCols[i] * tile_size * 0.2;
p_p[i].y = p_pRows[i] * tile_size * 1.2;
}
// Återställ alla grindar till samma grid-positioner
for (let i = 0; i < gate.length; i ++) {
gate[i].width = tile_size * 1;
gate[i].height = tile_size * 3;
gate[i].x = gateCols[i] * tile_size;
gate[i].y = gateRows[i] * tile_size;
}
bufferCanvas.width = canvas.canvas.width;
bufferCanvas.height = canvas.canvas.height;
fullScreen = !fullScreen;
}
setTimeout(startGame, 0.01);