1
Ich weiß, dass diese Frage seltsam klingt, aber ich habe keine Ahnung, wie man das Problem am besten beschreibt, also bitte folgen Sie diesem Link und spielen Sie das Spiel, bis Sie etwa 15-20 Punkte bekommen und Sie werden sehen dass, sobald die Leinwand eine schwarze Linie wächst ein bisschen die Leinwand in der Mitte erstellt spaltet Link to gameSchrumpfende und wachsende Leinwand schafft nicht passierbare Grenze
ich habe keine Ahnung Wetter das Problem von Javascript oder CSS auftritt oder welche Hilfe ist sehr
Below geschätzt ist mein Code für dieses spiel
/*
-------------------------
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();});
\t 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(){
\t if(score == 0){
\t w = 350;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },2000);
}else if(score >= 5 && score < 8){
\t w = 500;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },2000);
}else if(score >= 8 && score < 10){
\t w = 500;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },2000);
}else if(score >= 10 && score < 12){
\t w = 600;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },2000);
}else if(score >= 12 && score < 15){
\t w = 850;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },2000);
}else if(score >= 15 && score < 18){
\t w = 400;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },1000);
}else if(score >= 18 && score < 21){
\t w = 250;
h = 350;
\t \t $('#snakeCanvas').animate({
\t \t width: w,
\t height: h
\t },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>
\t <meta charset="utf-8">
\t <title>Snake: Remastered</title>
\t <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>
\t <div class= 'game'>
\t \t <div id = 'home'>
\t \t \t <canvas id='snakeCanvas' width='350' height='350'></canvas>
\t \t </div>
\t \t <p>Press start and eat the pizza!</p>
\t \t <button id='btn'>START</button>
\t </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>
in Ihrem codepen die Leinwand nicht mehr die Größe –
Was die Bedingung für Resize ist , die schwarze Linienaufteilung wurde aufgrund der Größenänderung verursacht? –
Ja, ich brauche die schwarze Linie weg, aber die Leinwand muss noch Größe ändern Bedeutung die UpdateCanvas Funktion muss –