所以我有一个小问题让我陷入了这个项目。
继承我的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);
这里发生的是它有效，但只是部分有效。也就是说，工作正常的值是在原始index.html文件中标记为checked =“checked”的值，它以该颜色显示蛇。如果我尝试选择不同的颜色没有任何反应，它会保持红色。如果我从其中一个按钮中删除checked =“checked”元素，我将其识别为值。
这是最后的片段，它是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
};
}());
我希望我能理解。非常感谢任何帮助！
答案 0 :(得分：0)
管理解决它。我需要做的是直接将函数调用到画布的值，就像这样。
var bodySnake =function (x, y) {
context.fillStyle=getRadioValSnake();
context.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
context.strokeStyle = '#BCBCBC';
context.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
};