I'm trying to call a method walkDown(y,id){} on my object game and it returns undefined. The similar method walkUp(y,id){} works as intended. Here is the code:
class Game {
constructor(row,col,players) {
this.players = players;
this.row = row;
this.col = col;
this.gameBoard=[];
for (let i=0; i<row; i++){
this.gameBoard[i] =[];
for (let y =0; y<col; y++){
this.gameBoard[i][y] = 0;
}
}
}
placing(id){
var place = true;
while(place){
var y = Math.floor(Math.random()*10);
var x = Math.floor(Math.random()*10);
if (this.gameBoard[y][x] === 0){
this.gameBoard[y][x] = this.players[id];
place = false;
} //if finish
} // while finish
}// function placing finish
walkDown(y,id){
for(var k = 0; k < this.gameBoard.length; k++){
for(var m = 0; m < this.gameBoard[k].length; m++){
if(this.gameBoard[k][m]===this.players[id]){
this.gameBoard[k][m] = 0;
this.gameBoard[k+y][m]= this.players[id];
}
}
}
}
walkUp(y,id){
for(var k = 0; k < this.gameBoard.length; k++){
for(var m = 0; m < this.gameBoard[k].length; m++){
if(this.gameBoard[k][m]===this.players[id]){
this.gameBoard[k][m] = 0;
this.gameBoard[k-y][m]= this.players[id];
}
}
}
}
}// Class Game finish
class Player{
constructor(id){
this.id = id;
}
}
const game = new Game(10,10,[new Player(0), new Player(1)]);
game.placing(0);
game.placing(1);
// game.walkUp(1,0); will work
// game.walkDown(1,0); throws an error
The undefined comes from this line of code this.gameBoard[k+y][m]= this.players[id]. However as mentioned above the method walkUp(y,id){} with the similar line of code this.gameBoard[k-y][m]= this.players[id] presents the required result.
What am I doing wrong here? Link to the code
https://jsbin.com/kizateh/edit?js,console
Related
I am specifying the function show() inside the function Spot() but still I am getting this error of Uncaught TypeError and its saying its undefined at draw().
This is the Javascript code and I am using p5.js as library.
var cols = 5;
rows = 5;
var grid = new Array(cols);
var w,h;
function Spot(i,j){
this.x = i;
this.y = j;
this.f = 0;
this.g = 0;
this.h = 0;
this.show = function(){
fill(255);
stroke(0);
rect(this.x*w,this.y*h,w-1,h-1);
}
}
function setup(){
createCanvas(400,400);
console.log('A*');
w = width/cols;
h = height/rows;
for(var i = 0; i < cols;i++){
grid[i] = new Array(rows);
}
console.log(grid);
for(var i = 0; i < cols;i++)
{
for(var j = 0; i < rows;i++)
{
grid[i][j] = new Spot(i,j);
}
}
}
function draw(){
background(0);
for(var i = 0; i < cols-1;i++)
{
for(var j = 0; j < rows-1; j++)
{
grid[i][j].show();
}
}
}
body {
padding: 0;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.1/sketch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
I am getting this error in chrome console and i am running the html as a web server on my local pc.(localhost:8000)
This is the attached image for the error in google chrome console
I have just started with java script and not able to resolve this error despite extensive searching about it.
It would be helpful if someone knows about it.
Thanks in advance
Have a look in your setup loop.
In the nested loop, you are increasing the i value, instead of the j value.
And your also counting the rows/columns indexes different in the setup and draw.
This might be what you want, just thought I would point it out.
( rows/cols-1 vs cols/rows)
var cols = 5;
var rows = 5;
var grid = new Array(cols);
var w,h;
function Spot(i,j){
this.x = i;
this.y = j;
this.f = 0;
this.g = 0;
this.h = 0;
this.show = function(){
fill(255);
stroke(0);
rect(this.x*w,this.y*h,w-1,h-1);
}
}
function setup(){
createCanvas(400,400);
console.log('A*');
w = width/cols;
h = height/rows;
for(var i = 0; i < cols;i++){
grid[i] = new Array(rows);
}
console.log('grid: ', grid);
for(var i = 0; i < cols-1;i++)
{
for(var j = 0; j < rows-1;j++)
{
grid[i][j] = new Spot(i,j);
}
}
}
function draw(){
background(0);
for(var i = 0; i < cols-1;i++)
{
for(var j = 0; j < rows-1; j++)
{
grid[i][j].show();
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.1/sketch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
I have an ES6 class that's defined like this and has a couple of functions:
class Cell{
constructor(i,j){
this.i = i;
this.j = j;
this.alive = false;
this.survives = false; //Made so not to change alive variabe mid-loop, also controls birthing of new cells
}
update(grid){
//Decide if this.survives is true or not
}
render(size){
//Draw's a rectangle in the cell's location in a color based on this.alive
}
}
And a main.js file:
const h = 800; //Height
const w = 800; //Width
const s = 80; //Size of squares
const rows = Math.floor(h / s);
const cols = Math.floor(w / s);
let cells = new Array(cols);
let isActive = false;
//A p5 function that is called once when the page is sketch is loaded
function setup() {
createCanvas(w, h);
for(let i = 0; i < cols; i++){
cells[i] = new Array(rows);
for(let j = 0; j < rows; j++){
cells[i][j] = new Cell(i, j);
}
}
}
//A p5 function that is called every frame
function draw() {
for(i = 0; i < cols; i++){
for(j = 0; j < rows; j++){
if(isActive === true){
cells[i][j].update(cells);
if(cells[i][j].survives){
cells[i][j] = true;
}else{
cells[i][j] = false;
}
}
cells[i][j].render(s);
}
}
}
When I open the webpage everything renders normally but when I set isActive to true through chromes console I get the following error message:
Uncaught TypeError: cells[i][j].render is not a function
I made sure to add references to everything in index.html, I'm not doing anything fancy with require(). It's all with script tags
Probably because right above it you have:
if(cells[i][j].survives){
cells[i][j] = true; // <--- Overwriting the cell!
}else{
cells[i][j] = false; // <--- Overwriting the cell!
}
You're overwriting your cells with Boolean values, and Booleans don't have a render method.
Maybe you meant?:
if(cells[i][j].survives){
cells[i][j].alive = true;
}else{
cells[i][j].alive = false;
}
Although it should be noted that this should really just be written as:
cells[i][j].alive = cells[i][j].survives;
Im trying to check collision between My (Loc) and CandyLocation. Im getting this error Uncaught TypeError: loc.localToLocal is not a function.
Any idea what I'm doing wrong or how i can fix it?
var loc;
function checkIfeatingFood() {
loc = locations[locations.length - 1];
// for (var j = 0; j < candyLocations.length; j++) {
for (var j = 0; j < answersContainer.children.length; j++) {
var candyLocation = answersContainer.children[j];
candyLocation.alpha = .2;
var pt = loc.localToLocal(100, 0, candyLocation);
console.log(candyLocation.x, candyLocation.y); // the position local to objB
if (candyLocation.hitTest(pt.x, pt.y)) { candyLocation.alpha = 1; }
}
//return false;
}
Are you sure loc is a DisplayObject?
I am making a conways game of life in javascript and having trouble getting my onclick implementation to work. It is supposed to change the life status of the cell when the td is clicked, but instead I am getting an error at my console that says : TypeError: World.tds is undefined.
TLDR: Can't figure out why onclick won't work. World.tds[] is undefined for some reason.
Onclick implementation:
if (table !== null) {
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 20; j++)
World.tds[i][j].onclick = function() {
if (World.tds[i][j].cells.alive) {
World.tds[i][j].cells.alive = false;
} else {
World.tds[i][j].cells.alive = true;
}
};
}
}
Constructor and tds[] filling
var World = function() {
this.h = maxH;
this.w = maxW;
this.tds = [];
};
//generate the world in which the cells move
World.prototype.init = function() {
var row, cell;
for (var r = 0; r < this.h; r++) {
this.tds[r] = [];
row = document.createElement('tr');
for (var c = 0; c < this.w; c++) {
cell = document.createElement('td');
this.tds[r][c] = cell;
row.appendChild(cell);
}
table.appendChild(row);
}
};
Problem Statement - When you trigger the click handler, by that time values of i and j have updated to 20 each and World.tds[20][20] is undefined.
Update your code inside for loop to
(function(i,j) {
World.tds[i][j].onclick = function() {
if (World.tds[i][j].cells.alive) {
World.tds[i][j].cells.alive = false;
} else {
World.tds[i][j].cells.alive = true;
}
};
})(i,j);
I want to build a website in which users can create a new menu tab
the system can identified level of the menu
I have written a simple code, but it is still manual, not automatic.
How do I make automatic leveling?
The menu data is stored in the database data, but the system must have the auto leveling menu.
Code:
<%
dataDB data = new dataDB();
dataMainMenu[] daftarMenu1 = data.getDaftarMenuByLevel1();
dataLinkMenu dataLink = new dataLinkMenu();
dataLinkMenu dataLink2 = new dataLinkMenu();
dataLinkMenu dataLink3 = new dataLinkMenu();
dataLinkMenu dataLink4 = new dataLinkMenu();
dataMainMenu dataMenu1 = new dataMainMenu();
dataMainMenu dataMenu2 = new dataMainMenu();
String []y=new String[daftarMenu.length];
dataDB max = new dataDB();
int a=0;
for(int j=0;j<daftarMenu1.length;j++){
dataMenu2 = daftarMenu1[j];
out.write(dataMenu2.getNama());
dataLinkMenu[] daftarSubMenu = data.getLinkSubMenu(dataMenu2.getId());
if(max.getMaxLevel()!=2){
for (int i = 0; i < daftarSubMenu.length; i++) {
dataLink = daftarSubMenu[i];
out.write(dataLink.getSubMenu());
dataLinkMenu[] daftarSubMenu1 = data.getLinkSubMenu(Integer.parseInt(dataLink.getSubMenu()));
if(max.getMaxLevel()!=3) {
for (int k = 0; k < daftarSubMenu1.length; k++) {
dataLink2 = daftarSubMenu1[k];
out.write(dataLink2.getSubMenu());
dataLinkMenu[] daftarSubMenu2 = data.getLinkSubMenu(Integer.parseInt(dataLink2.getSubMenu()));
if(max.getMaxLevel()!=4) {
for (int l = 0; l < daftarSubMenu1.length; l++) {
dataLink3 = daftarSubMenu2[l];
out.write(dataLink3.getSubMenu());
dataLinkMenu[] daftarSubMenu3 = data.getLinkSubMenu(Integer.parseInt(dataLink3.getSubMenu()));
if(max.getMaxLevel()!=5){
for (int m = 0; m < daftarSubMenu1.length; l++) {
dataLink4 = daftarSubMenu3[l];
out.write(dataLink4.getSubMenu());
}
}
}
}
else{
for (int l = 0; l < daftarSubMenu1.length; l++) {
dataLink3 = daftarSubMenu2[l];
out.write(dataLink3.getSubMenu());
}
}
}
} else {
for (int k = 0; k < daftarSubMenu1.length; k++) {
dataLink2 = daftarSubMenu1[k];
out.write(dataLink2.getSubMenu());
}
}
}
} else {
for (int i = 0; i < daftarSubMenu.length; i++) {
dataLink = daftarSubMenu[i];
out.write(dataLink.getSubMenu());
}
}
out.write("<br>");
}%>
any one can help?