<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My game</title>
<script src ="Sprite.js"></script>
<Style>
canvas {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
</Style>
</head>
<body onload="main()">
<script>
//games variable >variáveis do jogo
var canvas, ctx, Altura, Largura, maxJumps = 4, speed = 6, actualState, record, img,
pointsForNewPhase = [5, 15, 21, 29, 38],
actualPhase = 0,
labelNewPhase = {
texto: "",
opacidade: 0.0,
fadeIn: function(dt){
var fadeInId = setInterval(function() {
if(labelNewPhase.opacidade < 1.0)
labelNewPhase.opacidade += 0.01;
else{
resetInterval(fadeInId); // Erro acontece nessa linha
}
}, 10 * dt);
},
fadeOut: function(dt){
var fadeOutId = setInterval(function() {
if(labelNewphase.opacidade > 1.0)
labelNewPhase.opacidade -= 0.01;
else{
resetInterval(fadeOutId);
}
}, 10 * dt);
}
},
states = {
play: 0,
playing: 1,
youLose: 2
},
floor = {
y: 550,
x: 0,
altura: 50,
//color: "#ffdf70", // cor do chão em amarelo queimado
update: function() {
this.x -= speed;
if (this.x <= -30){
this.x += 30;
}
},
design: function () {
spriteFloor.design(this.x, this.y);
spriteFloor.design(this.x + spriteFloor.largura, this.y);
}
},
block = {
x: 50,
y: 0,
altura: spriteBoneco.altura,
largura: spriteBoneco.largura,
//color: "#ff4e4e", // cor do bloquinho em vermelho
gravity: 1.6,
speed: 0,
jumpForce: 26.6,
hmanyJumps: 0, // How many Jumps = Quantos pulos
score: 0,
rotation : 0,
lifes: 3,
colliding: false,
update: function () {
this.speed += this.gravity;
this.y += this.speed;
this.rotation += Math.PI / 180 * speed;
if (this.y > floor.y - this.altura && actualState != states.youLose) {
this.y = floor.y - this.altura;
this.hmanyJumps = 0;
this.speed = 0;
}
},
jump: function () {
if (this.hmanyJumps < maxJumps) {
this.speed = -this.jumpForce;
this.hmanyJumps++;
}
},
reset: function () {
this.speed = 0;
this.y = 0;
if (this.score > record) {
localStorage.setItem("record", this.score);
record = this.score;
}
this.lifes = 3;
this.score = 0;
speed = 6;
actualPhase = 0;
},
design: function () {
// operaçoes para rotacionar
ctx.save();
ctx.translate(this.x + this.largura / 2, this.y + this.altura / 2);
ctx.rotate(this.rotation);
spriteBoneco.design(-this.largura / 2, -this.altura / 2);
ctx.restore();
}
};
obstacles = {
_obs: [],
_scored: false,
colors: ["#ffbc1c", "#ff1c1c", "#ff85e1", "#52a7ff", "#78ff5d"], // cor dos
obstaculos
timeInsert: 0,
insert: function () {
this._obs.push({
x: Largura,
// largura: 30 + Math.floor(21 * Math.random()),
largura: 50,
altura: 30 + Math.floor(120 * Math.random()),
color: this.colors[Math.floor(5 * Math.random())]
});
this.timeInsert = 30 + Math.floor(21 * Math.random());
},
update: function () {
if (this.timeInsert == 0)
this.insert();
else
this.timeInsert--;
for (var i = 0, size = this._obs.length; i < size; i++) {
var obs = this._obs[i];
obs.x -= speed;
if (!block.colliding && obs.x <= block.x + block.largura && block.x <=
obs.x + obs.largura && floor.y - obs.altura <= block.y + block.altura) {
block.colliding = true;
setTimeout(function() {
block.colliding = false;
}, 500);
if(block.lifes >= 1)
block.lifes--;
else
actualState = states.youLose;
}
else if(obs.x <= 0 && !obs._scored){
block.score++;
obs._scored = true;
if(actualPhase < pointsForNewPhase.length && block.score ==
pointsForNewPhase[actualPhase])
hasPassedPhase();
}
else if (obs.x <= -obs.largura) {
this._obs.splice(i, 1);
size--;
i--;
}
}
},
clean: function (){
this._obs = [];
},
design: function () {
for (var i = 0, size = this._obs.length; i < size; i++) {
var obs = this._obs[i];
ctx.fillStyle = obs.color;
ctx.fillRect(obs.x, floor.y - obs.altura, obs.largura, obs.altura);
}
}
};
function click(event) {
if (actualState == states.playing)
block.jump();
else if (actualState == states.play){
actualState = states.playing;
}
else if (actualState == states.youLose && block.y >= 2 * Altura) {
actualState = states.play;
obstacles.clean();
block.reset();
}
}
function hasPassedPhase() {
speed++;
actualPhase++;
block.lifes++;
labelNewPhase.texto = "Level" + actualPhase;
labelNewPhase.fadeIn(0.4);
setTimeOut(function () {
labelNewPhase.fadeOut(0.4);
}, 800);
}
function main() {
Altura = window.innerHeight;
Largura = window.innerWidth;
if (Largura >= 500) {
Largura = 600;
Altura = 600;
}
canvas = document.createElement("canvas");
canvas.width = Largura;
canvas.height = Altura;
canvas.style.border = "1px solid #000"; // borda preta para a canvas
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener("mousedown", click);
actualState = states.play;
record = localStorage.getItem("record");
if (record == null)
record = 0;
var image = "image";
img = new Image();
img.src = "imagens/sheet.png";
roda();
}
function roda() {
update();
design();
window.requestAnimationFrame(roda);
}
function update() {
if(actualState == states.playing)
obstacles.update();
floor.update();
block.update();
}
function design() {
//ctx.fillStyle = "#50beff"; // cor da tela em azul
//ctx.fillRect(0, 0, Largura, Altura);
bg.design(0, 0);
ctx.fillStyle = "#fff"; // cor da pontuação durante o jogo
ctx.font = "50px Arial";
ctx.fillText(block.score, 30, 60);
ctx.fillText(block.lifes, 540, 60);
ctx.fillStyle = "rgba(0, 0, 0, " + labelNewPhase.opacidade + ")";
ctx.fillText(labelNewPhase.texto, canvas.width / 2 - ctx.measureText
(labelNewPhase.texto).width / 2, canvas.height / 3);
if (actualState == states.playing)
obstacles.design();
floor.design();
block.design();
if (actualState == states.play)
play.design(Largura / 2 - play.largura / 2, Altura / 2 - play.altura / 2);
if (actualState == states.youLose) {
youLose.design(Largura / 2 - youLose.largura / 2, Altura / 2 -
youLose.altura / 2 - spriteRecord.altura / 2);
spriteRecord.design(Largura / 2 - spriteRecord.largura / 2, Altura / 2 +
youLose.altura / 2 - spriteRecord.altura / 2 - 25);
ctx.fillStyle = "#fff";
ctx.fillText(block.score, 375, 390);
if (block.score > record) {
novel.design(Largura / 2 - 170, Altura / 2 + 30);
ctx.fillText(record, 420, 470);
}
else
ctx.fillText(record, 420, 470);
}
}
//intialize the game > inicializa o jogo
</script>
</body>
</html>
I'm making a game, and on line 36 gave this error Uncaught ReferenceError: resetInterval is not defined. Can anybody help me?
1
asked by anonymous 12.02.2017 / 18:54
1 answer
2
It seems like the syntax error, change resetInterval to clearInterval
var fadeInId = setInterval(function() {
if(labelNewPhase.opacidade < 1.0)
labelNewPhase.opacidade += 0.01;
else{
clearInterval(fadeInId);
}
}, 10 * dt);
12.02.2017 / 19:41