Игра Apple Catcher

83
12

Итак, я пытаюсь создать игру с яблочным ловушкой... Но код, полученный до сих пор, действительно глючит. Прежде всего, счетчик очков не соответствует потребностям яблок. То же самое с компьютерными точками. Яблоки и "корзина" также врезаются друг в друга, вы увидите это в демо. Как я могу это исправить? Любая помощь определяется:)


Демо-ссылка # 1: https://files.itslearning.com/data/134/17123/k4.html


Сообщите мне, если ссылка не работает ^^:)


$(document).ready(function() {

var spillerPoeng = 0;
var pcPoeng = 0;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var Kloss = function(xPos, yPos) {
this.xPos = xPos;
this.yPos = yPos;
}

Kloss.prototype.tegnKloss = function() {

ctx.fillStyle = "red";
ctx.fillRect(this.xPos, this.yPos, 100, 50);

}

Kloss.prototype.flyttVenstre = function() {
ctx.fillStyle = "red";

ctx.clearRect(this.xPos, this.yPos, 150, 80);

this.xPos = this.xPos - 20;

ctx.fillRect(this.xPos, this.yPos, 100, 50);
}

Kloss.prototype.flyttHoyre = function() {
ctx.fillStyle = "red";

ctx.clearRect(this.xPos, this.yPos, 150, 80);

this.xPos = this.xPos + 20;

ctx.fillRect(this.xPos, this.yPos, 100, 50);
}

var Kule = function(xPos, yPos, radie) {
this.xPos = xPos;
this.yPos = yPos;
this.radie = radie;
this.farge = getRandomColor();

}

Kule.prototype.tegn = function() {

ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radie, 0, 2 * Math.PI);
ctx.fillStyle = this.farge;
ctx.stroke();
ctx.fill();

};

Kule.prototype.fjernKule = function() {

ctx.clearRect(this.xPos - 11, this.yPos - 11, this.radie * 2 + 4,
this.radie * 2 + 4);

}

$("#venstre").click(function() {

kloss1.flyttVenstre();
kloss1.tegnKloss();
});

$("#hoyre").click(function() {
kloss1.flyttHoyre();
kloss1.tegnKloss();
});

function loop(objekt) {

setTimeout(function() {
if (objekt.yPos < 480) {

objekt.fjernKule();

objekt.yPos = objekt.yPos + 10;

var sjekk = sjekkTreff(kloss1, objekt);
if (sjekk == 1) {
spillerPoeng++;
document.getElementById("spillerPoeng").innerHTML =
spillerPoeng;
} else if (sjekk == 2) {
pcPoeng++
document.getElementById("pcPoeng").innerHTML = pcPoeng;
}

objekt.tegn();

loop(objekt);
}

}, 300)

}

function randX(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
color += "00";
for (var i = 0; i < 2; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
color += "00";
return color;
}

var kuleListe = [];

var maxKuler = 0;

function settKuleListe() {

setTimeout(function() {

kuleListe[maxKuler] = new Kule(randX(10, 480), 0, 10);

loop(kuleListe[maxKuler]);
maxKuler++

settKuleListe();

}, 2000);

}

function sjekkTreff(obj1, obj2) {
if (obj1.xPos < obj2.xPos && obj1.xPos + 300 > obj2.xPos && obj2.yPos > 450) {

return (1);
} else if (obj2.yPos > 450) {

return (2);
} else {

return (3);

}

}

var kloss1 = new Kloss(50, 450);
kloss1.tegnKloss();

settKuleListe();

});


div {
border: 1px solid black;
padding: 20px;
margin-bottom: 10px;
margin-left: 80px;
background-color: lightblue;
float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">
</canvas>
</div>
<div>spiller poeng:
<p id="spillerPoeng"></p>
</div>
<div>PC poeng
<p id="pcPoeng"></p>
</div>

<br>
<div>
<button id="venstre"> << </button>
<button id="hoyre"> >> </button>
</div>

спросил(а) 2018-01-23T11:19:00+03:00 2 года, 9 месяцев назад
1
Решение
70

Это выглядело забавно, поэтому я попытался "улучшить" ваш код.


Вот тот, который работает со стрелками, попробуйте его и отредактируйте столько, сколько захотите!


(И, конечно, я здесь, если у вас есть вопросы, но я думаю, что мой код довольно ясный)

Код еще не закончен, я думал, что некоторые ошибки помогут вам улучшить себя, поэтому попробуйте найти их, если сможете:


const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const basketSpeed = 5;
const gravity = 2;

const basket = new Basket();
const apples = [];

const score = document.querySelector('#counter span');
let counter = 0;

setInterval(() => apples.push(new Apple()), 500);

let pressingLeft = pressingRight = false;

draw = function() {
basket.draw();
for (let apple of apples) { apple.draw(); }
}

animate = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
requestAnimationFrame(animate);
}

animate();

