1
私はこのプロジェクトに悩まされました。あなたがここに見ることができるようにラジオボタンのキャンバス要素への値の送信
相続人は私の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>私は別の値を持つラジオボタンのグループを持っています。今私がしたいのは、ユーザーが色の1つを選択し、選択した値に応じて、この例では蛇という別名のキャンバスの要素色を変更したいと思うことです。
ここでは、私が部分的に成功したことがあります。
これは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);ここに何が起こるそれが動作することですが、部分的にしか。つまり、元のindex.htmlファイルでchecked = "checked"とマークされ、その色のスネークが表示されます。私は別の色を選択しようとすると何も起こらない、その赤のままです。私がchecked = "checked"要素をボタンの1つから削除すると、値として識別できなくなります。
最後のスニペットは、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のコンテキストを指定する正しい方法です。 '$（ '＃colorformsnake'）：チェックされた '）、またはより論理的な' $（ "＃colorformsnake input [name =" snakecolor "]：チェックされた"） ' – apokryfos
@ apokryfosあなたの答えに感謝します。しかし、残念ながらまだ働いていない人に変更しても、 – aleksxp
これは解決策ではなく情報コメントに似ていました。 – apokryfos