API tools faq
paste
Advertisement
Guest User

IsoMetric Canvas Engine

a guest
Apr 29th, 2011
819
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.04 KB | None | 0 0
raw download clone embed print report
  1. <html>  
  2. <head>
  3. <title>tileEngine - Isometric</title>
  4. <style type="text/javascript">
  5. * { margin: 0px; padding: 0px; font-family: arial, helvetica, sans-serif; font-size: 12px; cursor: default; }
  6. body,html {
  7.     background-image: url(wood.jpg);
  8.     overflow: hidden;
  9. }
  10. #hud {
  11.     background-color: #000;
  12.     color: #c4c4c4;
  13.     padding: 5px 0px 5px 0px;
  14. }
  15. #main {
  16.     border:#333;
  17.     border-width:0px;
  18.     border-style:solid;
  19. }
  20. input {
  21.     width: 30px;
  22.     border: 1px solid #666;
  23.     background-color: #c4c4c4;
  24.     text-align: center;
  25.     font-weight: bold;
  26. }
  27. #hp {
  28.     color: #000;
  29.     width: 35px;
  30.     font-size: 16px;
  31. }
  32. #money {
  33.     color: gold;
  34.     background-color: #181818;
  35. }
  36. #pts {
  37.     font-size: 16px;
  38.     width: 35px;
  39.     color: red;
  40. }
  41. #time {
  42.     width: 55px;
  43.     color: #666;
  44. }
  45. #status {
  46.     float: right;
  47.     position: absolute;
  48.     right: 5px;
  49.     top: 55px;
  50.     width: 200px;
  51.     height: 175px;
  52.     border: 1px solid #666;
  53.     -webkit-border-radius: 15px;
  54.     -moz-border-radius: 15px;
  55.     border-radius: 15px;
  56.     font-size: 16px;
  57.     color: #fff;
  58.     text-align: center;
  59.     padding: 10px 5px 5px 5px;
  60.     -moz-opacity:.50;
  61.     filter:alpha(opacity=50);
  62.     opacity:.50
  63. }
  64. #infoKey {
  65.     float: left;
  66.     position: absolute;
  67.     left: 5px;
  68.     top: 55px;
  69.     width: 120px;
  70.     height: 155px;
  71.     border: 1px solid #666;
  72.     -webkit-border-radius: 15px;
  73.     -moz-border-radius: 15px;
  74.     border-radius: 15px;
  75.     font-size: 11px;
  76.     color: #fff;
  77.     text-align: left;
  78.     padding: 5px 5px 5px 5px;
  79.     -moz-opacity:.50;
  80.     filter:alpha(opacity=50);
  81.     opacity:.50
  82. }
  83. </style>
  84. <script type="text/javascript">
  85. var you; //you
  86. var time = 0;
  87.  
  88. //player starting position
  89. var playerX = 0;
  90. var playerY = 1;
  91.  
  92. var map = Array( //land
  93.     [1,0,1,1,1,1,1,1,1,1,1,1,1,1,1],
  94.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  95.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  96.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  97.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  98.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  99.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  100.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  101.     [1,5,4,4,4,4,4,4,4,4,4,4,4,4,4],
  102.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  103.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  104.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  105.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  106.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  107.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  108.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  109.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  110.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  111.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  112.     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  113. );
  114. var objectMap = Array( //walkable
  115.     [1,0,1,1,1,1,1,1,1,1,1,1,1,1,1],
  116.     [1,0,2,2,2,2,0,0,0,0,0,2,4,4,1],
  117.     [1,0,0,2,0,2,0,0,0,0,0,0,2,2,1],
  118.     [1,0,0,0,0,0,0,0,0,0,0,0,0,2,1],
  119.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  120.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  121.     [1,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
  122.     [1,3,2,0,0,0,0,0,0,0,0,0,0,0,1],
  123.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
  124.     [1,0,0,0,0,0,0,0,0,6,0,0,0,0,1],
  125.     [1,0,0,0,6,6,6,6,0,0,6,0,0,0,1],
  126.     [1,0,0,6,6,5,5,6,6,0,0,0,0,0,1],
  127.     [1,0,0,0,0,6,6,6,6,0,6,0,0,0,1],
  128.     [1,0,0,0,0,0,6,0,0,6,6,6,0,0,1],
  129.     [1,0,0,0,0,0,0,0,0,0,6,0,0,0,1],
  130.     [1,0,0,0,0,0,6,0,0,0,0,0,0,0,1],
  131.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  132.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  133.     [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  134.     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  135. );
  136. var tileDict = Array("tiles/land.png","tiles/water.png","tiles/swamp.png","tiles/land-road-up.png","tiles/land-road-down.png","tiles/land-road-corner1.png","tiles/soil.png","tiles/land-seeded.png");
  137. var charDict = Array("tiles/mario.png");
  138. var objectDict = Array("tiles/blank.png","tiles/rock.png","tiles/hut.png","tiles/flowers.png","tiles/golden-flowers.png","tiles/treelarge.png"); //value +1
  139. var objectImg = new Array();
  140. var charImg = new Array();
  141.  
  142. var tileImg = new Array();
  143. var loaded = 0;
  144. var loadTimer;
  145. var ymouse;
  146. var xmouse;
  147.  
  148. function loadImg(){ //preload images and calculate the total loading time
  149.     for(var i=0;i<tileDict.length;i++){
  150.         tileImg[i] = new Image();
  151.         tileImg[i].src = tileDict[i];
  152.         tileImg[i].onload = function(){
  153.             loaded++;
  154.         }
  155.     }
  156.     i = 0;
  157.     for(var i=0;i<charDict.length;i++){
  158.         charImg[i] = new Image();
  159.         charImg[i].src = charDict[i];
  160.         charImg[i].onload = function(){
  161.             loaded++;
  162.         }
  163.     }
  164.     i = 0;
  165.     for(var i=0;i<objectDict.length;i++){
  166.         objectImg[i] = new Image();
  167.         objectImg[i].src = objectDict[i];
  168.         objectImg[i].onload = function(){
  169.             loaded++;
  170.         }
  171.     }
  172. }
  173.  
  174. function checkKeycode(event) { //key pressed
  175.     var keycode;
  176.     if(event == null) {
  177.         keyCode = window.event.keyCode;
  178.     } else {
  179.         keyCode = event.keyCode;
  180.     }
  181.     //document.title = keyCode;
  182.     switch(keyCode) {
  183.         case 38: //left
  184.             if(!objectMap[playerX-1][playerY] > 0){
  185.                 playerX--;
  186.             }
  187.             break;
  188.         case 40: //right
  189.             if(!objectMap[playerX+1][playerY] > 0){
  190.                 playerX++;
  191.             }
  192.             break;
  193.         case 39: //up
  194.             if(!objectMap[playerX][playerY-1] > 0){
  195.                 playerY--;
  196.             }
  197.             break;
  198.         case 37: //down
  199.             if(!objectMap[playerX][playerY+1] > 0){
  200.                 playerY++;
  201.             }
  202.             break;
  203.         default:
  204.             break;
  205.     }
  206.     tmpEle = document.getElementById("coords");
  207.     tmpCoord = playerX + ", " + playerY;
  208.     tmpEle.value = tmpCoord;
  209. }
  210.  
  211. function loadAll(){ //load the game
  212.     if(loaded == tileDict.length + charDict.length + objectDict.length){
  213.         clearInterval(loadTimer);
  214.         loadTimer = setInterval(gameUpdate,100);
  215.     }
  216. }
  217.  
  218. function drawMap(){ //draw the map (in intervals)
  219.     var tileH = 25;
  220.     var tileW = 50;
  221.     mapX = 80;
  222.     mapY = 10;
  223.     for(i=0;i<map.length;i++){
  224.         for(j=0;j<map[i].length;j++){
  225.             var drawTile= map[i][j];
  226.             var drawObj = objectMap[i][j];
  227.             var xpos = (i-j)*tileH + mapX*4.5;
  228.             var ypos = (i+j)*tileH/2+ mapY*3.0;
  229.             ctx.drawImage(tileImg[drawTile],xpos,ypos);
  230.            
  231.             if(drawObj){
  232.                 if (drawObj > 0) {
  233.                     ctx.drawImage(objectImg[drawObj-1],xpos,ypos-(objectImg[drawObj-1].height/2));
  234.                 }
  235.             }
  236.             if(i == playerX && j == playerY){
  237.                 you = ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2));
  238.             }
  239.         }
  240.     }
  241. }
  242.  
  243. function init(){ //initialise the main functions and even handlers
  244.     setInterval('updateClock()',1000);
  245.     ctx = document.getElementById('main').getContext('2d');
  246.     loadImg();
  247.     loadTimer = setInterval(loadAll,100);
  248.     //document.getElementById("main").addEventListener("mousemove", mouseCheck, false);
  249.     //document.getElementById("main").addEventListener("mousedown", mouseClick, false);
  250.     document.onkeydown = checkKeycode;
  251.     tmpEle = document.getElementById("coords");
  252.     tmpCoord = playerX + ", " + playerY;
  253.     tmpEle.value = tmpCoord;
  254. }
  255.  
  256. function gameUpdate() { //update the game, clear canvas etc
  257.     ctx.clearRect(0,0,904,460);
  258.    
  259.     ctx.fillStyle = "rgba(255, 255, 255, 1.0)"; //assign color
  260.     drawMap();
  261. }
  262.  
  263. function updateClock() {
  264.     time++;
  265.     document.getElementById("time").value = time;
  266. }
  267. </script>
  268. </head>
  269. <body align="center" style="text-align: center;" onload="init();"> 
  270.     <div id="hud">
  271.         Co-ords: <input disabled type="text" id="coords" value="" />
  272.         Time: <input disabled type="text" id="time" value="" />
  273.         <br />
  274.     </div>
  275.     <div id="status">
  276.         <!-- status updates -->
  277.     </div>
  278.     <div id="infoKey">
  279.        
  280.     </div>
  281.     <canvas id="main" width="904" height="465">
  282.         <h1 style="color: white; font-size: 24px;">I'll be damned, there be no HTML5 &amp; canvas support on this 'ere electronic machine!<sub>This game, jus' plain ol' won't work!</sub></h1>
  283.     </canvas>
  284. </body>
  285. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!