Skip to content

Instantly share code, notes, and snippets.

@jweinst1

jweinst1/direction_sprite_game.html

Created December 23, 2024 23:43
Show Gist options
  • Save jweinst1/e76c76b5242f560d063c1e01f89286f7 to your computer and use it in GitHub Desktop.
Save jweinst1/e76c76b5242f560d063c1e01f89286f7 to your computer and use it in GitHub Desktop.
Download ZIP
A 16 x 16 sprinte drawer with directions game in JS
Raw
direction_sprite_game.html
<!DOCTYPE html>
<html>
<head>
<title>Runner Game</title>
<style>
canvas { background: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p id="coords">The coords go here</p>
<canvas id="myCanvas" width="512" height="512"></canvas>
<script type="text/javascript">
var clickY = 0;
var clickX = 0;
var direction = 0;
document.getElementById("myCanvas").addEventListener("click", function (e){
clickY = e.offsetY;
clickX = e.offsetX;
});
document.addEventListener('keydown', function(event) {
if (event.key == '0') {
direction = 0;
console.log("Direction 0");
} else if (event.key == '1') {
direction = 1;
console.log("Direction 1");
} else if (event.key == '2') {
direction = 2;
console.log("Direction 2");
} else if (event.key == '3') {
direction = 3;
console.log("Direction 3");
}
});
let Sprite = function(imgFileName, yOffset, baseIndex, indexIncrement) {
this.yOffset = yOffset;
this.sideSize = indexIncrement;
this.img = new Image();
this.img.src = imgFileName;
this.direction = 0;
this.baseIndex = baseIndex;
this.indexIncrement = indexIncrement;
this.maxIndex = this.baseIndex + (4 * this.indexIncrement);
this.directionSegment = this.maxIndex - this.baseIndex;
this.index = this.baseIndex;
this.draw = function(ctx) {
// do the actual drawing.
ctx.drawImage(this.img, this.index + (direction * this.directionSegment), this.yOffset, this.sideSize, this.sideSize, clickX, clickY, this.sideSize, this.sideSize);
this.index += this.indexIncrement;
if (this.index == this.maxIndex) {
this.index = this.baseIndex;
}
};
};
var char = new Image();
var charSpriteIndex = 0;
var lastDrewChar = Date.now();
function init() {
char.src = 'canvas-char.png';
draw();
window.requestAnimationFrame(draw);
}
function drawChar(ctx) {
document.getElementById("coords").innerHTML = "X is " + clickX.toString() + " Y is " + clickY.toString();
switch (charSpriteIndex) {
case 0:
ctx.drawImage(char, charSpriteIndex, 0, 16, 16, clickX, clickY, 16, 16);
charSpriteIndex += 16;
break;
case 16:
ctx.drawImage(char, charSpriteIndex, 0, 16, 16, clickX, clickY, 16, 16);
charSpriteIndex += 16;
break;
case 32:
ctx.drawImage(char, charSpriteIndex, 0, 16, 16, clickX, clickY, 16, 16);
charSpriteIndex += 16;
break;
case 48:
ctx.drawImage(char, charSpriteIndex, 0, 16, 16, clickX, clickY, 16, 16);
charSpriteIndex = 0;
break;
default:
console.log("Unknown issue with charSpriteIndex");
}
}
var myChar = new Sprite('canvas-char.png', 0, 0, 16);
function draw() {
var curTime = Date.now();
if ((curTime - lastDrewChar) <= 100) {
window.requestAnimationFrame(draw);
return;
}
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.clearRect(0, 0, 512, 512); // clear canvas
document.getElementById("coords").innerHTML = "X is " + clickX.toString() + " Y is " + clickY.toString();
myChar.draw(ctx, curTime);
lastDrewChar = curTime;
window.requestAnimationFrame(draw);
}
init();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment