javascript - Add CSS tilemap to canvas -


I am creating my CSS tilemap, the tilemap is 5x5, and will be in 1000x1000px size.

I would like to add it to the 500x500px canvas element, so that only a map of 1/2 can be shown. I have a camera function that gives the player the center in the canvas and transfers the tilemap relative to the player.

image description here Enter

Map array given 

  Var mapArray = [[0, 0, 0, 0, 0], [0, 1, 0, 0, 0 ], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 1, 1, 0]];

I draw my map in such a way: 

  function drawMap () {for (var i = 0; i & lt; mapArray Length; i ++) {for (var j = 0; j & lt; mapArray [i] .length; j ++) {if (parseInt (mapArray [i] [j]) == 0 $ {$ ( '# MapContainer'). Attachments ('& lt; div class = "grass">

CSS: I have tried to add the element directly to HTML, and maybe the tilemap background to use z-index: -1 , but that does not work 

  #mapContainer {height: 1000px; width: 1000 pixel; position: relative; outline: 1 px solid black; z-index: -1;} gross {height: 200px; width: 200px; Position: Relative; Swimming Left; Background Color: Green; Z-index: -1;} .dirt {Height: 200px; Width: 200px; Condition: Relative; Swarm Left; Background Color: Tan; Z-index: - 1;}

How can I add the #mapContainer element to the canvas? I am using createJS, so I tried to do this: 

  function versus world () {world = new createj.Container (); Var htmlElement = document.createElement ('div'); HtmlElement.id = 'mapContainer'; Var domElement = new createjs.DOMElement (htmlElement); World.addChild (domElement); Stage.addChild (world); }

Any ideas?

It seems that you are moving a div to keep a background image for each tile, You want the browser to render behind your canvas (canvas transparent)?

I have made a divis-tile for the first and I suggest it against it. However, you should be able to get whatever you ask.

  • The style in the canvas is background: transparent; or & lt; Canvas element & gt; . Background = 'transparent'; .
  • The canvas textures should be above the divs; I just recommend to ensure that there is a canvas element after the texture elements in the DOM Tree / HTML, but if it is not easy then z- Index styles too. I have never used negative z-indexes but they should work.

I would recommend rendering the tile set within the canvas. I had broken things like this long ago. Welcome to reuse any code from this old project: source:


Comments

Post a Comment

Popular posts from this blog

ios - How do I use CFArrayRef in Swift? -

I am using Objective-class in my Swift Project through a bridging header. The method signature looks like this: - Some cement (some type) some parameters; I started by getting an example of class, calling method, and storing the value: var myInstance = MyClassWithThatMethod (); Var cfArr = myInstance.someMethod (some value); Then try to get the value in the array: var valueInArrayThatIWant = CFArrayGetValueAtIndex (cfArr, 0); However, I get the error unmanaged & lt; Cfarray & gt; Not like 'CFArray' . Unmanaged & lt; Cfarray & gt; also means? I looked, but I do not need to change the array in a fast array (though it would be good). I need to be able to get value from the array. I also tried CFArray method to pass in a function: func doSomeStuffOnArray (myArray: NSArray) {} Although I get the same error when using: doSomeStuffOnArray (cfArr); // unmanaged & lt; CFArray & gt; I am using CFArray because I want to sto...
Read more

eclipse plugin - Run java code error: Workspace is closed -

To create an automated project, I created a plug-in project with the following dependencies: Org.eclipse.core.resources org.eclipse.equinox.registry org.eclipse.core.runtime and the following The Java class is located in the src folder: Package Examiner; Import org.eclipse.core.resources.IProject; Import org.eclipse.core.resources.IWorkspaceRoot; Import org.eclipse.core.resources.ResourcesPlugin; Import org.eclipse.core.runtime.CoreException; Import org.eclipse.core.runtime.IProgressMonitor; Import org.eclipse.core.runtime.NullProgressMonitor; Public class tes {public static zero main (string [] args) {// TODO auto generated method stub IProgressMonitor progress monitor = new NullProgressMonitor (); IWorkspaceRoot root = ResourcesPlugin.getWorkspace (). GetRoot (); Ipoject project = root.jetproject ("desired projectname"); Try {Project.create (progress monitor); Project.open (progressMonitor); } Grip (CoreException E) {// TODO Auto generated blocking block e....
Read more

c - Error on building source code in VC 6 -

When I create my project in VC6, the BScMKE reports the following error Linking .. Creating Library ... .. / ... / PB / Bean / Debub / ICEERP.Lib and Object ........ P.B. / Bean / DBube / ICREPlay.APP Browse information file ... BSMMK: ​​error can not be read from BK 1505: file '../../PB/bin/TmpOut/ICReplay/Debug/ICReplay_PB.bsc' Error executing bscmake.exe Can someone help me? 2 Reason for reference from: "ICReplay_PB .bsc "file will be corrupted The trunk of the file will be happening with the compiler running out of disk space or is being interrupted when creating .sbr file I think this answer will help you!
Read more