Так что у меня есть небольшая проблема, которая заставила меня застрять в этом проекте.Отправка значения элемента-переключателя на элемент холста
Heres мой index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game - WP</title>
<link rel="stylesheet" href="css/style_settings.css">
</head>
<body>
<div id="gamesettings"><h1>Customise your game</h1>
<form id="colorformsnake" name="colorformsnake" onchange="return getRadioValSnake()"><label>Choose the snake color: <br/><br/>
Green: <input type="radio" id="green" value="green" name="snakecolor"><br /><br />
Red: <input type="radio" id="red" value="red" name="snakecolor" checked="checked"/><br /><br />
Blue: <input type="radio" value="blue" id="blue" name="snakecolor"></label><br /><br/><br /></form>
<form id="colorformbg" onchange="getRadioValBg()" name="colorformbg">
<label>Choose the background color: <br /><br/>
Gray: <input type="radio" id="gray" value="gray" name="bgcolor" ><br /><br />
White: <input type="radio" id="white" value="white" name="bgcolor"/><br /><br />
Black: <input type="radio" value="black" id="black" name="bgcolor" checked="checked"></label><br /><br><br /></form>
</div>
<div class="game">
<div id="main">
<canvas id="gamecanvas" width="350" height="350"></canvas><br /><br />
<p style="color: #8f00b3">Press START to play the game!</p>
<input type="submit" id="startbutton" value="START">
</div>
</div>
<div id="scores">
<form id="scoresForm">
<h1>User scores: </h1>
<label>Show top 5 highscores:<br /><br /> <button id="showbutton">SHOW</button></label><br /><br />
<div id="showScores"></div><br /><br />
<label>Show last 5 players:<br /><br /> <button id="showbuttonlast">SHOW</button></label>
<div id="showScoresLast"></div></form>
</div>
<script src="javascript/jquery-3.0.0.min.js"></script>
<script src="javascript/colorsettings.js"></script>
<script src="javascript/initial_config.js"></script>
<script src="javascript/draw.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/ajax.js"></script>
</body>
</html>
Как вы можете видеть здесь у меня есть группы переключателей с различными значениями. Теперь, что я хочу сделать, так это то, что пользователь выбирает один из цветов и в зависимости от выбранного значения я хотел бы изменить цвет элемента холста, ака, в этом примере, змею.
Вот что я частично преуспел в этом.
Это файл с названием colorsettings.js, где я объявлял функции для получения значения в переменной.
var snakecolor=" ";
var bgcolor="";
var snakecolorCurrent;
var currentcolor;
function getRadioValSnake()
{
snakecolor=($('input[name="snakecolor"]:checked', '#colorformsnake').val());
currentcolor=snakecolor;
if(currentcolor=='red'){return 'red'}
if(currentcolor=='green'){return 'green'}
if(currentcolor=='blue'){return 'blue'}
}
function getRadioValBg()
{
bgcolor=($('input[name="bgcolor"]:checked', '#colorformbg').val());
return bgcolor;
}
snakecolorCurrent=getRadioValSnake();
console.log(snakecolorCurrent);
Что здесь происходит, что это работает, но только частично. А именно, значение, которое работает нормально, это тот, который отмечен как checked = "checked" в исходном файле index.html и отображает змею в этом цвете. Если я попробую выбрать другой цвет, ничего не произойдет, он останется красным. Если я удалю элемент checked = "checked" с одной из кнопок, я получаю unidentified как значение.
Вот последний фрагмент, который является файлом draw.js, здесь моя переменная должна влиять на цвет змеи.
var drawModule = (function() {
var bodySnake =function (x, y) {
// the color settings start here
if(snakecolorCurrent=="red"){
context.fillStyle='red';
context.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
context.strokeStyle = '#BCBCBC';
context.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);}
if(snakecolorCurrent=="blue")
{
context.fillStyle='blue';
context.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
context.strokeStyle = '#BCBCBC';
context.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);}
if(snakecolorCurrent=="green")
{
context.fillStyle='green';
context.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
context.strokeStyle = '#BCBCBC';
context.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);}
};
//and finish here
var snakeFood = function (x, y) {
context.fillStyle = 'yellow';
context.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
context.fillStyle = 'red';
context.fillRect(x * snakeSize + 1, y * snakeSize + 1, snakeSize - 2, snakeSize - 2);
};
var scoreText = function() {
var score_text = "Score: " + score;
context.fillStyle = 'white';
context.fillText(score_text, 145, h - 5);
};
var drawSnake = function() {
var length = 4;
snake = [];
for (var i = length - 1; i >= 0; i--) {
snake.push({x: i, y: 0});
}
};
var paint = function() {
context.fillStyle = 'gray';
context.fillRect(0, 0, w, h);
context.strokeStyle = 'black';
context.strokeRect(0, 0, w, h);
startbutton.setAttribute('disabled', true);
var snakeX = snake[0].x;
var snakeY = snake[0].y;
if (direction == 'right') {
snakeX++;
}
else if (direction == 'left') {
snakeX--;
}
else if (direction == 'up') {
snakeY--;
} else if (direction == 'down') {
snakeY++;
}
if (snakeX == -1 || snakeX == w/snakeSize || snakeY == -1 || snakeY == h/snakeSize || checkCollision(snakeX, snakeY, snake)) {
//restart game
var name = prompt ('Please enter your username:',''); // we ask the user for their name
if(confirm("This is your username: "+name+ "\n And this is your score:" +score)){loadData()}
startbutton.removeAttribute('disabled', true);
context.clearRect(0, 0, w, h);
gameloop = clearInterval(gameloop);
return;}
if (snakeX == food.x && snakeY == food.y) {
var tail = {x: snakeX, y: snakeY}; //Create a new head instead of moving the tail
score++;
createFood(); //Create new food
} else {
tail = snake.pop(); //pops out the last cell
tail.x = snakeX;
tail.y = snakeY;
}
//The snake can now eat the food.
snake.unshift(tail); //puts back the tail as the first cell
for (var i = 0; i < snake.length; i++) {
bodySnake(snake[i].x, snake[i].y);
}
snakeFood(food.x, food.y);
scoreText();
};
var createFood = function() {
food =
{
x: Math.floor((Math.random() * 30) + 1),
y: Math.floor((Math.random() * 30) + 1)
};
for (var i = 0; i > snake.length; i++) {
var snakeX = snake[i].x;
var snakeY = snake[i].y;
if (food.x === snakeX && food.y === snakeY || food.y === snakeY && food.x === snakeX) {
food.x = Math.floor((Math.random() * 30) + 1);
food.y = Math.floor((Math.random() * 30) + 1);
}
}
};
var checkCollision = function (x, y, array) {
for (var i = 0; i < array.length; i++) {
if (array[i].x === x && array[i].y === y)
return true;
}
return false;
};
var init = function() {
direction = 'down';
drawSnake();
createFood();
gameloop = setInterval(paint, 80);
};
return {
init: init
};
}());
Я надеюсь, что понятно. Любая помощь очень ценится!
Я не думаю, что '$ ('вход [имя = "snakecolor"]: проверено', '#colorformsnake')' правильный способ определить контекст, в JQuery. Попробуйте '$ ('input [name =" snakecolor "]: checked', $ ('# colorformsnake'))' или более логичный '$ (" # colorformsnake input [name = "snakecolor"]: checked ")' – apokryfos
@apokryfos благодарит за ваш ответ. Но даже если я изменю его с тем, что он все еще не работает, к сожалению – aleksxp
Это больше похоже на информационный комментарий, а не на решение. – apokryfos