so I've been working on this for a few days now. This is what the game is supposed to do:
Using HTML, CSS, JavaScript, jQuery, or Angular code create a matrix 10 X 10 with columns/lanes using numbers and rows using letters to identify the cells. There will be two vehicles that randomly select a cell on the grid for placement. Randomly place ball target (the to acquire) somewhere on the grid. Have the vehicles check each column lane looking for the target. Once all cells have been checked in that lane have them move to another fresh lane that has not been checked. Keep a timer running to show time to acquire the target.
So far I was able to code the grid and the timer. So, what I need help doing, is placing a target/ball on the grid that is static, and then two finders/vehicles are then randomly placed on the grid.Going from left to right, they step through to the next column, until one of the cars is in the same column as the ball. There is a timer that sees how long it takes for one vehicle to land in same column as the ball.
<!DOCTYPE html>
<html>
<head>
<title>Soccer Ball Game</title>
<style>
button {
font-size:40px;
height:50px;
width:50px;
}
.cars{
background-color: green;
}
</style>
</head>
<body onload="createButtons(row, col)">
<div id="buttonArea">
</div>
<input type="button" id="btnNewGame" onClick="findBall()" value="ResetButtons"/></input>
<script>
var col = 10;
var row = 10;
var dCheck = true;
function createButtons(row,col){
var counter = 1;
var element = document.getElementById("buttonArea");
for(countR = 1; countR <= row; countR++){
for(countC = 1; countC <= col; countC++){
var newButton = document.createElement("button");
newButton.setAttribute("id", "btn" + counter);
newButton.setAttribute("type", "button");
newButton.setAttribute("class", "noclass");
element.appendChild(newButton);
counter++;
}
var breakLine = document.createElement("br");
element.appendChild(breakLine);
}
}
function resetButtons(){
var buttons = document.getElementsByTagName("button");
for(var i = 0; i < (buttons.length); i++){
buttons[i].innerHTML = "";
buttons[i].disabled = false;
buttons[i].setAttribute("class", "noclass");
}
}
</script>
</body>
</html>
And here is a timer code:
let timer={};
timer.counter=0;
timer.start=()=>{
timer.ticker=setInterval(()=>{ timer.counter++; },1000);
};
timer.stop=()=>{
clearInterval(timer.ticker);
};
let checker=(callback)={
timer.start();
//check each row in column
//if hit timer.stop();
callback(timer.counter);
};
checker((count)=>{
console.log('it took '+count+' second to hit target');
});
There are a lots of ways that you can use to place a target/ball on the grid buttons, For example, you can use CSS class trick like this:
.ball{
background: URL(ball.png);
}
And then add it to one of your buttons randomly. And for cars, you can use the same trick.
I hope this will help you a little bit but if you something else please correct me.
Related
so I am trying to create a etch-a-sketch and I need to generate multiple divs (i.e. little squares) based on the users input. So for instance the option is how many pixels do you want the grid size to be from 1 - 50 and based on the answer (say 30) I need to make a grid with that many squares on each side. The issue is that I can only get that many squares as a row at the top and not as a grid. Linked is my code and also shown is my javascript code which is the one giving me issues. The HTML/CSS are mostly just styling, but they are shown in the link. I am not sure what I am doing wrong because I am using someone else's code as reference and it seems to work for them, but not for me.
https://codepen.io/faar23/pen/qjZgQY
$(document).ready(function(){
/*for (var i = 0; i < 24; i ++) {
$('#workspace').append('<div class = "row"></div>');
$('.row').height(27);
};*/
/*for now i am going to leave the above code commented out but what it
does is instantly creates 24 boxes on the workspace
and without this, the space is empty. I am commenting it out to see if the
.height function will wor down below...doesnt seem to*/
/*the above loop generates 24 divs dynamically without having to copy paste
in html. the .height sets the height of the divs.
the width is set in the css under myId. this was done using this tutorial
https://www.youtube.com/watch?v=dtgx_twX-a4 + inspecting
the elements on this project https://beachfern.github.io/sketchpad/*/
$('#mainButton').mouseenter(function(){
$('#mainButton').addClass('highlight');
});
$('#mainButton').mouseleave(function(){
$('#mainButton').removeClass('highlight');
});
/*the above code makes the main start button change color when the mouse
enters it*/
$('.buttonhide').hide();
$('#mainButton').click(function(){
$('.buttonhide').show();
});
/*the above code hides the rest of the buttons until the main button is
clicked, then all the buttons show themselves*/
$('#mainButton').on('click', function(){
var workspaceSize = prompt("How many boxes should make up the canvas? (1
to 50)", "24");
/*i am going to use this user's way and see if that works better for me
https://stackoverflow.com/questions/25518243/creating-div-grid-with-
jquery-for-loop*/
if(workspaceSize > 0 && workspaceSize <= 50){
$('#workspace').empty();
for (var i = 0; i < workspaceSize; i++){
$('#workspace').append('<div class = "row"></div>');
};
for (var x = 0; x < workspaceSize; x++){
$('.row').append('<div class = "column"></div>');
};
$('.row').height(700 / workspaceSize);
$('.column').height(700 / workspaceSize);
$('.column').width(700 / workspaceSize);
}; /*very imp closing bracket. shit doesnt work without it*/
});
});
You need to nest the two for loops, so that for each row it creates the columns.
This might work, or lead you in the right direction:
for(var i = 0; i < workspaceSize; i++){
$('#workspace').append('<div class="row" id=row'+i+'></div>');
for(var j = 0; j < workspaceSize; j++){
$('#row'+i).append('<div class="column"></div>')
}
}
I encountered a weird problem with the setInterval method that I really don't get.
So I created a website with 25 boxes and the idea was that clicking on any box would change the backgroundColor of that box for half a second after which it would return to the original color. After that animation finished the next box would change its color for half a second and then go back to the original state. This cycle would continue until it reached the last box.
The code I wrote for that is this:
window.onload = function() {
var box = document.getElementsByClassName("box");
for (i = 0; i < box.length; i++) {
box[i].onclick = starter;
}
}
function starter(eo) {
var box = eo.target;
var counter = eo.target.id;
box.style.backgroundColor = "#1A237E";
setTimeout(cont, 500, counter);
}
function cont(counter) {
var box = document.getElementsByClassName("box");
box[counter].style.backgroundColor = "white";
counter++;
box[counter].style.backgroundColor = "#1A237E";
if (counter < box.length) {
setInterval(cont, 500, counter);
}
}
(All the boxes have the class "box" and are labelled with IDs from 0 to 24)
The code actually executes and is technically working. The weird thing is that after about 8 iterations several boxes start to flash up simultaneously(different boxes for each iteration of the cont() function) and the whole code slows down enormously. This happens regardless of the starting position.
I have no idea where I made a mistake in the code, can someone explain to me white it happens?
Many thanks in advance :)
I have a small requirement. I have a div with three child divs with text. On load the first text will be visible. After 3 seconds the first one hides and second one is visible. After another 3 seconds the second one hides and third one is visible. This continues.
Currently I do not have any animation on the hide of one span and show of another. So it looks kind of murky. White I want is to show some kind of animation as it happens on the windows 8 tiles. Like the text that hides should slide up and disappear and the text that is to be shown should slide in from bottom. the animation should give the user a smooth experience.
I am not using any animation library. Is this possible through javascript / css ? Below is my code. Any idea would be useful.
HTML :
<div class="dataflipping">
<div class="first">FIRST TEXT</div>
<div class="second">SECOND TEXT</div>
<div class="third">THIRD TEXT</div>
</div>
JavaScript:
var srcElement = document.getElementsByClassName("dataflipping");
var elementChld = srcElement.getElementsByTagName("div");
var elementArr = [];
for (counter === 0; counter < elementChld.length; counter++) {
elementArr.push(elementChld[counter]);
}
var elementCount = elementArray.length;
// Set all except first one to hidden initially
for (counter = 1; counter < elementCount; counter++) {
var ele = elementArray[counter];
ele.style.display = "none";
}
counter = 0;
setInterval(function () {
counter++;
var prevElement = null;
var curElement = null;
if (counter === 1) {
var prevElement = elementArr[elementCount - 1];
}
else {
prevElement = elementArr[counter - 2];
}
curElement = elementArr[counter - 1];
prevElement.style.display = "none";
curElement.style.display = "block";
if (counter === elementCount) {
counter = 0;
}
}, 3000);
Girija
IF I understood well. I think easier way is to use MODULO, I wrote something like this:
elementArr[counter%elementCount]
http://jsfiddle.net/t3N4A/
I think you just need to try make position:absolute; and like i change opacity you should change it left/top position, change frequency of setInterval function to make it smoother and make it disappear where u want to. Hope that helped a little.
<!DOCTYPE html>
<html>
<head>
<title>Anti Chess</title>
</head>
<body>
<h1 id="game_title">Anti Chess by theManikJindal</h1>
<br />
<br />
<table id="game"></table>
<script>
var white = 1;
var ta = document.getElementById("game");
if(white == 1)
{
for(var i=0;i<8;i++)
{
var x = document.createElement('tr');
ta.appendChild(x);
for(var j=0;j<8;j++)
{
var y = document.createElement('td');
ta.childNodes[i].appendChild(y);
ta.childNodes[i].childNodes[j].setAttribute("id",String.fromCharCode(j+97)+(8-i).toString());
}
}
}
else
{
for(var i=0;i<8;i++)
{
var x = document.createElement('tr');
ta.appendChild(x);
for(var j=0;j<8;j++)
{
var y = document.createElement('td');
ta.childNodes[i].appendChild(y);
ta.childNodes[i].childNodes[j].setAttribute("id",String.fromCharCode(104-j)+(i+1).toString());
}
}
}
</script>
</body>
</html>
I cannot understand why this script is not working. Are there any good debuggers for Javascript or does one have to keep on smashing their heads against the wall to make some sense.
Please help
The script is supposed to create a table with 8x8 boxes and the attribute id should be set from "a8","b8","c8"..."h8" to "a1","b1","c1"..."h1" . for a when the value of white is 1. And from "h","g1","f1"..."a1" to "h8","g8",..."a8" for white not equal to 1. white =1 is default for now.
Tables must always have at least one <tbody> element. If it does not, the browser will create one.
This means that your entire childNodes access is wrong.
I would suggest this HTML:
<table><tbody id="game"></tbody></table>
That should make your code work, but you can simplify it further:
var white = 1, a = "a".charCodeAt(0), i, j, x, ta = document.getElementById("game");
for(i=0;i<8;i++) {
x = document.createElement('tr');
for(j=0;j<8;j++)
x.appendChild(document.createElement('td')).id =
String.fromCharCode((white == 1 ? j : 8-j)+a)+(white == 1 ? 8-i : i+1);
ta.appendChild(x);
}
As you can see I have eliminated the need for the entire block of code to be repeated, by moving the white == 1 check to the most relevant place. I have also made more use of the x reference, and I have replaced the "magic" values with something that will be easier to understand when you come back to it later (the a variable).
Hope this helps!
EDIT: Also, I just noticed that the table has no content - is this what you mean by it not showing up? Make sure you have suitable CSS to make the table cells visible.
This script is working fine. I have inspcted element in jsfiddle and found that elements are created.
I have used some css to show that boxes have been created.
css
table{
border:1px solid black;
}
table tr, td{
border:1px solid black;
}
see here http://jsfiddle.net/9uHPx/
Java script is working but table is not display.
Add border=1 in Table
Script is working fine. Added a couple loops so the ID will print to in the td tag so you can see what's going on. http://jsfiddle.net/5YRKx/
var tableTemp = document.getElementById("game");
for (var ii = 0, row; row = tableTemp.rows[ii]; ii++) {
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
row.cells[j].innerHTML = row.cells[j].id;
}
}
let me just give a quick story. I have made a page. (VERY simple - two divs with a different background image, see here.)
Anyway, I need to make it so that when a new page loads, the two divs that I have load in a random order over and over, filling the entire screen content. So there's no pattern of the first div and then the second, it's just randomly generated. Sort of like a huge grid, with the two divs repeated with no pattern.
My question is...is that possible? I assume I'd need to know PHP, but I have no knowledge of it.
Thanks guys, I appreciate all help!
http://jsfiddle.net/uYPRq/
jquery
var div1 = '<div class="one">';
var div2 = '<div class="two">';
var len =
Math.floor(window.innerWidth/30)*Math.floor(window.innerHeight/30);
for (x = 0; x < len; x++) {
if ( Math.random() > 0.5 ) {
$(div1).appendTo('body');
}
else {
$(div2).appendTo('body');
}
}
css
div.one, div.two {
height:30px;
width:30px;
float:left;
}
div.one { background-color:#EBE1E4; }
div.two { background-color:#F0F5DF; }
edit:
changed screen.availWidth to window.innerWidth
Something like so? Just loop through how ever many times you like and add elements in.
for (i = 0; i < 300; i++) {
var type1 = document.createElement("div");
var type2 = document.createElement("div");
type1.innerHTML = "div1";
type2.innerHTML = "div2";
type1.setAttribute("class", "type1");
type2.setAttribute("class", "type2");
document.body.appendChild(type1);
document.body.appendChild(type2);
}
No PHP needed. This can be done client-side using Javascript (Jquery might be easier).