JS期望值未达到



所以我正在做这个项目,我的目标是使用java脚本创建一个雪人。我已经多次运行此代码,除了一个错误外,我似乎修复了所有错误,这使我无法执行完整的脚本并确保它100%有效。

我在高中时选修了使用zybooks学习java。我无法联系到我的教练寻求指导。当我提交代码时,一切(到目前为止(都会验证,直到某个时刻。

这是我的错误信息:

//incorrect //
Context lineTo() called with proper x value
Your value
46
Expected value
54
Test aborted.

我真的不知道该在哪里更改这个值。我在drawSingleFlake函数中玩了一些代码,但没有取得任何进展。事实是,我不知道从哪里开始改变这个值。

这是我迄今为止的代码:

const flakeSize = 8;
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.querySelector("canvas");

drawGround(canvas);
drawSnowText(canvas);
drawSnowman(canvas);  
drawSnowflakes(canvas);   
});
function drawGround(canvas) {
var context = canvas.getContext("2d");
// background 
context.fillStyle = "lightgray";
context.fillRect(0, 0, 300, 300);
// ground
context.fillStyle = "brown";
context.fillRect(0, canvas.height - 50, canvas.width, canvas.height);
}
function drawSnowflakes(canvas) {   
for (var c = 0; c < 100; c++) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
drawSingleFlake(canvas, x, y);
}
}
// Complete the functions below
function drawSnowText(canvas) {
const ctx = canvas.getContext('2d');
ctx.font = '80px Verdana';
ctx.textAlign="center";

ctx.textBaseline = "top";
ctx.fillStyle = 'blue';
ctx.fillText("SNOW",canvas.width/2, 10);
}
function drawSnowman(canvas) { 
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150,200,50, 0, 2 * Math.PI);
ctx.fillStroke = 'white';
ctx.fillStyle = 'white';
ctx.lineWidth = 5;
ctx.fill();
}
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150,120,40, 0, 2 * Math.PI);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.lineWidth = 5;
ctx.fill();
}
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150,60,25, 0, 2 * Math.PI);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.lineWidth = 5;
ctx.fill();
}
}

// This is where I believe the error is coming from //
function drawSingleFlake(canvas, x, y) {
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.moveTo(x,y);
ctx.lineTo(x-flakeSize/2,y+flakeSize/2);
ctx.lineTo(x,y+(flakeSize/2));
ctx.lineTo(x+flakeSize/2,y+flakeSize/2);
}

如果有人能提供任何建议或帮助,我将不胜感激。虽然我感谢任何能给我一个可靠答案的人,但我也更喜欢一个指向正确方向的指针。这门课对我来说很重要,我想尽可能独立地完成这个项目。

我已经解决了这个问题;我又用drawSingleSnowflake函数玩了一些,最后我把整个函数重写如下,其中一些行被重新排序,/2从第二行ctx.lineTo()中删除。

function drawSingleFlake(canvas, x, y) {
const ctx = canvas.getContext('2d');
ctx.moveTo(x,y);
ctx.lineTo(x + flakeSize / 2, y + flakeSize / 2);
ctx.lineTo(x, y + flakeSize);
ctx.lineTo(x - flakeSize / 2, y + flakeSize / 2);
ctx.strokeStyle = 'white';
ctx.fillStyle = 'white';
ctx.fill();
}

最新更新