Kogu brauseri akent kattev mitmekihiline mäng

koll0
Klikka demo avamiseks !

Kõik mängud näevad välja paremad, kui nad katavad kogu brauseri akna (v.a. brauseri menüüd); sellise mängu akna suurust saab kasutaja7mängija ise seada, muutes brauseri akna suurust ja klikates seejärel "reload".

Kuna brauserid kipuvad kogu aknale ise määrama tühja äärt margin (kena, kuid siin see pole otstarbekas), määrame kõigepealt, et kogu html-dokumendi keha body peab täitma kogu akna: 

body {
			margin: 0px;
		}

Akna vasakult ja ülaäärest algava kanvaa defineerimine CSS stiililehega on lihtne, seda teeb järgnev stiililehe klass (punkt . tähendab, et see on klassi definitsioon): kuna akna suurus laadimise ajal pole veel teada, tuleb kanvaade laius-kõrgus määrata pärast lehe laadimist Javascriptiga

.gamecanvas { 
			position:fixed;
			left: 0px;
			top: 0px;
			}
Määrame mängu kahe üksteise peal asuva kanvaa klassiks gamecanvas, aga kuna neil on erinevad omadused (alumisel on taust, järgmine/ülemine peab asuma esimese peal) anname neile ka id, seega kogu html-dekumendi struktuur oleks:

‹!DOCTYPE html>
‹html lang="ee>
	‹head>
	‹meta charset="utf-8">
	‹title>Mitmekihiline maksimaalne kanvaa‹/title>
        ‹meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        ‹style type="text/css" media="screen">
		body {
			margin: 0px;
		}
		 #container { 
			width:100%;
			margin-left: auto; 
			margin-right: auto;
			}
    	.gamecanvas { 
			position:fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			}
		
		#canvas_game {
			background:url("images/taust.png") 
			}
		#canvas_trees {
			z-index: 1;
			}
		 ‹/style>	
  	‹/head>
	‹body>
			‹canvas class="gamecanvas" id="canvas_game">
			‹canvas class="gamecanvas" id="canvas_trees" >
	‹script type="text/javascript" src="js/layers_max.js">
‹/html> 

Akna (ilma menüüdeta) laiuse kõrguse saab javascripti muutujatega window.inneWidth, window.inneheight, seega skriptis määrame kogu akent täitvate kanvaade saamiseks 

gamecanvas = document.getElementById("canvas_game");
 ctx = gamecanvas.getContext("2d");
 w = window.innerWidth;
 h = window.innerHeight;
 console.log(w,h); //testimiseks !
 gamecanvas.width = w;
 gamecanvas.height = h;
 
 treecanvas = document.getElementById("canvas_trees");
 treecanvas.width = w;
 treecanvas.height = h;
 ctx1 = treecanvas.getContext("2d");