function Basket() {

this.width = 50;
this.height = 10;

this.x = (canvas.width / 2) - this.width / 2;
this.y = canvas.height - this.height - 10;

this.dx = 0;

this.draw = function() {
ctx.beginPath();
ctx.rect(this.x, this.y, this.width, this.height);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
this.update();
}

this.update = function() {
if(pressingLeft) { this.dx = -basketSpeed; }
else if (pressingRight) { this.dx = basketSpeed; }
else { this.dx = 0; }

if (this.x + this.width + this.dx < canvas.width && this.x + this.dx > 0) { this.x += this.dx; }
}
}

function Apple() {
this.x = Math.random() * canvas.width;
this.y = 0;

this.radius = 10;

this.dy = gravity;

this.allowDraw = true;

this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
this.update();
}

this.update = function() {
this.y += this.dy;
if (this.x > basket.x && this.x < basket.x + basket.width &&
this.y + this.radius >= basket.y
) {
updateScore();
apples.splice(apples.indexOf(this), 1);
}
}
}

updateScore = function() {
counter++;
score.innerText = counter;
}

document.addEventListener('keydown', (ev) => {
pressingLeft = ev.keyCode === 37;
pressingRight = ev.keyCode === 39;
});

document.addEventListener('keyup', (ev) => {
if (ev.keyCode === 37) { pressingLeft = false; }
if (ev.keyCode === 39) { pressingRight = false; }
});


canvas { background: #ddd; position: relative; left: 50%; transform: translateX(-50%); }
#counter { display: inline-block; margin: auto; position: relative; top: 50px; }

<canvas id="canvas" width="500" height="300"></canvas>
<div id="counter">Score : <span>0</span></div>

ответил(а) 2018-01-23T11:56:00+03:00 2 года, 9 месяцев назад
41

вы увеличиваете время выполнения кадров движения (3 раза внутри коробки). Я установил счетчики, используя флаг для расчета или не увеличивать. вам следует подумать о том, чтобы улучшить игру, потому что не только яблоко должно находиться в пределах корзины, но и проходить через отверстие корзины.

$(document).ready(function() {

var spillerPoeng = 0;
var pcPoeng = 0;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var Kloss = function(xPos, yPos) {
this.xPos = xPos;
this.yPos = yPos;
}

Kloss.prototype.tegnKloss = function() {

ctx.fillStyle = "red";
ctx.fillRect(this.xPos, this.yPos, 100, 50);

}

Kloss.prototype.flyttVenstre = function() {
ctx.fillStyle = "red";

ctx.clearRect(this.xPos, this.yPos, 150, 80);

this.xPos = this.xPos - 20;

ctx.fillRect(this.xPos, this.yPos, 100, 50);
}

Kloss.prototype.flyttHoyre = function() {
ctx.fillStyle = "red";

ctx.clearRect(this.xPos, this.yPos, 150, 80);

this.xPos = this.xPos + 20;

ctx.fillRect(this.xPos, this.yPos, 100, 50);
}

var Kule = function(xPos, yPos, radie) {
this.xPos = xPos;
this.yPos = yPos;
this.radie = radie;
this.counted = false;
this.farge = getRandomColor();

}

Kule.prototype.tegn = function() {

ctx.beginPath();
ctx.arc(this.xPos, this.yPos, this.radie, 0, 2 * Math.PI);
ctx.fillStyle = this.farge;
ctx.stroke();
ctx.fill();

};

Kule.prototype.fjernKule = function() {

ctx.clearRect(this.xPos - 11, this.yPos - 11, this.radie * 2 + 4,
this.radie * 2 + 4);

}

$("#venstre").click(function() {

kloss1.flyttVenstre();
kloss1.tegnKloss();
});

$("#hoyre").click(function() {
kloss1.flyttHoyre();
kloss1.tegnKloss();
});

function loop(objekt) {

setTimeout(function() {
if (objekt.yPos < 480) {

objekt.fjernKule();

objekt.yPos = objekt.yPos + 10;

var sjekk = sjekkTreff(kloss1, objekt);
if (sjekk == 1 && !objekt.counted) {
spillerPoeng++;
objekt.counted=true;
document.getElementById("spillerPoeng").innerHTML =
spillerPoeng;
} else if (sjekk == 2 && !objekt.counted) {
pcPoeng++
objekt.counted=true;
document.getElementById("pcPoeng").innerHTML = pcPoeng;
}

objekt.tegn();

loop(objekt);
}

}, 300)

}

function randX(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
color += "00";
for (var i = 0; i < 2; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
color += "00";
return color;
}

var kuleListe = [];

var maxKuler = 0;

function settKuleListe() {

setTimeout(function() {

kuleListe[maxKuler] = new Kule(randX(10, 480), 0, 10);

loop(kuleListe[maxKuler]);
maxKuler++

settKuleListe();

}, 2000);

}

function sjekkTreff(obj1, obj2) {
if (obj1.xPos < obj2.xPos && obj1.xPos + 300 > obj2.xPos && obj2.yPos > 450) {

return (1);
} else if (obj2.yPos > 450) {

return (2);
} else {

return (3);

}

}

var kloss1 = new Kloss(50, 450);
kloss1.tegnKloss();

settKuleListe();

});

ответил(а) 2018-01-23T11:33:00+03:00 2 года, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема