HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

First HTML5 Canvas Game Puzzle 15

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
gamefirsthtml5puzzlecanvas

Problem

This is my first game made using canvas, currently it works well but I know my JavaScript could be better as I am still learning. What improvements can I make on the structure of my JavaScript?



`document.addEventListener("DOMContentLoaded", function() {

var c = document.getElementById("board");
var ctx = c.getContext("2d");
c.width = 400;
c.height = 400;

var map = [
[4,9,12,8],
[6,15,3,11],
[7,0,1,10],
[13,14,2,5]
];

var winMap = [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,0]
];

var tileMap = [];

var tile = {
width : 100,
height : 100
};

var pos = {
x : 0,
y : 0,
textx : 45,
texty : 55
};

var drawTile = function(){
ctx.fillStyle = '#EB5E55';
ctx.shadowColor = '#000';
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 2;
ctx.fillRect(pos.x + 5,pos.y + 5,tile.width-10,tile.height-10);
ctx.shadowColor = "transparent";
ctx.fillStyle = '#FFFFFF';
ctx.font = "20px Arial";
//adjust center for larger numbers
if(map[i][j] >= 10){
ctx.fillText(map[i][j], pos.textx -2 , pos.texty);
}else{
ctx.fillText(map[i][j], pos.textx + 2 , pos.texty);
}
};

var buildBoard = function(){
for(i = 0; i tileMap[i][j].y && y tileMap[i][j].x && x -1){
zeroIndex = zeroIndex;
break;
}
}
if(zeroIndex === itemIndex){
//create a new array with column values
var tempArr = [];
for(var i = 0; i = tempArr.length) {
var k = selectedItem - tempArr.length;
while ((k--) + 1) {
map[i].push(undefined);
}
}
tempArr.splice(selectedItem, 0, tempArr.splice(zero, 1)[0]);

//update our map with the correct values for the column
for(var l = 0; l -1 && zeroIndex > -1){
//reorder row
if (itemIndex >= map[i].length) {
var k = itemIndex - map[i].length;
while ((

Solution

I do not have enough reputation to comment so here is an answer..

Given only row 0, column 3 is empty..

When I click on 0,0 all the block on row 0 will move to the right and the board will end up with 0,0 being empty.

..however..

When I click on 3,3 only one block will move up and the board will end up with 1,3 being empty..

You may want to check this, seems like a minor bug to me!

Context

StackExchange Code Review Q#155130, answer score: 2

Revisions (0)

No revisions yet.