I have just started learning OOP in javascript and I am trying to re-write a simple program using OOP that I had previously written as a procedural program. The program is a reaction tester in which a random shape appears on the screen and the user must click it as quickly as possible. After clicking the shape, the time in seconds that it took for the user to respond is displayed.
I have not gotten very far, I am just trying to make a square of random size and random color appear on the screen, but I can't even manage that. See my code below:
<script type="text/javascript">
function Shape () {
this.x = Math.floor(Math.random()*850);
this.y = Math.floor(Math.random()*850);
this.draw();
}
Shape.prototype.draw = function() {
var shapeHtml = '<div></div>';
var widthAndHeight = Math.floor(Math.random()*400);
var left = Math.floor(Math.random()*850);
var top = Math.floor(Math.random()*850);
this.shapeElement = $(shapeHtml);
this.shapeElement.css({
position: "relative",
left: this.left,
top: this.top,
width: widthAndHeight,
height: widthAndHeight,
});
$("body").append(this.shapeElement);
}
Shape.prototype.colour = function() {
var colours = '0123456789ABCDEF'.split('');
var randomColour = "#";
for (i = 0; i < 6; i++) {
randomColour+=colours[Math.floor(Math.random()*16)];
};
this.shapeElement.css({backgroundColor: 'randomColour'});
}
var square = new Shape();
</script
So far, no square will appear on the screen. All that happens is a div of a random size is appended, but it is always in the upper-left position and has no background color. The console is not helping me because it is not showing that there are any errors in my code. I am extremely confused and finding the transition to OOP is extremely confusing. Any help in understanding why this won't work would be extremely appreciated!
Several small errors:
Warning: function Shape sets up x and y properties that are not used.
Error: Shape.prototype.draw defines variables left and top but refers to them as this.left and this.top in the CSS object initializer. As properties they are undefined - take out the two this. qualifiers.
Error: Shape.prototype.colour is not called, so the DIV elements are transparent. Insert a call this.colour() after, say, setting the CSS.
Error: The css initialiser object value for background color should be the variable name, randomColour not the string literal 'randomColour'. Remove the quote marks from around the identifier.
Severe warning: the for loop in the colour function does not declare i and creates it as an implicit global variable. Insert "use strict"; at the beginning of script files or function bodies to generate an error for undeclared variables.
In summary none of the errors generate errors on the console (undefined CSS values are ignored) but work to prevent the code working.
There are number of issues.
1) colour() method is never called.
2) Referring this.top and this.left inside the css construct won't work either.
3) randomColour is a variable, not a string literal.
Fixed the issues and embedded the code here. Have a look.
function Shape () {
this.x = Math.floor(Math.random()*850);
this.y = Math.floor(Math.random()*850);
}
Shape.prototype.draw = function() {
var shapeHtml = '<div></div>';
var widthAndHeight = Math.floor(Math.random()*400);
var left = Math.floor(Math.random()*850);
var top = Math.floor(Math.random()*850);
this.shapeElement = $(shapeHtml);
this.shapeElement.css({
'margin-left': left,
'margin-top': top,
'width': widthAndHeight,
'height': widthAndHeight,
});
$("body").append(this.shapeElement);
}
Shape.prototype.colour = function() {
var colours = '0123456789ABCDEF'.split('');
var randomColour = "#";
for (i = 0; i < 6; i++) {
randomColour+=colours[Math.floor(Math.random()*16)];
};
this.shapeElement.css({backgroundColor: randomColour});
}
$(document).ready(function() {
var square = new Shape();
square.draw();
square.colour();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape</title>
</head>
<body>
<div></div>
</body>
</html>
Related
The difference between the following two spheres - in terms of how their gradient colors were applied, comes down to one statement:
sphereGeometry = sphereGeometry.toNonIndexed();
Being that I really like the smoother look that .toNonIndexed() gives us, I tried applying it to some of the imported “.glb” models available on the THREE.js GIT - but it’s not working.
For example, here’s what happens when I use the horse model available here: https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/Horse.glb
It basically completely ignore my colors and defaults to red and black for some reason.
But when I comment out the .toNonIndexed() line, it gives me the colors I asked for - except you definitely see the triangles, which is the look I'm trying to avoid:
Here's my code for loading the object:
function loadAny3DModel() {
loader.load("./Horse.glb", function(theHorse) {
console.log("===>'theHorse' has arrived!!!\n");
var horseScene = theHorse.scene;
horseMesh = horseScene.children[0];
var horseGeometry = horseMesh.geometry;
let horseMat = horseMesh.material;
var horseVertexPositionsArray = horseGeometry.attributes.position;
// Here's the command that isn't working:
// horseGeometry = horseGeometry.toNonIndexed();
// horseVertexPositionsArray = horseGeometry.attributes.position;
let theColor = new THREE.Color();
let colorsArray = [];
for(let i = 0; i < horseVertexPositionsArray.count; i++) {
let randC1 = "purple";
let randC2 = "white";
let chosenColor = i % 2 == 0 ? randC1 : randC2;
theColor.set(chosenColor);
colorsArray.push(theColor.r, theColor.g, theColor.b);
}
horseGeometry.setAttribute("color", new THREE.Float32BufferAttribute(colorsArray, 3));
horseMat.vertexColors = true;
render();
scene.add(horseScene);
}
}
What should I be doing to get the smoother gradients going?
=====================================================================
UPDATE:
Here is a very rough idea of what I'm trying to do: extend a gradient over an entire model, as opposed to every single triangle that is forming the model. (Compare this image to the one above.)
If you comment in the following line...
horseGeometry = horseGeometry.toNonIndexed();
...it means you create a new (!) geometry. As long as you don't assign the geometry back to Mesh.geometry, this code won't have any effect. So the fix is to add the following line after using toNonIndexed():
horseMesh.geometry = horseGeometry;
I have a page of code in which i want 3 "ghost.png" to be displayed onto a canvas with random coordinates using math.random at a press of a button. Beyond that im also trying to use another function to draw "sac.jpg" onto the canvas aswell as drawing the same ghosts on the same positions as they have been determined by math.random. then in the same function, i want to be able to animate the image "sac.png" using the arrow keys on the keyboard without making the ghost image move along with it. With this goal, i tried to create a code but it does not seem to work. can someone explain?
recap:
function hasard (activates when button is pressed):
a) math.random 6 times to choose x,y coordinates of 3 of the same image
b) place the image in a variable
function dessiner (activates when arrow key is pressed):
a) draw background
b) draw the image from function hasard in the same spot each time until i press the button from the first function to randomize a new pair of coordinates.
c) draw the image "sac.gif" and program it to be able to move using arrow keys.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Jeu.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border-color: 'black'; border-width: 3px; border-style: solid">
</canvas>
<br>
<button type="button"onclick="hasard()"><img src="start.jpg"></button>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var x;
var y;
var x1;
var y1;
var x2;
var y2;
var ghost = new Image();
ghost.src = "ghost.png";
function hasard(){
x = 32 +(Math.random() * (400-64));
y = 32 +(Math.random() * (400-64));
x1 = 32 +(Math.random() * (400-64));
y1 = 32 +(Math.random() * (400-64));
x2 = 32 +(Math.random() * (400-64));
y2 = 32 +(Math.random() * (400-64));
contexte.drawImage(ghost,x,y,60,60)
contexte.drawImage(ghost,x1,y1,60,60)
contexte.drawImage(ghost,x2,y2,60,60)
};
var bg = new Image();
bg.src = 'haunted.jpg';
var sac = new Image();
sac.src = "sac.gif";
var a=100;
var b=100;
var dx=0;
var dy=0;
T_fleche_gauche = 37;
T_fleche_droite = 39;
T_fleche_haut = 38;
T_fleche_bas = 40;
document.onkeydown = miseAJourTouche;
function miseAJourTouche(e){
toucheCourante = e.keyCode;
if (toucheCourante == T_fleche_gauche){
dx= -1;
dy=0;
draw(dx,dy);
}
if (toucheCourante == T_fleche_droite){
dx= 1;
dy=0;
draw(dx,dy);
}
if (toucheCourante == T_fleche_haut){
dy= -1;
dx=0;
draw(dx,dy);
}
if (toucheCourante == T_fleche_bas){
dy= 1;
dx=0;
draw(dx,dy);
}
}
function dessiner(x,y){
bg.addEventListener('load', function() {
contexte.drawImage(bg, 100, 20, 200, 200);
image.onload = function(){
contexte.drawImage(ghost,x,y,60,60)
contexte.drawImage(ghost,x1,y1,60,60)
contexte.drawImage(ghost,x2,y2,60,60)
image.onload = function(){
context.drawImage(sac, 0, 0, 70,90);
context.translate(10+a,10+b);
a = a+dx;
b = b+dy;
if (a > 400) a = -80; if (a <-80) a = 400;
if (b > 400) b = -40; if (b <-40) b = 400;
}
window.requestAnimFrame(function() { dessiner(dx,dy) });
}
dessiner();
};
</script>
</body>
</html>
From what I can tell, you are trying to animate ghosts and bag, with the bag being the player controllable item.
While I can't debug the program for you, I can help telling you to use the dev tools of your browser. F12 or Fn + F12 will bring you to the Inspector, where one of the other tabs is console.
Now, in your program, I see you assign image.onload to two functions, with one of them missing a closing curly brace.
image.onload = function(){
contexte.drawImage(ghost,x,y,60,60)
contexte.drawImage(ghost,x1,y1,60,60)
contexte.drawImage(ghost,x2,y2,60,60)
image.onload = function(){
context.drawImage(sac, 0, 0, 70,90);
context.translate(10+a,10+b);
a = a+dx;
b = b+dy;
if (a > 400) a = -80; if (a <-80) a = 400;
if (b > 400) b = -40; if (b <-40) b = 400;
}
I would add a curly brace after the three calls to contexte.drawImage, but I question the choice for two assignments. Also, I don't think image is declared in this scope, but I might be wrong. That's all I see.
If I understand well, you want to draw 3 ghosts with random positions, and a bag also at a random position, and would like to be able to move it with the arrow keys, is that right?
Then, I may suggest several things:
Don't put the update and drawing codes together. You have a drawing function dessiner(x, y) but you also draw in the hasard() and miseAJourTouche(e) functions. This makes things confusing and doesn't help debugging.
Factorize more: for example, in your hasard() function, you makes the calculations 32 +(Math.random() * (400-64)); 6 times. Instead, you could use a function to generate a random number between two values, then initialize your values in an init() function. You can initialize all the variables inside as well as load your images. Depending on what you aim to make, you could also use objects, like a Ghost object that would initialize its coordinates, with its own draw() method, etc. It could be much simpler for the rest.
Be consistent: if you put spaces before and after a +, then do it all the time. Don't use multiple languages inside the same code, you used both English and French (and English makes things easier when asking for help). Also, you can use a tool such as your IDE beautifier function or an online one (I used https://beautifier.io/) to make your code more readable or spot typing issues, like missing curly braces.
I took the liberty of refactoring your code a bit: https://jsfiddle.net/nmerinian/t0c3sh8f/4/
Notes:
I didn't write any condition to prevent the refresh if no key is
pressed, but it's easy to add.
I commented the background drawing part since I don't have the image.
I also commented some variables I didn't use.
I hope this helps.
I'm trying to make a drag and drop, but it's been giving me a bunch of issues. I fix one and another comes up. I had it working where it would see if any part of my drag object entered a target area, but I wanted it to just recognize one part (it's graphic of a pointy thermometer, and you can't measure temperature with the head in real life) demo here.
The error I'm getting is that "Uncaught TypeError: Cannot read property 'drag' of undefined" (I labeled 'drag' on the demo, but its a child movieclip inside the drag object)
also, 'thermometer' and 'drag' are both named instances of movieclips.
The Code:
var dragger = this.thermometer;
//tried this to see if it would help
var tip = this.thermometer.drag;
var right = this.targetRight;
var wrong = this.targetWrong;
For moving it:
dragger.on("pressmove", function(evt){
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
if(intersect(tip, right)){
evt.currentTarget.alpha=0.2;
}
else if(intersect(tip, wrong)){
evt.currentTarget.alpha=0.7;
}
else{
evt.currentTarget.alpha=1;
}
stage.update(evt);
}, this);
For releasing it
dragger.on("pressup", function(evt){
//lock position of drag object and play animation if any
dragger.x = dragger.x;
dragger.y = dragger.y;
if(hitTestArray.length > 1){
dragger.alpha = 1;
stage.update(evt);
}//else{
if(intersect(tip, right)){ //Intersection testing for good (also tried 'dragger.drag' to see if that would work. it didn't)
alert("YAY you're right AND it works!");
dragger.alpha = 1;
}else if(intersect(tip, wrong)){ //intersection Testing for bad
alert("BOO its wrong, but YAY it works");
dragger.alpha = 1;
}
stage.update(evt);
//}
}, this);
UPDATED INTERSECT:
for testing intersection.
function intersect(obj1, obj2){
var objBounds1 = obj1.nominalBounds.clone();
var objBounds2 = obj2.nominalBounds.clone();
var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);
var h1 = -(objBounds1.height / 2 + objBounds2.height);
var h2 = objBounds2.height / 2;
var w1 = -(objBounds1.width / 2 + objBounds2.width);
var w2 = objBounds2.width / 2;
if(pt.x > w2 || pt.x < w1) return false;
if(pt.y > h2 || pt.y < h1) return false;
return true;
}
To sum up, I need to know how to make it not undefined so that I can test for that little box being in one of the big boxes.
The error is happening because you used this.currentTarget instead of evt.currentTarget on that one line.
Note that your actual code is not the same as the code you posted above. Here is the code in the live demo:
if(intersect(this.currentTarget.drag, right)){
evt.currentTarget.alpha=0.2;
} else if(intersect(this.currentTarget.drag, wrong)){
evt.currentTarget.alpha=0.7;
}
else{
evt.currentTarget.alpha=1;
}
Not sure if this will solve all your issues, but it should at least get you moving forward.
[UPDATE]
Looking a little deeper, there a number of issues that are likely contributing to your intersect function not working:
Your right/left bounds are not correct. EaselJS objects do not have a width or height (more info), so the bounds you set just have an x and y.
You can use nominalBounds to get the proper bounds. This provides the untransformed, original bounds of the symbol. You will have to account for any scaling. In this case, the bounds are:
* left: {x: 0, y: 0, width: 275, height: 300}
* right: {x: 0, y: 0, width: 413, height: 430}
Your intersection will have to consider the display list hierarchy. Specifically, when comparing position and size, they should be relative to each other. If your drag target is positioned inside another clip, it will need to consider the parent positioning. I recommend always doing localToGlobal on coordinates when comparing them.
Example:
// Find the clip's top/left position in the global scope
var p = myContainer.localToGlobal(myClip.x, myClip.y);
// OR
// Find the clip's position in the global scope
var p = myClip.localToGlobal(0, 0);
Good day!
I'm here to ask help about dynamic variable names in Javascript applied to a constructor. It's been much more difficult than expected. I've read about this issue in numerous forums and webpages but I can't find what I'm doing wrong =/
I'm using a HTML5+Javascript library called EaselJS but my problem it's not related to it but to Javascript syntaxis!
Here's my problem. I got this code:
stage1 = new Stage(document.getElementById("cnvs1"));
stage2 = new Stage(document.getElementById("cnvs2"));
stage3 = new Stage(document.getElementById("cnvs3"));
Here, the variables stage have assigned an Stage object which is initialized with canvas id cnvs This line (in the context of the rest of my code) works!
I'd like to simplify this to a single line with a for like this:
for(i = 0; i < 5; i++){
//Of course this is wrong!
stage[i] = new Stage(document.getElementById("cnvs[i]"));
}
This link here resumes how this can be done: With eval (a lot of people say it's not recommendable) and with window (recommended) Then if I do this (without the for to simplify even more):
var varname = "stage";
var i = 1;
window[varname + i] = new Stage(document.getElementById("cnvs_terminal1"));
The code still works. But I can't figure out how to accomplish a similar solution with the canvas id in quotes. These lines of code fail:
var i = 1;
var varname = "stage";
var varname2 = 'cnvs1';
var varname3 = "\"cnvs1\"";
var varname4 = "\"cnvs1" + i + "\"";
window[varname +i] = new Stage(document.getElementById(window[varname2]));
window[varname +i] = new Stage(document.getElementById(window[varname3]));
window[varname +i] = new Stage(document.getElementById(window[varname4]));
In these attempts even trying to pass the exact value I need (without the i) it's not helping me!! I'm backslashing quotes because I think they are necessary for the getElementbyId=( =( =(
Now I'm clueless! =(
I'm certain there is a way to do this, maybe I don't know the syntax, maybe I don't know how to call variables with reference or by value properly, I don't know...
Please help me, I don't know how to do this simple task!
THANKS A LOT =)
EDIT:
Trying #cHao suggestion I can't do it either! Keeping it simple, I set the for for i to be one only:
for (var i = 1; i <= 1; ++i) {
//I use only one of the following lines at a time of course, but I'll write here my failing tries all together:
stage[i] = new Stage(document.getElementById('cnvs'+i));
stage[i-1] = new Stage(document.getElementById('cnvs'+i));
//Hardcoding the first variable works!
stage1 = new Stage(document.getElementById('cnvs'+i));
}
Half of the problem it's solved, but what to do with the first variable? =/ THANKS!!!!
EDIT 2:
More detail has been requested! Here's a copy/paste example! Just update the EaselJS and an image paths for this to work!
<!DOCTYPE HTML>
<html>
<head>
<script src="easeljs-0.4.0-26/lib/easel.js"></script>
<script type="text/javascript">
function init() {
//MY PROBLEM LIES HERE!!
for (var i = 1; i <= 1; ++i) {
//This code WORKS
stage1 = new Stage(document.getElementById('cnvs'+i));
//This code DOES NOT WORKS
//stage[i] = new Stage(document.getElementById('cnvs'+i));
//stage[i-1] = new Stage(document.getElementById('cnvs'+i));
}
var images = "images/itzapic.jpg";
bitmap = new Bitmap(images);
stage1.addChild(bitmap);
stage1.update();
Ticker.addListener(window);
}
function tick() {
stage1.update();
}
</script>
</head>
<body onload="init()">
<canvas id="cnvs1" width="140" height="82">
</body>
</html>
___________________________________________
EDIT 3: SOLVED!
I'll post the final code for reference to someone who want to use EaselJS to render a single image in as many canvases as needed with the same object. For this you'll need the bitmap.clone() method and arrays for the stages. Thanks to #cHao for helping me out ;)
The following code will render the same image in all canvases! Update as necessary ;)
<!DOCTYPE HTML>
<html>
<head>
<script src="easeljs-0.4.0-26/lib/easel.js"></script>
<script type="text/javascript">
stage = [];
function init() {
for (var i = 1; i <= 6; ++i) {
stage[i-1] = new Stage(document.getElementById('cnvs'+i));
}
var images = "images/itzapic.jpg";
bitmap = new Bitmap(images);
stage[0].addChild(bitmap);
for (var i = 1; i <= 5; ++i) {
stage[i].addChild(bitmap.clone());
}
stage[0].update();
Ticker.addListener(window);
}
function tick() {
for (var i = 0; i < stage.length; ++i) {
stage[i].update();
}
}
</script>
</head>
<body onload="init()">
<canvas id="cnvs1" width="140" height="82"></canvas>
<canvas id="cnvs2" width="140" height="82"></canvas>
<canvas id="cnvs3" width="140" height="82"></canvas>
<canvas id="cnvs4" width="140" height="82"></canvas>
<canvas id="cnvs5" width="140" height="82"></canvas>
<canvas id="cnvs6" width="140" height="82"></canvas>
</body>
</html>
Not sure i get the point of eval'ing or pre-figuring variable names and all that. Seems like you could just do like
for (var i = 1; i <= 5; ++i) {
stage[i] = new Stage(document.getElementById('cnvs' + i));
}
window["varname"] won't help unless varname is global, and...eh. You'll want to avoid globals if you can. Either way, you don't need to escape quotes -- you don't need quotes in the name itself at all unless your IDs have quotes in them (which, AFAIK is invalid anyway) or you're eval'ing (which is evil in itself).
If you're looking to put the stages into an array (which seems like a better goal), you'll want your first stage to be stage[0]. In which case, set stage[i-1] instead of stage[i].
And if you're trying to set stage1, stage2, etc...stop. Don't do that. You have a bunch of items, that you're treating alike...that's the kind of thing arrays were meant for. For one thing, notice how much easier it is to work with array elements than similarly-named variables? I wasn't even seeing the issue, because with arrays it's already a non-issue.
As for your code...watch this.
stage = [];
function init() {
for (var i = 1; i <= 1; ++i) {
stage[i-1] = new Stage(document.getElementById('cnvs'+i));
}
var images = "images/itzapic.jpg";
bitmap = new Bitmap(images);
stage[0].addChild(bitmap);
stage[0].update();
Ticker.addListener(window);
}
function tick() {
for (var i = 0; i < stage.length; ++i) {
stage[i].update();
}
}
Once we switch from the stage1 stage2 brokenness to using an array, now we can have as many stages as we want.
I think you want this:
var stagePrefix = 'stage';
var canvasPrefix = 'cnvs';
//adjust loop below based on your naming e.g. do they start at 0 or 1?
for(var i=1;i<5;i++){
window[stagePrefix + i] = new Stage(document.getElementById(canvasPrefix + i));
}
Rather than using an id with a numeric suffix to reference your canvases, I'd get them by tag name:
var canvases = document.getElementsByTagName("canvas");
Or, if you only want to process a certain set of the canvas elements on the page, give them a class:
var canvases = document.getElementsByClassName("cnvs");
Then, to get an Array of stages from your canvases, hijack the Array.map()* method:
var stages = [].map.call(canvases, function(canvas) {
return new Stage(canvas);
});
*Array.map() is new to JS5, but if your browser supports <canvas> it supports JS5. Regardless, here's the link to an implementation of Array.map() you can use to support older browsers, in case you do have to support older browsers and you aren't already using a JS5 shim.
i'm new to javascript and i'm having a problem. I want the actual (function updateBoxes) box [boxIx] to be bigger than the other ones but i can't seem to find a code that works. i've tried box[boxIx].size ="100px"; box[boxIx].style.size ="100px"; without result. This is my code;
function init() {
box = document.getElementById("boxes").getElementsByTagName("div");
for (var i=0; i<box.length; i++) {
box[i].style.left = 70*i+"px";
} // End for
boxIx = box.length - 8;
updateBoxes();
} // End init
function browseLeft() {
if (boxIx > 0) boxIx = boxIx - 1;
updateBoxes();
}
// End browseLeft
function browseRight() {
if (boxIx < box.length-1) boxIx = boxIx + 1;
updateBoxes();}
// End browseRight
**function updateBoxes() {
box[boxIx].style.backgroundColor ="#CCC";
box[boxIx].style.top = "20px";
box[boxIx].style.zIndex = 9;**
var z = 8;
for (var i=boxIx-1; i>=0; i--) {
box[i].style.backgroundColor ="#666";
box[i].style.top = "0px";
box[i].style.zIndex = z;
z = z - 1;
} // End for
z = 8;
for (var i=boxIx+1; i<box.length; i++) {
box[i].style.backgroundColor = "#666";
box[i].style.top = "0px";
box[i].style.zIndex = z;
z = z - 1;
} // End for
} // End browseLeft
As thirtydot pointed out, you have two instances of "**" in your sample code that I've removed in the assumption that this is a markdown glitch when editing.
Your example shows only the JavaScript code. The HTML markup and CSS styling you're using would be most helpful. I've created a fiddle for discussion and to resolve this for you here: http://jsfiddle.net/bhofmann/zkZMD/
A few things I noticed that might be helpful:
You're using a magic number 8 in a few places. Can we assume this is the number of boxes? I would store that in a variable for use in the functions.
You used a lot of direct styling. Your code might be cleaner if you used CSS classes to alter the appearance of the boxes.
Unless you're altering the default styling of DIV, you won't see much change by simply setting the left offset.
PS. I took the liberty of invoking the init function on page load because I saw nothing else to invoke it. I don't know what would invoke browseLeft and browseRight but I'll leave that to you.