Skip to content

Instantly share code, notes, and snippets.

@jplattel

jplattel/gist:1380579

Created November 20, 2011 17:55
Show Gist options
  • Save jplattel/1380579 to your computer and use it in GitHub Desktop.
Save jplattel/1380579 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<html>
<head>
<title>Tilemap</title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="512" height="512">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
<script type="text/javascript">
function canvasApp(){
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
var tileSheet = new Image();
tileSheet.src = "tanks_sheet.png";
var tank = new Image();
tank.src = "tanks_sheet.png";
var mapIndexOffset = -1;
var mapRows = 16;
var mapCols = 16;
var tileMap = [
[31,31,31,31,31,31,31,31,31,31,31,31,31,31,31,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [32,1,1,1,1,1,1,1,1,1,1,1,1,1,1,32]
, [31,31,31,31,31,31,31,31,31,31,31,31,31,31,31,32]
];
function Screen() {
for (var rowCtr=0;rowCtr<mapRows;rowCtr++) {
for (var colCtr=0;colCtr<mapCols;colCtr++){
var tileId = tileMap[rowCtr][colCtr]+mapIndexOffset;
var sourceX = Math.floor(tileId % 8) *32;
var sourceY = Math.floor(tileId / 8) *32;
context.drawImage(tileSheet, sourceX, sourceY, 32, 32, colCtr*32, rowCtr*32, 32, 32);
}
}
}
tileSheet.addEventListener('load', Screen , false);
var animationFrames=[1,2,3,4,5,6,7,8];
var frameIndex=0;
var dx=0;
var dy=0;
var x=300;
var y=300;
var rotation = Math.PI / 4
function Tank() {
y=y+dy;
x=x+dx;
var sourceX=Math.floor(animationFrames[frameIndex] % 8) *32;
var sourceY=Math.floor(animationFrames[frameIndex] / 8) *32;
context.rotate(rotation);
context.drawImage(tank, sourceX, sourceY,32,32,x,y,32,32);
frameIndex++;
if (frameIndex ==animationFrames.length) {
frameIndex=0;
}
}
function Loop() {
Screen();
context.save();
Tank();
context.restore();
clearRect(0, 0, canvas.width, canvas.height);
}
setInterval(Loop, 100);
document.onkeydown=function(e){
e=e?e:window.event;
console.log(e.keyCode + "down");
var speed = 10
switch (e.keyCode){
case 38:
//up
if (dy == speed){
dy = 0;
dx = 0;
} else {
dy = -speed
dx = 0;
}
rotation = 0;
break;
case 40:
//down
if (dy == -speed){
dy = 0;
dx = 0;
} else {
dy = speed;
dx = 0;
}
break;
case 37:
if (dx == speed){
dx = 0;
dy = 0;
} else {
dx = -speed
dy = 0;
}
break;
case 39:
if (dx == -speed){
dx = 0;
dy = 0;
} else {
dx = speed
dy = 0;
}
break;
}
}
}
canvasApp();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment