|
I am a total beginner to programming. I want to start with javascript, but there is a problem. My laptop has stopped working and all I have is my smartphone. I still want to learn programming and it will be a while before I get a laptop/pc. Can you suggest ways to learn programming through apps/online, or I am willing to read books as well. What would be the best way to approach this situation Thanks alot
|
|
|
|
|
You can practice js etc using JSFiddle[^] Not sure how well it will work through a smart-phone, and obviously it'll be much harder than with a laptop but probably your best option. I'd also look to see if there was a library or school or some other public institution that had a PC I could use.
|
|
|
|
|
Thanks for your useful information. It is helpful.
|
|
|
|
|
|
You can practice js etc using JSFiddle[^] Not sure how well it will work through a smart-phone, and obviously it'll be much harder than with a laptop but probably your best option. I'd also look to see if there was a library or school or some other public institution that had a PC I could use.
|
|
|
|
|
|
|
This is the code of a hex board game.In this game there are two players RED(user) and BLUE(bot). The one who reaches the opposite end and creates the link without any other color interrupt that player wins.In this game every time RED(user) wins most of the times which is the problem. I want BLUE(not) to be more intelligent by developing its own intelligent decision tree and the chances of RED(user) to be reduced to 10%. Can anyone help me improving my code?
/*CODE STARTS HERE*/
<title>Hex
var r = 20;
var w = r*2*(Math.sqrt(3)/2);
var ctx;
var sel = [-1, -1];
var board = new Array(14);
var hist = [];
var player = 0;
var multiplayer = false;
var active = true;
function drawHexagon(c, x, y, r)
{
c.beginPath();
c.moveTo(x, y-r);
for(var i=0; i<6; i++)
c.lineTo(x+r*Math.cos(Math.PI*(1.5+1/3*i)), y+r*Math.sin(Math.PI*(1.5+1/3*i)));
c.closePath();
c.fill();
c.stroke();
}
function drawPath(c, p)
{
c.lineWidth = 10;
c.beginPath();
c.moveTo((p[0][0]+p[0][1])*w - (p[0][1]-4)*(w/2), (p[0][1]+2)*1.5*r);
for(var i=1; i<p.length; i++)
c.lineTo((p[i][0]+p[i][1])*w - (p[i][1]-4)*(w/2), (p[i][1]+2)*1.5*r);
c.stroke();
}
function getSel(e)
{
var color = ctx.getImageData(e.clientX-20, e.clientY, 1, 1).data;
color[0] -= color[2]==38||color[2]==178 ? 241 : 0;
color[1] -= color[2]==178 ? 220 : (color[2]==38 ? 0 : 140);
if(color[0] >= 0 && color[0] <= 13 && color[1] >= 0 && color[1] <= 13 && (color[2] == 38 || color[2] == 171 || color[2] == 178))
sel = [color[0], color[1]];
else
sel = [-1, -1];
}
function aiMove()
{
var pos;
do
pos = [Math.floor(Math.random()*14), Math.floor(Math.random()*14)];
while(board[pos[0]][pos[1]] != -1);
hist.push([pos[0],pos[1],1]);
board[pos[0]][pos[1]] = 1;
}
function findArr(a, b)
{
for(var i=0; i<a.length; i++)
if(JSON.stringify(a[i]) == JSON.stringify(b))
return i;
return -1;
}
function getConnections(x, y, c, open, closed)
{
var a = [-1, 0, 1, 0, 0, -1, 0, 1, 1, -1, -1, 1];
var ret = [];
for(var i=0; i<6; i++)
if(x+a[i*2] >= 0 && x+a[i*2] < 14 && y+a[i*2+1] >= 0 && y+a[i*2+1] < 14)
if(board[x+a[i*2]][y+a[i*2+1]] == c && findArr(open, [x+a[i*2],y+a[i*2+1]]) == -1 && findArr(closed, [x+a[i*2],y+a[i*2+1]]) == -1)
ret.push([x+a[i*2],y+a[i*2+1]]);
return ret;
}
function checkWin(c)
{
var open = [], openPrev = [], closed = [], closedPrev = [];
for(var a=0; a<14; a++)
{
if(board[c==0?a ][c==0?0:a] == c)
{
open.length = openPrev.length = closed.length = closedPrev.length = 0;
var pathFound = false;
open.push([c==0?a , c==0?0:a]);
openPrev.push(-1);
while(open.length > 0)
{
var u = open[0];
open.splice(0, 1);
var uI = openPrev.splice(0, 1);
closed.push(u);
closedPrev.push(uI);
if(u[c==0?1 ] == 13)
{
pathFound = true;
break;
}
var connections = getConnections(u[0], u[1], c, open, closed);
for(var i=0; i<connections.length; i++)
{
open.push(connections[i]);
openPrev.push(closed.length-1);
}
}
if(pathFound)
{
var path = [];
var u = closed.length-1;
while(closedPrev[u] != -1)
{
path.push(closed[u]);
u = closedPrev[u];
}
path.push([c==0?a , c==0?0:a]);
path.reverse();
active = false;
return path;
}
}
}
return false;
}
function mouseDown(e)
{
getSel(e);
if(active)
{
if(sel[0] != -1 && sel[1] != -1)
{
hist.push([sel[0],sel[1],player]);
board[sel[0]][sel[1]] = player;
if(multiplayer)
player = player==0 ? 1 : 0;
else
aiMove();
draw();
var p0 = checkWin(0), p1 = checkWin(1);
if(p0 != false)
{ drawPath(ctx, p0); alert((multiplayer?"The red player":"You") + " won!"); }
else if(p1 != false)
{ drawPath(ctx, p1); alert((multiplayer?"The blue player":"The computer") + " won!"); }
}
}
}
function mouseMove(e)
{
getSel(e);
if(active)
draw();
}
function draw()
{
ctx.clearRect(0, 0, 850, 600);
ctx.lineWidth = 1;
ctx.fillStyle = "rgb(0,154,172)";
ctx.beginPath();
ctx.moveTo(w*15.65, r);
ctx.lineTo(w*23.5, 24.5*r);
ctx.lineTo(0, r);
ctx.lineTo(w*7.85, 24.5*r);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "rgb(255,0,39)";
ctx.beginPath();
ctx.moveTo(0, r);
ctx.lineTo(w*15.65, r);
ctx.lineTo(w*7.85, 24.5*r);
ctx.lineTo(w*23.5, 24.5*r);
ctx.closePath();
ctx.fill();
var num = 0;
ctx.strokeStyle = "white";
for(var y=0; y<14; y++)
{
for(var x=0; x<14; x++)
{
if(board[x][y] == 0)
ctx.fillStyle = "rgb(255,0,39)";
else if(board[x][y] == 1)
ctx.fillStyle = "rgb(0,154,172)";
else if(x == sel[0] && y == sel[1])
ctx.fillStyle = "rgb(" + (x+(player==0?241 )) + "," + (y+(player==0?0:140)) + "," + (player==0?38:171) + ")";
else
ctx.fillStyle = "rgb(" + (x+241) + "," + (y+220) + ",178)";
drawHexagon(ctx, (x+y)*w - (y-4)*(w/2), (y+2)*1.5*r, r);
num++;
}
}
}
function chgMP()
{
multiplayer = !multiplayer;
player = 0;
init();
}
function undo()
{
if(active)
{
var a;
if(hist.length > 0)
{
a = hist[hist.length-1];
board[a[0]][a[1]] = -1;
hist.pop();
}
if(!multiplayer)
{
a = hist[hist.length-1];
board[a[0]][a[1]] = -1;
hist.pop();
}
player = a[2];
draw();
}
}
function init()
{
for(var i=0; i<14; i++)
{
board[i] = new Array(14);
for(var j=0; j<14; j++)
board[i][j] = -1;
}
hist.length = 0;
active = true;
draw();
}
function load()
{
var canvas = document.getElementById("output");
ctx = canvas.getContext("2d");
document.getElementById("mp").checked = false;
canvas.onmousedown = mouseDown;
canvas.onmousemove = mouseMove;
init();
}
<canvas style="position:absolute; top:0px; left:20px" width="850" height="600" id="output">Canvas not supported...
Multiplayer:
/*CODE ENDS HERE*/
|
|
|
|
|
It has been 12 days since you asked this question here. This is why we have QA sections, to ask programming questions. Please ask a question rather than posting on a discussion forum.
I am not the one who knocks. I never knock.
In fact, I hate knocking.
modified 1-May-18 8:19am.
|
|
|
|
|
Dude I am a first time user and I was not knowing how to use this forum. You don't need to react!
|
|
|
|
|
The question is just as valid here as in QA.
|
|
|
|
|
Member 13735530 wrote: Can anyone help me improving my code?
Not really, since we have no idea what all that code is supposed to do. And, yes, I know you gave an outline of your program above, but it would still take quite a lot of work to fully understand it. These forums are to answer specific technical questions, not to critique people's work; basically people here do not have the time to do such things.
|
|
|
|
|
I'm new to js and I was tempted to give up. But I didn't, so as many of the quora members suggested I started to search for some good resources. I decided to choose books and coding over courses. Right now i'm reading "A smarter way to learn javascript" and I kinda like it the fact that at the end of every chapter there are 20 coding exercise.
Anyway, I found other books that catch my attention and I wonder if they are better. (Obviously i'm a beginner).
You don't know JS series (up e going)
JavaScrip for web developers
JavaScript: the definitive guide
JavaScript: the good parts
Eloquent javascript
|
|
|
|
|
After you have learned the basics of JavaScript, I highly recommend getting a nice book on JQuery, belief me this makes your life much easier.
|
|
|
|
|
If you have a computer/internet, I very highly recommend JavaScript Tutorial[^].
I learned javaScript (and php and using DOM and AJAX and HTML and CSS) from this place. For many tutorials (all free!), they have "Try It" buttons. You see the code. See the results. Can modify the results and see what it does. Better than a book. Gentle bootstrap to functional user in a short time.
| Ravings en masse^ |
|---|
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Hi there,
I have the following Javascript code running on a particular dynaform to update a variable with a computed total of a grid column:
var total = $('#totalVar');
var grid_details = $('#gridVar');
$("form").setOnchange( function() {
var t = grid_details.getSummary("columnVar");
total.setValue( t );
} );
I have designed some Blockchain Application Examples for mobile, but It works fine in desktop browsers but does not work on the mobile application. It fills the variable with the value '[object object]' and does not update when the grid is altered. Any ideas what is going on?
Any help appreciated!!!
Thank you.
|
|
|
|
|
Hello, I am building a JS game that consists of tiles which show a card background when you click on them, I want to make somehow that if two cards have the same image they should disappear from the deck if not they should turn to their back side again, but I am stuck on making them match. Here is my code:
The HTML:
<div class="container">
<header>
<h1> Memory Game
</h1>
</header>
<ul class="deck" id="card-deck">
<li></li>
</ul>
</div>
my Javascript:
<pre>
var masks = ["/images/1.jpg", "/images/2.jpg", "/images/3.jpg", "/images/4.jpg", "/images/12.jpg", "/images/6.jpg", "/images/1.jpg", "/images/2.jpg", "/images/3.jpg", "/images/4.jpg", "/images/12.jpg", "/images/6.jpg", ];
function shuffleMasks(masks) {
for (var i = masks.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = masks[i];
masks[i] = masks[j];
masks[j] = temp;
}
}
function showModal() {
modal.style.display = "block";
$('#closeMe').hide().delay(10000).show('fast')
}
function closeModal() {
modal.style.display = "none";
}
$(document).ready(function () {
window.modal = document.getElementById('myModal');
shuffleMasks(masks);
console.log(masks)
for (var i = 0; i < masks.length; i++) {
$(".deck").append('<div class="card"> <img class="card" src="' + masks[i] + '"/></div>');
}
$(".deck").on('click', '.card', function () {
var cardVisible = $('.card img:visible').length;
if (cardVisible >= 2) $('.card img').hide();
var open = $('img').attr('id', 'open');
$(this).find("img").show()
$(".card").on('click', function () {
var source = $(this).find("img").attr('src')
alert(source);
if (source === source) {
$('.card img').hide();
}
})
})
My last function gets the src of the image and I alert so that I make sure that it get's them, but it dosen't alert once the tile has shown its front image it alerts a bunch of times, and I can't get to make my comparision right, can someone tell me what is the best way to achieve this matching and removing if the images are the same? Thanks in advance
|
|
|
|
|
I'm not sure what you're doing with the images, but I would do this:
Set an attribute on each of your .card elements perhaps called matchNum. (If you have to set this via jQuery you can use the .attr() function)
Then I would use something like this:
var otherSelectedCard = null;
$(".deck").on("click", ".card", function() {
if (otherSelectedCard === this) {
$(this).find("img").hide();
otherSelectedCard = null;
return;
}
if (otherSelectedCard !== null) {
if ($(otherSelectedCard).attr("matchNum").toString() === $(this).attr("matchNum").toString()) {
$(this).hide();
$(otherSelectedCard).hide();
otherSelectedCard = null;
}
else {
$(this).find("img").show();
var thisVar = this, otherSelectedCard2 = otherSelectedCard;
setTimeout(function() {
$(thisVar).find("img").hide();
$(otherSelectedCard2).find("img").hide();
}, 500);
otherSelectedCard = null;
}
}
else {
$(this).find("img").show();
otherSelectedCard = this;
}
});
This is my first time writing jQuery in a while so I probably goofed up somewhere in there. Hope this gives you a general idea of a solution here though 
|
|
|
|
|
I'm learning Javascript.
I'm following some example code on a video.
I've got stuck trying to change some existing code.
The first step I thought would be to identify the object I'm dealing with.
What's the best way of doing this?
I've tried console.dir(document) - but that bring back *everything*.
I know I can drill down further... but I thought I'd ask here before trying anything else.
Thanks.
|
|
|
|
|
|
Richard, thanks for the reply.
I was stuck on a problem.
I couldn't see what I was doing wrong.
I had an ID and in my Javascript I had:
const CIRCLE = document.querySelector('circle');
I'd spent sooo much time trying to figure out what I had done wrong.
So... in the end I thought there must be a way to find all objects/elements on a page?
I had tried
document.querySelectorAll but wasn't sure where to type this (complete newbie... learning JS).
I found the error: I was missing a #
But... I still have my question... how could I drill down and find a specific object that I was having trouble getting the exact details of?
Hope that makes sense.
|
|
|
|
|
|
i think it's just me.
i freaked out after spending hours trying to find where i had gone wrong.
so was looking for a way to find all items on a page and then i could dig down and get the exact text i would need to put in for accessing.
thanks for all ur replies.
|
|
|
|
|
enginestar wrote: thanks for all ur replies.
Happy to help. BTW, using txtspk (ur) here is frowned upon.
|
|
|
|
|
If you want to access everything in the order it is stored in as HTML, use
document.querySelector("html") to get the root html element of the document, and then use the .children array of any element to see what's inside it.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
