我知道这个问题听起来很奇怪，但我不知道如何最好地描述这个问题所以请按照这个链接玩游戏，直到你得到大约15-20的分数，你会看到一旦画布变黑线是创造了一点将画布分成两半 Link to game
我没有线索天气这个问题来自javascript或css或者有什么帮助非常感谢
以下是我对这个游戏的所有代码
/*
-------------------------
settings.js
-------------------------
*/
var canvas = document.getElementById("snakeCanvas");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var score = 0;
var snake;
var snakeSize = 10;
var food;
/*
---------------------------
draw.js
---------------------------
*/
var drawModule = (function () {
var bodySnake = function(x, y) {
ctx.fillStyle = 'green';
ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
ctx.strokeStyle = 'darkgreen';
ctx.strokeRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
}
var pizza = function(x, y) {
ctx.fillStyle = 'yellow';
ctx.fillRect(x*snakeSize, y*snakeSize, snakeSize, snakeSize);
ctx.fillStyle = 'red';
ctx.fillRect(x*snakeSize+1, y*snakeSize+1, snakeSize-2, snakeSize-2);
}
var scoreText = function() {
var score_text = "Score: " + score;
ctx.fillStyle = 'blue';
ctx.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(){
ctx.fillStyle = 'lightgrey';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'black';
ctx.strokeRect(0, 0, w, h);
btn.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
btn.removeAttribute('disabled', true);
ctx.clearRect(0,0,w,h);
gameloop = clearInterval(gameloop);
score = 0;
h = 350;
w = 350;
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 {
var 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);
}
pizza(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
};
}());
/*
-------------------
app.js
-------------------
*/
(function (window, document, drawModule, undefined) {
var btn = document.getElementById('btn');
btn.addEventListener("click", function(){ drawModule.init();});
document.onkeydown = function(event) {
keyCode = window.event.keyCode;
keyCode = event.keyCode;
switch(keyCode) {
case 37:
if (direction != 'right') {
direction = 'left';
}
console.log('left');
break;
case 39:
if (direction != 'left') {
direction = 'right';
console.log('right');
}
break;
case 38:
if (direction != 'down') {
direction = 'up';
console.log('up');
}
break;
case 40:
if (direction != 'up') {
direction = 'down';
console.log('down');
}
break;
}
}
})(window, document, drawModule);
/*
---------------------
enhancements.js
---------------------
*/
function UpdateCanvas(){
if(score == 0){
w = 350;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},2000);
}else if(score >= 5 && score < 8){
w = 500;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},2000);
}else if(score >= 8 && score < 10){
w = 500;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},2000);
}else if(score >= 10 && score < 12){
w = 600;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},2000);
}else if(score >= 12 && score < 15){
w = 850;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},2000);
}else if(score >= 15 && score < 18){
w = 400;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},1000);
}else if(score >= 18 && score < 21){
w = 250;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
},1000);
}
}
setInterval(UpdateCanvas,1000);#home {
width: 350px;
height: 350px;
background-image: url('../img/snake.png');
background-size: auto 350px;
background-repeat: no-repeat;
background-color: lightblue;
background-position: center center;
padding: 0;
margin: 03;
}
button {
background-color: green;
color: white;
border: none;
bottom: 0;
height: 30px;
font-size: 12pt;
float: left;
width: 90px;
margin: 10px 0 0 0;
}
button:hover {
background-color: orange;
}
button:disabled {
background-color: grey;
}
p {
font-family: Helvetica;
font-weight: bold;
width: 250px;
margin: 18px 0 5px 8px;
float: left;
}
.game {
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snake: Remastered</title>
<link rel="stylesheet" href="css/Style.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
</head>
<body>
<div class= 'game'>
<div id = 'home'>
<canvas id='snakeCanvas' width='350' height='350'></canvas>
</div>
<p>Press start and eat the pizza!</p>
<button id='btn'>START</button>
</div>
<script src="js/settings.js"></script>
<script src="js/draw.js"></script>
<script src="js/app.js"></script>
<script src="js/enhancements.js"></script>
</body>
</html>
答案 0 :(得分：0)
要达到预期效果，请在代码中进行以下更改
将尺寸减小到200会导致黑线
JS：
/*
-------------------------
settings.js
-------------------------
*/
var canvas = document.getElementById("snakeCanvas");
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var score = 0;
var snake;
var snakeSize = 10;
var food;
/*
---------------------------
draw.js
---------------------------
*/
var drawModule = (function() {
var bodySnake = function(x, y) {
ctx.fillStyle = 'green';
ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
ctx.strokeStyle = 'darkgreen';
ctx.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
}
var pizza = function(x, y) {
ctx.fillStyle = 'yellow';
ctx.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);
ctx.fillStyle = 'red';
ctx.fillRect(x * snakeSize + 1, y * snakeSize + 1, snakeSize - 2, snakeSize - 2);
}
var scoreText = function() {
var score_text = "Score: " + score;
ctx.fillStyle = 'blue';
ctx.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() {
ctx.fillStyle = 'lightgrey';
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'black';
ctx.strokeRect(0, 0, w, h);
btn.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
btn.removeAttribute('disabled', true);
ctx.clearRect(0, 0, w, h);
gameloop = clearInterval(gameloop);
score = 0;
h = 350;
w = 350;
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 {
var 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);
}
pizza(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
};
}());
/*
-------------------
app.js
-------------------
*/
(function(window, document, drawModule, undefined) {
var btn = document.getElementById('btn');
btn.addEventListener("click", function() {
drawModule.init();
});
document.onkeydown = function(event) {
keyCode = window.event.keyCode;
keyCode = event.keyCode;
switch (keyCode) {
case 37:
if (direction != 'right') {
direction = 'left';
}
console.log('left');
break;
case 39:
if (direction != 'left') {
direction = 'right';
console.log('right');
}
break;
case 38:
if (direction != 'down') {
direction = 'up';
console.log('up');
}
break;
case 40:
if (direction != 'up') {
direction = 'down';
console.log('down');
}
break;
}
}
})(window, document, drawModule);
/*
---------------------
enhancements.js
---------------------
*/
function UpdateCanvas() {
if (score == 0) {
w = 350;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
} else if (score >= 5 && score < 8) {
w = 500;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
} else if (score >= 8 && score < 10) {
w = 500;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
} else if (score >= 10 && score < 12) {
w = 600;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
} else if (score >= 12 && score < 15) {
w = 850;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
} else if (score >= 15 && score < 18) {
w = 850;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
} else if (score >= 18 && score < 21) {
w = 950;
h = 350;
$('#snakeCanvas').animate({
width: w,
height: h
}, 2000);
}
}
Codepen- http://codepen.io/nagasai/pen/yJjaWV
我已经测试了上面的代码，直到得分-35，它看起来很好......希望这适合你：）