I have a following code (if input 'u' - works fine, but others not working properly).
If you have problems like 'cannot read property of null' - it's problem with snippet posting, on my browser-side I don't have problems like this.
Main problem - for example - if you enter 5 and 'd' then - it says 'you cant step here'. But you can! It seems like an IF statement set nice.
window.onload = function core () {
let platform = document.createElement('div');
platform.setAttribute('id','platform');
document.body.appendChild(platform);
let count = 0;
for (let i=1; i<101; i++) {
let grid = document.createElement('button');
grid.setAttribute('id',i);
grid.setAttribute('class','eachGridBlock');
document.getElementById('platform').appendChild(grid);
count++;
if (count === 10) {
let newLine = document.createElement('br');
document.getElementById('platform').appendChild(newLine);
count = 0;
};
};
let defaultPosition = 1;
document.getElementById(defaultPosition).setAttribute('class','focusedBlock');
let nowPosition = prompt('where am I? (number)');
let userInput = prompt('where to go? (up, down, left, right)');
document.getElementById(defaultPosition).setAttribute('class','eachGridBlock');
document.getElementById(nowPosition).setAttribute('class','focusedBlock');
if (userInput === 'd') {
if (nowPosition >= 91) {
alert('you cant step here');
} else {
let nextPosition = nowPosition + 10;
document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
document.getElementById(nextPosition).setAttribute('class','focusedBlock');
};
};
if (userInput === 'u') {
if (nowPosition <= 10) {
alert('you cant step here');
} else {
let nextPosition = nowPosition - 10;
document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
document.getElementById(nextPosition).setAttribute('class','focusedBlock');
};
};
if (userInput === 'l') {
if (nowPosition === 1 || nowPosition === 11 || nowPosition === 21 || nowPosition === 31 || nowPosition === 41 || nowPosition === 51 || nowPosition === 61 || nowPosition === 71 || nowPosition === 81 || nowPosition === 91) {
alert('you cant step here');
} else {
let nextPosition = nowPosition - 1;
document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
document.getElementById(nextPosition).setAttribute('class','focusedBlock');
};
};
if (userInput === 'r') {
if (nowPosition === 10 || nowPosition === 20 || nowPosition === 30 || nowPosition === 40 || nowPosition === 50 || nowPosition === 60 || nowPosition === 70 || nowPosition === 80 || nowPosition === 90 || nowPosition === 100) {
alert('you cant step here');
} else {
let nextPosition = nowPosition + 1;
document.getElementById(nowPosition).setAttribute('class','eachGridBlock');
document.getElementById(nextPosition).setAttribute('class','focusedBlock');
};
};
};
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#plarform {
width: 500px;
height: 500px;
background-color: #222222;
}
.eachGridBlock {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
background-color: #000044;
border: 0;
}
.focusedBlock {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
background-color: #9900ff;
border: 0;
}
</style>
<script type="text/javascript" src="./core.js"></script>
</head>
<body>
</body>
</html>
Related
I am very new to JavaScript and HTML and CSS. I have read through my code multiple times and I can't seem to figure out what makes it not work. It is not returning any errors, but it's not working as expected. I'm trying to get a square on the screen to move on the press of WASD. I got the square to appear but nothing happens when WASD is pressed. I feel like the solution must be simple but I can't figure it out.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body onkeypress="move(event)">
<style>
#block {
width: 50px;
height: 50px;
background-color: #555;
margin-top: 0px;
margin-left: 0px;
}
</style>
<div id="block"class="block"></div>
<script>
var blockX = 0;
var blockY = 0;
var keyPressed = 0;
function move(event) {
keyPressed = event.keyCode;
if (keyPressed === 87 || 83) {
moveY();
}
else if (keyPressed === 65 || 68) {
moveX();
}
}
function moveX() {
if (keyPressed === 65) {
blockX -= 3;
document.getElementById("block").style.marginLeft = blockX + "px"
}
else if (keyPressed === 68) {
blockX += 3
document.getElementById("block").style.marginLeft = blockX + "px"
}
}
function moveY() {
if (keyPressed === 87) {
blockY += 3;
document.getElementById("block").style.marginTop = blockY + "px"
}
else if (keyPressed === 83) {
blockY -= 3;
document.getElementById("block").style.marginTop = blockY + "px"
}
}
</script>
</body>
</html>
You need to compare the keyPressed variable like this
(keyPressed === 87 || keyPressed === 83)
Also, you can listen for a keydown event using the following function:
document.addEventListener("keydown", function(event) {
move(event)
});
var blockX = 0;
var blockY = 0;
var keyPressed = 0;
function move(event) {
keyPressed = event.keyCode;
if (keyPressed === 87 || keyPressed === 83) {
moveY();
} else if (keyPressed === 65 || keyPressed === 68) {
moveX();
}
}
function moveX() {
if (keyPressed === 65) {
blockX -= 3;
document.getElementById("block").style.marginLeft = blockX + "px"
} else if (keyPressed === 68) {
blockX += 3
document.getElementById("block").style.marginLeft = blockX + "px"
}
}
function moveY() {
if (keyPressed === 87) {
blockY += 3;
document.getElementById("block").style.marginTop = blockY + "px"
} else if (keyPressed === 83) {
blockY -= 3;
document.getElementById("block").style.marginTop = blockY + "px"
}
}
#block {
width: 50px;
height: 50px;
background-color: #555;
margin-top: 0px;
margin-left: 0px;
}
<div id="block" class="block"></div>
I have a trouble: when button onclicked, I need to return position of a block and hold it till next onclick. On next click, I need to take position and change it again and hold its number. And make it for eternity xD. But I've done something wrong. Please help.
And one thing more: I need to make a reset position by clicking reset button. Reset must be to the 1.
window.onload = function core() {
// creating elements
let platform = document.createElement('div');
platform.setAttribute('id', 'platform');
document.body.appendChild(platform);
let up = document.createElement('button');
up.setAttribute('id', 'up');
up.setAttribute('class', 'actionButton');
document.body.appendChild(up);
document.getElementById('up').innerHTML = 'up';
let down = document.createElement('button');
down.setAttribute('id', 'down');
down.setAttribute('class', 'actionButton');
document.body.appendChild(down);
document.getElementById('down').innerHTML = 'down';
let left = document.createElement('button');
left.setAttribute('id', 'left');
left.setAttribute('class', 'actionButton');
document.body.appendChild(left);
document.getElementById('left').innerHTML = 'left';
let right = document.createElement('button');
right.setAttribute('id', 'right');
right.setAttribute('class', 'actionButton');
document.body.appendChild(right);
document.getElementById('right').innerHTML = 'right';
let reset = document.createElement('button');
reset.setAttribute('id', 'reset');
reset.setAttribute('class', 'actionButton');
document.body.appendChild(reset);
document.getElementById('reset').innerHTML = 'reset';
// binding platform
let count = 0;
let defaultPosition = 1;
for (let i = 1; i < 101; i++) {
let grid = document.createElement('button');
grid.setAttribute('id', i);
grid.setAttribute('class', 'eachGridBlock');
document.getElementById('platform').appendChild(grid);
count++;
if (count === 10) {
let newLine = document.createElement('br');
document.getElementById('platform').appendChild(newLine);
count = 0;
};
};
// waiting for action
document.getElementById(defaultPosition).setAttribute('class', 'focusedBlock');
console.log(defaultPosition);
document.getElementById('up').onclick = function() {
processUp(defaultPosition)
};
document.getElementById('down').onclick = function() {
processDown(defaultPosition)
};
document.getElementById('left').onclick = function() {
processLeft(defaultPosition)
};
document.getElementById('right').onclick = function() {
processRight(defaultPosition)
};
document.getElementById('reset').onclick = function() {
processReset(defaultPosition)
};
// action functions
function processUp(positionX) {
let nowPosition = positionX;
if (nowPosition <= 10) {
alert('you cant step here');
} else {
let nextPosition = nowPosition - 10;
document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock');
document.getElementById(nextPosition).setAttribute('class', 'focusedBlock');
positionX = nextPosition;
};
console.log(positionX);
return positionX;
};
function processDown(positionX) {
let nowPosition = positionX;
if (nowPosition >= 91) {
alert('you cant step here');
} else {
let nextPosition = nowPosition + 10;
document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock');
document.getElementById(nextPosition).setAttribute('class', 'focusedBlock');
positionX = nextPosition;
};
console.log(positionX);
return positionX;
};
function processLeft(positionX) {
let nowPosition = positionX;
if (nowPosition === 1 || nowPosition === 11 || nowPosition === 21 || nowPosition === 31 || nowPosition === 41 || nowPosition === 51 || nowPosition === 61 || nowPosition === 71 || nowPosition === 81 || nowPosition === 91) {
alert('you cant step here');
} else {
let nextPosition = nowPosition - 1;
document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock');
document.getElementById(nextPosition).setAttribute('class', 'focusedBlock');
positionX = nextPosition;
};
console.log(positionX);
return positionX;
};
function processRight(positionX) {
let nowPosition = positionX;
if (nowPosition === 10 || nowPosition === 20 || nowPosition === 30 || nowPosition === 40 || nowPosition === 50 || nowPosition === 60 || nowPosition === 70 || nowPosition === 80 || nowPosition === 90 || nowPosition === 100) {
alert('you cant step here');
} else {
let nextPosition = nowPosition + 1;
document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock');
document.getElementById(nextPosition).setAttribute('class', 'focusedBlock');
positionX = nextPosition;
};
console.log(positionX);
return positionX;
};
function processReset(positionX) {
let nowPosition = positionX
let nextPosition = 1;
document.getElementById(nowPosition).setAttribute('class', 'eachGridBlock');
document.getElementById(nextPosition).setAttribute('class', 'focusedBlock');
return positionX;
};
};
* {
margin: 0;
padding: 0;
}
#plarform {
width: 500px;
height: 500px;
background-color: #222222;
}
.eachGridBlock {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
background-color: #000044;
border: 0;
}
.focusedBlock {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
background-color: #9900ff;
border: 0;
}
.actionButton {
border: 0;
width: 100px;
height: 35px;
background-color: #999999;
color: #222222;
outline: none;
}
.actionButton:hover {
background-color: #dddddd;
}
<html>
<head>
</head>
<body>
</body>
</html>
You need to update defaultPosition when you call the functions, e.g.
document.getElementById('right').onclick = function() {
defaultPosition = processRight(defaultPosition)
};
I was trying to find a way to remove a letter (A,B,C) when I click three times on a button, I tried to use delete, because I don't want to use splice, because splice will change the order of the array. I want the variables letterA, letterB and letterC to keep their position on the array. What I was looking for was something like: if (randomletters == undefined) do math.random again, until it gets something different to undefined, maybe using a while.
I tried, but it doesn't seem to work. Do you have any solution for my problem? Please don't use jQuery, just normal JS.
var A = 0;
var B = 0;
var C = 0;
function incrementA() { A++; }
function incrementB() { B++; }
function incrementC() { C++; }
var letters = new Array()
letters[0] = 'letterA'
letters[1] = 'letterB'
letters[2] = 'letterC'
var randomletter;
function random() {
if (A == 3) { delete letters[0]; }
if (B == 3) { delete letters[1]; }
if (C == 3) { delete letters[2]; }
if ((A == 0 || A == 3) && (B == 0 || B == 3) && (C == 0 || C == 3)) {
randomletter = Math.floor(Math.random() * (letters.length));
if (randomletter == undefined) {
do {
randomletter = Math.floor(Math.random() * (letters.length));
} while(randomletter != undefined)
}
document.getElementById('text').innerHTML = letters[randomletter];
}
}
#green {
height: 20px;
width: 20px;
background: green;
}
#text {
height: 200px;
width: 200px;
background: yellow;
}
<div id="text" onclick="random()"> </div>
<button id="green" onclick="incrementA()">A </button>
<button id="green" onclick="incrementB()">B </button>
<button id="green" onclick="incrementC()">C </button>
You implemented the wrong comparison operator, and need to check the element, not the index.
your random() function should be something like:
function random() {
if (A == 3) { delete letters[0]; }
if (B == 3) { delete letters[1]; }
if (C == 3) { delete letters[2]; }
if ((A == 0 || A == 3) && (B == 0 || B == 3) && (C == 0 || C == 3)) {
do {
randomletter = Math.floor(Math.random() * (letters.length));
} while (letters[randomletter] == undefined)
document.getElementById('text').innerHTML = letters[randomletter];
}
}
The do-while ensures that randomletter is set once, then keeps setting it if the chosen value is undefined. You might want to add a check for "at least one element is valid" before the do-while begins or you could have an infinite loop scenario.
For example:
if (A > 2 && B > 2 && C > 2) {
// all elements of letters are undefined
} else if ((A == 0 || A == 3) && (B == 0 || B == 3) && (C == 0 || C == 3)) {
// do-while loop, because at least one element is valid
}
so I've spent a lot of time making this code, it works, but the only bug that I can't fix is to make it circling repeatedly. Could anyone give some suggestion about the problem and it's solution?
<h1 id="heading">Hello</h1>
var offsetLeft = 0;
var offsetTop = 0;
var offsetLeftReverse = 200;
var offsetTopReverse = 200;
var moveHeading = function () {
$("#heading").offset({ left: offsetLeft, top: offsetTop});
if(offsetLeft < 200){
offsetLeft++;
} else if (offsetTop < 200){
offsetTop++;
}
};
var moveHeadingReverse = function () {
$("#heading").offset({ left: offsetLeftReverse, top: offsetTopReverse});
if(offsetLeftReverse > 0 ){
offsetLeftReverse--;
} else if (offsetTopReverse > 0){
offsetTopReverse--;
}
};
var engine = function () {
if ( (offsetTop === 0 && offsetLeft <= 200) || (offsetTop < 200 && offsetLeft === 200) ){
moveHeading();
}
else if ( (offsetTopReverse === 200 && offsetLeftReverse <= 200) || (offsetTopReverse <= 200 && offsetLeftReverse === 0) &&
( offsetTopReverse != 0 || offsetLeftReverse != 0 ) ){
moveHeadingReverse();
console.log("reverse");
console.log(offsetTopReverse,offsetLeftReverse);
}
}
var start = setInterval(engine, 5);
try this: You have to handle the case where the offsets are 0 , then reset your variables to start state and then call engine again (that did the intervall for you):
var engine = function () {
if ( (offsetTop === 0 && offsetLeft <= 200) || (offsetTop < 200 && offsetLeft === 200) ){
moveHeading();
}
else if ( (offsetTopReverse === 200 && offsetLeftReverse <= 200) || (offsetTopReverse <= 200 && offsetLeftReverse === 0) &&
( offsetTopReverse != 0 || offsetLeftReverse != 0 ) ){
moveHeadingReverse();
console.log("reverse");
console.log(offsetTopReverse,offsetLeftReverse);
} else if ( offsetTopReverse === 0 && offsetLeftReverse === 0) {
offsetLeft = 0;
offsetTop = 0;
offsetLeftReverse = 200;
offsetTopReverse = 200;
}
}
check out the fiddle: https://jsfiddle.net/yfp9f70g/
Rps game code isn't working. My battle function is supposed to set win to a 1,2, or 3 but it always stays at the default 0. I've checked the other values through the console, and they all seem to be working. here is my code.
function Player(number) {
this.number = number;
this.choice = 0;
}
var player1 = new Player(1);
var player2 = new Player(2);
var win = 0;
var battle = function() {
if (player1.choice === player2.choice) {
win = 3;
} else if (player1.choice + 2 === player2.choice && player1.choice === 1){
win = 2;
} else if (player1.choice + 1 === player2.choice && player1.choice === 1) {
win = 1;
} else if (player1.choice + 1 === player2.choice && player1.choice === 2) {
win = 1;
} else if (player1.choice - 1 === player2.choice && player1.choice === 2) {
win = 2;
} else if (player1.choice - 1 === player2.choice && player1.choice === 3) {
win = 2;
} else if (player1.choice - 2 === player2.choice && player1.choice === 3) {
win = 1;
} else {
alert ('someone pressed the wrong button')
}
}
var Reset = function () {
win = 0;
player1.choice = 0;
player2.choice = 0;
}
$(document).ready(function() {
$(document).keydown(function(event) {
if (event.which === 81) {
player1.choice = 1;
} else if (event.which === 87){
player1.choice = 2;
} else if (event.which === 69){
player1.choice = 3;
} else if (event.which === 37){
player2.choice = 1;
} else if (event.which === 40){
player2.choice = 2;
} else if (event.which === 39){
player2.choice = 3;
}
})
if (player1.choice > 0 && player2.choice > 0) {
battle();
if (win === 1) {
$('.winner').append('<p>player1 wins!</p>')
} else if (win === 2) {
$('.winner').append('<p>player2 wins!</p>')
} else if (win === 3) {
$('.winner').append('<p>It is a draw!</p>')
}
}
})
My html has the div with class 'winner' in it.
Additional question
How do I cancel the keydown function after both players have chosen their options.
Are you giving your player a choice in the Player class you created? It should look like this:
function Player(number, choice) {
this.number = number;
this.choice = choice;
}