蛇游戏不起作用-儿童JavaScript
我绞尽脑汁想弄明白为什么我的代码不起作用。我复制了两次代码,但结果是一样的。问题是有时当蛇吃苹果时,它不起作用。蛇会从苹果旁边经过,就像它不在那里一样。请帮我做这个,我想把它做完。(我添加了jQuery)蛇游戏不起作用-儿童JavaScript,javascript,jquery,Javascript,Jquery,我绞尽脑汁想弄明白为什么我的代码不起作用。我复制了两次代码,但结果是一样的。问题是有时当蛇吃苹果时,它不起作用。蛇会从苹果旁边经过,就像它不在那里一样。请帮我做这个,我想把它做完。(我添加了jQuery) ` var canvas=document.getElementById(“canvas”); var ctx=canvas.getContext(“2d”); var width=canvas.width; var height=canvas.height; var块大小=10; var w
`
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
var width=canvas.width;
var height=canvas.height;
var块大小=10;
var widthInBlocks=宽度/块大小;
var heightInBlocks=高度/块大小;
var得分=0;
var drawBorder=函数(){
ctx.fillStyle=“灰色”;
ctx.fillRect(0,0,宽度,块大小);
ctx.fillRect(0,高度-块大小,宽度,块大小);
ctx.fillRect(0,0,块大小,高度);
ctx.fillRect(宽度-块大小,0,块大小,高度);
};
var drawScore=函数(){
ctx.font=“20px快递”;
ctx.fillStyle=“黑色”;
ctx.textAlign=“左”;
ctx.textb基线=“顶部”;
ctx.fillText(“分数:+分数,块大小,块大小);
};
var gameOver=函数(){
clearInterval(intervalId);
ctx.font=“60px快递”;
ctx.fillStyle=“黑色”;
ctx.textAlign=“中心”;
ctx.textb基线=“中间”;
ctx.fillText(“游戏结束”,宽度/2,高度/2);
};
变量圆=函数(x、y、半径、圆角圆){
ctx.beginPath();
弧(x,y,半径,0,数学π*2,假);
如果(填充圆){
ctx.fill();
}否则{
ctx.stroke();
}
};
var块=函数(列,行){
this.col=col;
this.row=行;
};
Block.prototype.drawSquare=函数(颜色){
var x=this.col*块大小;
var y=this.row*块大小;
ctx.fillStyle=颜色;
ctx.fillRect(x,y,blockSize,blockSize);
};
Block.prototype.drawCircle=函数(颜色){
var centerX=this.col*blockSize+blockSize/2;
var centerY=this.row*blockSize+blockSize/2;
ctx.fillStyle=颜色;
圆(centerX、centerY、块大小/2,真值);
};
Block.prototype.equal=函数(其他块){
返回this.col===otherBlock.col&&this.row===otherBlock.row;
};
var Snake=函数(){
此值为0.1段=[
新大厦(7,5),,
新大楼(6,5),
新大厦(5,5)
];
this.direction=“right”;
this.nextDirection=“right”;
};
Snake.prototype.draw=函数(){
对于(var i=0;i
////设置画布
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
////从canvas元素获取宽度和高度
var width=canvas.width;
var height=canvas.height;
////计算出块的宽度和高度
var块大小=10;
var widthInBlocks=宽度/块大小;
var heightInBlocks=高度/块大小;
////将分数设置为0
var得分=0;
////画边界
var drawBorder=函数(){
ctx.fillStyle=“灰色”;
ctx.fillRect(0,0,宽度,块大小);
ctx.fillRect(0,高度-块大小,宽度,块大小);
ctx.fillRect(0,0,块大小,高度);
ctx.fillRect(宽度-块大小,0,块大小,高度);
};
////在左上角画分数
var drawScore=函数(){
ctx.font=“20px快递”;
ctx.fillStyle=“黑色”;
ctx.textAlign=“左”;
ctx.textb基线=“顶部”;
ctx.fillText(“分数:+分数,块大小,块大小);
};
////清除间隔并在文本上显示游戏
var gameOver=函数(){
clearInterval(intervalId);
ctx.font=“60px快递”;
ctx.fillStyle=“黑色”;
ctx.textAlign=“中心”;
ctx.textb基线=“中间”;
ctx.fillText(“游戏结束”,宽度/2,高度/2);
};
////画一个圆(使用函数from
`
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var blockSize = 10;
var widthInBlocks = width / blockSize;
var heightInBlocks = height / blockSize;
var score = 0;
var drawBorder = function () {
ctx.fillStyle = "Gray";
ctx.fillRect(0, 0, width, blockSize);
ctx.fillRect(0, height - blockSize, width, blockSize);
ctx.fillRect(0, 0, blockSize, height);
ctx.fillRect(width - blockSize, 0, blockSize, height);
};
var drawScore = function () {
ctx.font = "20px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Score: " + score, blockSize, blockSize);
};
var gameOver = function () {
clearInterval(intervalId);
ctx.font = "60px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Game Over", width / 2, height / 2);
};
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
};
var Block = function (col, row) {
this.col = col;
this.row = row;
};
Block.prototype.drawSquare = function (color) {
var x = this.col * blockSize;
var y = this.row * blockSize;
ctx.fillStyle = color;
ctx.fillRect(x, y, blockSize, blockSize);
};
Block.prototype.drawCircle = function (color) {
var centerX = this.col * blockSize + blockSize / 2;
var centerY = this.row * blockSize + blockSize / 2;
ctx.fillStyle = color;
circle(centerX, centerY, blockSize / 2, true);
};
Block.prototype.equal = function (otherBlock) {
return this.col === otherBlock.col && this.row === otherBlock.row;
};
var Snake = function () {
this.segments = [
new Block(7, 5),
new Block(6, 5),
new Block(5, 5)
];
this.direction = "right";
this.nextDirection = "right";
};
Snake.prototype.draw = function () {
for (var i = 0; i < this.segments.length; i++) {
this.segments[i].drawSquare("Blue");
}
};
Snake.prototype.move = function () {
var head = this.segments[0];
var newHead;
this.direction = this.nextDirection;
if (this.direction === "right") {
newHead = new Block(head.col + 1, head.row);
} else if (this.direction === "down") {
newHead = new Block(head.col, head.row + 1);
} else if (this.direction === "left") {
newHead = new Block(head.col - 1, head.row);
} else if (this.direction === "up") {
newHead = new Block(head.col, head.row - 1);
}
if (this.checkCollision(newHead)) {
gameOver();
return;
}
this.segments.unshift(newHead);
if (newHead.equal(apple.position)) {
score++;
apple.move();
} else {
this.segments.pop();
};
};
Snake.prototype.checkCollision = function (head) {
var leftCollision = (head.col === 0);
var topCollision = (head.row === 0);
var rightCollision = (head.col === widthInBlocks - 1);
var bottomCollision = (head.row === widthInBlocks - 1);
var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
var selfCollision = false;
for (var i = 0; i < this.segments.length; i++) {
if (head.equal(this.segments[i])) {
selfCollision = true;
}
}
return wallCollision || selfCollision;
};
Snake.prototype.setDirection = function (newDirection) {
if (this.direction === "up" && newDirection === "down") {
return;
} else if (this.direction === "right" && newDirection === "left") {
return;
} else if (this.direction === "down" && newDirection === "up") {
return;
} else if (this.direction === "left" && newDirection === "right") {
return;
}
this.nextDirection = newDirection;
};
var Apple = function () {
this.position = new Block(10, 10);
};
Apple.prototype.draw = function () {
this.position.drawCircle("LimeGreen");
};
Apple.prototype.move = function () {
var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
this.position = new Block(randomCol, randomRow);
};
var snake = new Snake();
var apple = new Apple();
var intervalId = setInterval(function () {
ctx.clearRect(0, 0, width, height);
drawScore();
snake.move();
snake.draw();
apple.draw();
drawBorder();
}, 100);
var directions = {
37: "left",
38: "up",
39: "right",
40: "down"
};
$("body").keydown(function (event) {
var newDirection = directions[event.keyCode];
if (newDirection !== undefined) {
snake.setDirection(newDirection);
}
});
`
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
//// Set up canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// // Get the width and height from the canvas element
var width = canvas.width;
var height = canvas.height;
//// Work out the width and height in blocks
var blockSize = 10;
var widthInBlocks = width / blockSize;
var heightInBlocks = height / blockSize;
// // Set score to 0
var score = 0;
// // Draw the border
var drawBorder = function () {
ctx.fillStyle = "Gray";
ctx.fillRect(0, 0, width, blockSize);
ctx.fillRect(0, height - blockSize, width, blockSize);
ctx.fillRect(0, 0, blockSize, height);
ctx.fillRect(width - blockSize, 0, blockSize, height);
};
// // Draw the score in the top-left corner
var drawScore = function () {
ctx.font = "20px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Score: " + score, blockSize, blockSize);
};
// // Clear the interval and display Game Over text
var gameOver = function () {
clearInterval(intervalId);
ctx.font = "60px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Game Over", width / 2, height / 2);
};
// // Draw a circle (using the function from Chapter 14)
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
};
// // The Block constructor
var Block = function (col, row) {
this.col = col;
this.row = row;
};
// // Draw a square at the block's location
Block.prototype.drawSquare = function (color) {
var x = this.col * blockSize;
var y = this.row * blockSize;
ctx.fillStyle = color;
ctx.fillRect(x, y, blockSize, blockSize);
};
// // Draw a circle at the block's location
Block.prototype.drawCircle = function (color) {
var centerX = this.col * blockSize + blockSize / 2;
var centerY = this.row * blockSize + blockSize / 2;
ctx.fillStyle = color;
circle(centerX, centerY, blockSize / 2, true);
};
// // Check if this block is in the same location as another block
Block.prototype.equal = function (otherBlock) {
return this.col === otherBlock.col && this.row === otherBlock.row;
};
// // The Snake constructor
var Snake = function () {
this.segments = [
new Block(7, 5),
new Block(6, 5),
new Block(5, 5)
];
this.direction = "right";
this.nextDirection = "right";
};
// // Draw a square for each segment of the snake's body
Snake.prototype.draw = function () {
this.segments[0].drawSquare("LimeGreen");
var isEvenSegment = false;
for (var i = 1; i < this.segments.length; i++) {
if (isEvenSegment) {
this.segments[i].drawSquare("Blue");
} else {
this.segments[i].drawSquare("Yellow");
}
isEvenSegment = !isEvenSegment; // следующий сегмент будет нечетным
}
};
// // Create a new head and add it to the beginning of
// the snake to move the snake in its current direction
Snake.prototype.move = function () {
var head = this.segments[0];
var newHead;
this.direction = this.nextDirection;
if (this.direction === "right") {
newHead = new Block(head.col + 1, head.row);
} else if (this.direction === "down") {
newHead = new Block(head.col, head.row + 1);
} else if (this.direction === "left") {
newHead = new Block(head.col - 1, head.row);
} else if (this.direction === "up") {
newHead = new Block(head.col, head.row - 1);
}
if (this.checkCollision(newHead)) {
gameOver();
return;
}
this.segments.unshift(newHead);
if (newHead.equal(apple.position)) {
score++;
apple.move();
} else {
this.segments.pop();
}
};
// // Check if the snake's new head has collided with the wall or itself
Snake.prototype.checkCollision = function (head) {
var leftCollision = (head.col === 0);
var topCollision = (head.row === 0);
var rightCollision = (head.col === widthInBlocks - 1);
var bottomCollision = (head.row === heightInBlocks - 1);
var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
var selfCollision = false;
for (var i = 0; i < this.segments.length; i++) {
if (head.equal(this.segments[i])) {
selfCollision = true;
}
}
return wallCollision || selfCollision;
};
// // Set the snake's next direction based on the keyboard
Snake.prototype.setDirection = function (newDirection) {
if (this.direction === "up" && newDirection === "down") {
return;
} else if (this.direction === "right" && newDirection === "left") {
return;
} else if (this.direction === "down" && newDirection === "up") {
return;
} else if (this.direction === "left" && newDirection === "right") {
return;
}
this.nextDirection = newDirection;
};
// // The Apple constructor
var Apple = function () {
this.position = new Block(10, 10);
};
// // Draw a circle at the apple's location
Apple.prototype.draw = function () {
this.position.drawCircle("LimeGreen");
};
// // Move the apple to a new random location
Apple.prototype.move = function () {
var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
this.position = new Block(randomCol, randomRow);
};
// // Create the snake and apple objects
var snake = new Snake();
var apple = new Apple();
//// Pass an animation function to setInterval
var intervalId = setInterval(function () {
ctx.clearRect(0, 0, width, height);
drawScore();
snake.move();
snake.draw();
apple.draw();
drawBorder();
}, 100);
// // Convert keycodes to directions
var directions = {
37: "left",
38: "up",
39: "right",
40: "down"
};
// // The keydown handler for handling direction key presses
$("body").keydown(function (event) {
var newDirection = directions[event.keyCode];
if (newDirection !== undefined) {
snake.setDirection(newDirection);
}
});
</script>