This repository has been archived by the owner on Jan 18, 2019. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add scrolling example (square tiles)
- Loading branch information
1 parent
d510a22
commit 76d1f2b
Showing
6 changed files
with
151 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Tilemaps examples - Scrolling map</title> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="../styles.css" type="text/css"> | ||
|
|
||
| <script src="../common.js"></script> | ||
| <script src="scroll.js"></script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="main-wrapper"> | ||
| <header class="main-header"> | ||
| <h1><a href="../index.html">Tilemaps examples</a></h1> | ||
| <p>Scrolling map</p> | ||
| </header> | ||
|
|
||
| <canvas id="demo" width="512" height="512"></canvas> | ||
|
|
||
| <footer class="main-footer"> | ||
| <p>Source code on <a href="https://github.com/mozdevs/gamedev-js-tiles">the Github repository</a>.</p> | ||
| </footer> | ||
| </div><!-- main wrapper --> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| var map = { | ||
| cols: 12, | ||
| rows: 12, | ||
| tsize: 64, | ||
| layers: [[ | ||
| 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, | ||
| 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 3, | ||
| 3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3, | ||
| 3, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 3, | ||
| 3, 3, 3, 1, 1, 2, 3, 3, 3, 3, 3, 3 | ||
| ], [ | ||
| 4, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 5, 0, 0, 0, 0, 0, 5, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, | ||
| 4, 4, 4, 0, 5, 4, 4, 4, 4, 4, 4, 4, | ||
| 4, 4, 4, 0, 0, 3, 3, 3, 3, 3, 3, 3 | ||
| ]], | ||
| getTile: function (layer, col, row) { | ||
| return this.layers[layer][row * map.cols + col] | ||
| } | ||
| }; | ||
|
|
||
| function Camera(map, width, height) { | ||
| this.x = 0; | ||
| this.y = 0; | ||
| this.width = width; | ||
| this.height = height; | ||
| this.maxX = map.cols * map.tsize - width; | ||
| this.maxY = map.rows * map.tsize - height; | ||
| } | ||
|
|
||
| Camera.SPEED = 256; // pixels per second | ||
|
|
||
| Camera.prototype.move = function (delta, dirx, diry) { | ||
| // move camera | ||
| this.x += dirx * Camera.SPEED * delta; | ||
| this.y += diry * Camera.SPEED * delta; | ||
| // clamp values | ||
| this.x = Math.max(0, Math.min(this.x, this.maxX)); | ||
| this.y = Math.max(0, Math.min(this.y, this.maxY)); | ||
| }; | ||
|
|
||
| Game.load = function () { | ||
| return [ | ||
| Loader.loadImage('tiles', '../assets/tiles.png'), | ||
| ]; | ||
| }; | ||
|
|
||
| Game.init = function () { | ||
| Keyboard.listenForEvents( | ||
| [Keyboard.LEFT, Keyboard.RIGHT, Keyboard.UP, Keyboard.DOWN]); | ||
| this.tileAtlas = Loader.getImage('tiles'); | ||
| this.camera = new Camera(map, 512, 512); | ||
| }; | ||
|
|
||
| Game.update = function (delta) { | ||
| // handle camera movement with arrow keys | ||
| var dirx = 0; | ||
| var diry = 0; | ||
| if (Keyboard.isDown(Keyboard.LEFT)) { dirx = -1; } | ||
| if (Keyboard.isDown(Keyboard.RIGHT)) { dirx = 1; } | ||
| if (Keyboard.isDown(Keyboard.UP)) { diry = -1; } | ||
| if (Keyboard.isDown(Keyboard.DOWN)) { diry = 1; } | ||
|
|
||
| this.camera.move(delta, dirx, diry); | ||
| }; | ||
|
|
||
| Game._drawLayer = function (layer) { | ||
| var startCol = Math.floor(this.camera.x / map.tsize); | ||
| var endCol = startCol + (this.camera.width / map.tsize); | ||
| var startRow = Math.floor(this.camera.y / map.tsize); | ||
| var endRow = startRow + (this.camera.height / map.tsize); | ||
| var offsetX = -this.camera.x + startCol * map.tsize; | ||
| var offsetY = -this.camera.y + startRow * map.tsize; | ||
|
|
||
| for (var c = startCol; c <= endCol; c++) { | ||
| for (var r = startRow; r <= endRow; r++) { | ||
| var tile = map.getTile(layer, c, r); | ||
| var x = (c - startCol) * map.tsize + offsetX; | ||
| var y = (r - startRow) * map.tsize + offsetY; | ||
| if (tile !== 0) { // 0 => empty tile | ||
| this.ctx.drawImage( | ||
| this.tileAtlas, // image | ||
| (tile - 1) * map.tsize, // source x | ||
| 0, // source y | ||
| map.tsize, // source width | ||
| map.tsize, // source height | ||
| x, // target x | ||
| y, // target y | ||
| map.tsize, // target width | ||
| map.tsize // target height | ||
| ); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| Game.render = function () { | ||
| // draw map background layer | ||
| this._drawLayer(0); | ||
| // draw map top layer | ||
| this._drawLayer(1); | ||
| }; |