At the Checkclick function I am trying to make the rail type to go back to 0 when it exceed the number of type, but it always goes above the number of types of the rail. Like for straight rail there are 2 types: type zero which is vertical and type 1 which is horizontal. For curved rail there are 4 types. When you click the rail, the type increase and change the variable t value in the render part and change the rail look.
//create canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1024;
canvas.height = 640;
document.body.appendChild(canvas);
function init () {
setInterval(main(), 100);
}
var mouse_x;
var mouse_y;
canvas.addEventListener("mousemove", checkPos);
canvas.addEventListener("mouseup", checkClick);
function checkPos (mouseEvent) {
if (mouseEvent.pageX || mouseEvent.pageY == 0) {
mouse_x = mouseEvent.pageX - this.offsetLeft;
mouse_y = mouseEvent.pageY - this.offsetTop;
}
else if (mouseEvent.offsetX || mouseEvent.offsetY == 0) {
mouse_x = mouseEvent.offsetX;
mouse_y = mouseEvent.offsetY;
}
}
//this part is the problem
function checkClick (mouseEvent) {
for (i = 0; i < all_rails.length; i++) {
if (mouse_x < all_rails[i].x + 32 && mouse_x > all_rails[i].x && mouse_y > all_rails[i].y && mouse_y < all_rails[i].y + 32) {
if (all_rails[i] !== 0) {
all_rails[i].type++;
if (all_rails[i] == 1 && all_rails[i].type > 1) {
all_rails[i].type = 0;
}
else if (all_rails[i] == 2 && all_rails[i].type > 3) {
all_rails[i].type = 0;
}
}
}
}
}
var bgImage = new Image();
bgImage.src = "image/bg.png";
var stationImage = new Image();
stationImage.src = "image/station.png" var s_r = new Array();
s_r[0] = new Image();
s_r[1] = new Image();
s_r[0].src = "image/s_rail0.png";
s_r[1].src = "image/s_rail1.png";
var c_r = new Array();
c_r[0] = new Image();
c_r[1] = new Image();
c_r[2] = new Image();
c_r[3] = new Image();
c_r[0].src = "image/c_rail0.png";
c_r[1].src = "image/c_rail1.png";
c_r[2].src = "image/c_rail2.png";
c_r[3].src = "image/c_rail3.png";
//start of rail
//function that makes a rail
function s_rail () {
//straight rails
this.x = column * 32;
this.y = row * 32;
this.type = s_type();
// type 0 up down type 1 left right
}
function c_rail () {
//curved rails
this.x = column * 32;
this.y = row * 32;
this.type = c_type();
//type 0 right down type 1 left down type 2 up right type 3 up left
}
//draw the rails
s_rail.prototype.draw = function () {
var t = this.type;
ctx.drawImage(s_r[t], this.x, this.y);
}
c_rail.prototype.draw = function () {
var t = this.type;
ctx.drawImage(c_r[t], this.x, this.y);
}
//type randomize
function s_type () {
if (Math.random() < 0.5) {
return 0;
}
else {
return 1;
}
}
function c_type () {
if (Math.random() <= 0.25) {
return 0;
}
else if (Math.random() > 0.25 && Math.random() <= 0.5) {
return 1;
}
else if (Math.random() > 0.5 && Math.random() <= 0.75) {
return 2;
}
else {
return 3;
}
}
//give the rails its position and type
var all_rails = [0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1,];
var n = 0;
//the index of rails
var row = 0;
var column;
function make_rail () {
for (n; n < 640; n++) {
column = n % 32;
if (column == 0 && n !== 0) {
row++;
}
if (all_rails[n] == 1) {
all_rails[n] = new s_rail();
}
else if (all_rails[n] == 2) {
all_rails[n] = new c_rail();
}
}
}
//end of rails
function render () {
ctx.drawImage(bgImage, 0, 0);
ctx.drawImage(stationImage, 0, 0);
ctx.drawImage(stationImage, 0, 576);
//render the rails fail
for (a = 0; a < all_rails.length; a++) {
if (all_rails[a] !== 0) {
all_rails[a].draw();
}
}
}
function main () {
make_rail();
render();
requestAnimationFrame(main);
}
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
init();
I think your explanation it is hard to understand. Your are comparing an object with a number after you incremented the type, so conditions won't met
function checkClick (mouseEvent) {
for (i = 0; i < all_rails.length; i++) {
if (mouse_x < all_rails[i].x + 32 && mouse_x > all_rails[i].x && mouse_y > all_rails[i].y && mouse_y < all_rails[i].y + 32) {
if (all_rails[i] !== 0) {
/*
Always happens, all_rails[i] is an object, not the number 0
*/
all_rails[i].type++; // Always increment
if (all_rails[i] == 1 && all_rails[i].type > 1) {
/*
Never happens, all_rails[i] is an object, not a value 1
*/
all_rails[i].type = 0; // Never resets
}
else if (all_rails[i] == 2 && all_rails[i].type > 3) {
/*
Never happens, all_rails[i] is an object, not a value 2
*/
all_rails[i].type = 0; // Never resets
}
}
}
}
}
You declared all_rails as:
var all_rails = [0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 2, 0, 1,];
but in make_rail you assign an object s_rail or object c_rail to all the items, overriding the initial numerical value. Available fixes are add a custom valueOf to the c_rail and s_rail objects that evaluates to the initial all_rails[n] value (not recommended) or add a new property that holds the initial numerical value and pass it as an argument to the c_rail and s_rail constructors, then fix checkClick function to compare the property of all_rails[i] rather than the object itself.
(I will also recommend that in JavaScript you declare everything first before you execute actual code. Also to use capitalize the first letter of the constructor and use camel case)