Show sourcecode
The following files exists in this folder. Click to view.
webbserverprogrammering/GYA/js/
box.js
branch_box_1.js
branch_main_1.js
branch_main_2.js
branch_player_1.js
door.js
global.js
main.js
player.js
world.js
main.js
227 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
// 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;
// Växlar till nästa nivå (loop)
document.getElementById("level_button").addEventListener("click", function() {
level = (level + 1) % world.length;
player.x = tile_size;
player.y = tile_size;
});
// Tangenthantering
document.addEventListener("keydown", function(e) {
keysDown[e.key.toLowerCase()] = true;
updateDirection();
});
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"
})
}
else if (world[level][y][x] == 3) {
doors.push({
// Dörrens atribut
x : tile_size * x,
y : tile_size * y,
width : tile_size,
height : tile_size,
color : "brown"
})
}
else if (world[level][y][x] == 4) {
boxes.push({
// Lådans atribut
x : tile_size * x,
y : tile_size * y,
width : tile_size,
height : tile_size,
color : "yellow",
speed : 2.5,
dx : 0,
dy : 0
})
}
}
}
// Dörrkoll
function door(x, y) {
let gridX = Math.floor(x / tile_size);
let gridY = Math.floor(y / tile_size);
if (gridY >= 0 && gridY < world[level].length && gridX >= 0 && gridX < world[level][gridY].length) {
return world[level][gridY][gridX] == 3;
}
return false;
}
// Flyttbart blockkoll
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();
clampPlayer(canvas);
// 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)
)) {
transitionScreen = true;
// Byt bana direkt
level = (level + 1) % world.length;
player.x = tile_size;
player.y = tile_size;
loadBoxes(level);
// Starta från svart skärm
transitionDiameter = 0;
player.dx = 0;
player.dy = 0;
}
// Rita världen på buffer
let ctxTarget = transitionScreen ? buffer : canvas;
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) {
ctxTarget.fillStyle = "rgba(125, 125, 125, 1)"; // Vägg
} else if (world[level][y][x] == 2) {
ctxTarget.fillStyle = "rgba(0, 200, 0, 1)"; // Buske
} else if (world[level][y][x] == 3) {
ctxTarget.fillStyle = "rgba(100, 38, 0, 1)"; // Dörr
} else {
ctxTarget.fillStyle = ((x + y) % 2 == 0) ?
"rgba(245, 245, 245, 1)" : "rgba(238, 238, 238, 1)"; // Bakgrund
}
ctxTarget.fillRect(x * tile_size, y * tile_size, tile_size, tile_size);
}
}
drawPlayer(ctxTarget);
drawBox(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;
}
}
}
// Startar spelet
function startGame() {
setInterval(draw, 10);
}
// 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);
if (fullScreen) {
// Windowed
canvas.canvas.width = 600;
canvas.canvas.height = 400;
tile_size = 40;
document.body.style.paddingTop = "5%";
document.getElementById("fullScreenBtn").style.top = "81vh";
document.getElementById("fullScreenBtn").style.left = "71.5vw";
} else {
// Fullscreen
canvas.canvas.width = window.innerWidth - 70;
canvas.canvas.height = window.innerHeight - 23;
tile_size = 70;
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;
player.height = tile_size;
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;
}
bufferCanvas.width = canvas.canvas.width;
bufferCanvas.height = canvas.canvas.height;
fullScreen = !fullScreen;
}
startGame();