HTML5 Canvas négyzetes játék probléma

HTML5 Canvas négyzetes játék probléma
2017-06-11T18:23:15+02:00
2017-06-16T08:22:22+02:00
2022-12-04T15:15:53+01:00
kissGE99
Sziasztok. Nemrég kezdtem el beleásni magamat a JavaScript programozásba. Egy egyszerű játékot készítettem, azonban több probléma is felmerül benne. A játék lényege az lenne, hogy az indítás gombra legenerál a canvasra egy kitöltött és egy üres téglalapot. A négy iránybillentyűvel kellene a kitöltött téglalapot az üres téglalapba irányítani és ha ez sikerült, legenerálni őket újra.



<!DOCTYPE !html>
<html>
<head>
<title>Kiss Gergő beadandója</title>
<style>
#fooldal{
width:1000px;
height:600px;
margin:0 auto;
box-shadow:5px 5px 5px gray;
border:1px solid black;
}
#myCanvas{
display:block;
}
#button{
width:1000px;
height:auto;
text-align: center;
margin:0 auto;
}
</style>
<script>
var canvas,ctx;
window.onload=function(){
canvas=document.getElementById("myCanvas");
ctx=canvas.getContext("2d");
};
var rw=Math.floor((Math.random()*100)+5);
var rh=Math.floor((Math.random()*100)+5);
var x=500-rw/2;//Math.floor((Math.random()*1000)+1);
var y=300-rh/2;//Math.floor((Math.random()*600)+1);
var x2=Math.floor((Math.random()*1000)+5);
var y2=Math.floor((Math.random()*600)+5);


function rectSpawn(){
ctx.clearRect(0,0,canvas.width,canvas.height);
while(rw<20){
console.log(rw);
var rw=Math.floor((Math.random()*100)+1);
}
while(rh<20){
var rh=Math.floor((Math.random()*100)+1);
}
while(x-rw<0){
var x=Math.floor((Math.random()*1000)+1);
}
while(y-rh<0){
var y=Math.floor((Math.random()*600)+1);
}
while(x-rw>canvas.width){
var x=Math.floor((Math.random()*1000)+1);
}
while(y-rh>canvas.heght){
var y=Math.floor((Math.random()*600)+1);
}
ctx.fillStyle="black";
ctx.fillRect(x,y,rw,rh);
ctx.strokeStyle="red";
ctx.strokeRect(x2,y2,rw,rh);
};
function rectMoving(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.strokeStyle="red";
ctx.strokeRect(x2,y2,rw,rh);
ctx.fillStyle="black";
ctx.fillRect(x,y,rw,rh);
if(x==x2 && y==y2){
rectMoving();
}
};
document.onkeydown=function(e){
switch(e.keyCode){
case 37:x-=5;rectMoving();break;
case 38:y-=5;rectMoving();break;
case 39:x+=5;rectMoving();break;
case 40:y+=5;rectMoving();break;
default:break;
}
};


</script>
</head>
<body>
<div id="button">
<input type="button" id="gomb" value="Indítás" onClick="rectSpawn()" />
</div>
<div id="fooldal">
<canvas id="myCanvas" width="1000" height="600"></canvas>
</div>
</body>
</html>
Mutasd a teljes hozzászólást!

  • A rectSpawn függvényedben saját, lokális rw-rh-x-y változókat deklarálsz, és azok így egyrészt eltakarják a külsőket, másrészt undefined lesz az értékük.
    Húzogasd le a var-okat (mármint a rectSpawn-ban), és menni fog.
    Mutasd a teljes hozzászólást!
  • Ha szeretnél a játékra és a programozásra koncentrálni a canvas és IO kezelés helyett, ajánlom figyelmedbe a p5js könyvtárat
    Mutasd a teljes hozzászólást!
  • A négy iránybillentyűvel kellene a kitöltött téglalapot az üres téglalapba irányítani

    Csak kérdés:
    És ezek hol vannak?
    Vagy csak én nem látom?

    Megj: Máskor használd a "Forráskód" gombot (balról a 3.)...
    Mutasd a teljes hozzászólást!
  • Köszönöm a válaszokat, közben segítséggel ugyan, de egy új elgondolás révén sikerült megoldani.
    Mutasd a teljes hozzászólást!
  • Hali!

    … közben segítséggel ugyan, de egy új elgondolás révén sikerült megoldani.

    Akkor tedd meg, hogy megosztod velünk is a megoldást. Ugyanis, a Tudástár nem egy öncélú kérdezz-felelek színtér, hanem egy összefogott tudásbázis. A legfőbb célja pedig az, hogy mindenki okulhasson egy-egy probléma megoldásából.

    Mutasd a teljes hozzászólást!
  • Hello.
    Teljesen igazad van, itt is lenne (egy kicsit hosszú lett):
    var canvas, ctx; var elindultE=false; var urhajo; var ellensegek=[]; function ellenseg(x, y) { this.image = new Image(); this.image.src = "ellenseg.png"; this.x = x; this.y = y; this.sebesseg = -200; this.rajzol = function(ctx) { ctx.drawImage(this.image, this.x, this.y); } this.frissit = function(delta) { this.x += this.sebesseg * (delta / 1000); } this.benneVanE = function(x, y) { if (x>=this.x && x<= this.image.width+this.x && y>=this.y && y<= this.image.height+this.y){ return true; }else{ return false; } } } function uLoszer(uLX,uLY){ this.image=new Image(); this.image.src="loszer.png"; this.uLX=uLX; this.uLY=uLY; this.sebesseg=300; this.rajzol=function(ctx){ ctx.drawImage(this.image,this.uLX,this.uLY); } this.frissit=function(delta){ this.uLX += this.sebesseg * (delta /1000); } } function uOszt(uX,uY) { this.image=new Image(); this.image.src="urhajo.png"; this.uX=uX; this.uY=uY; this.uLoszerek=[]; this.lo=function(){ this.uLoszerek.push(new uLoszer(this.uX+this.image.width,this.uY+this.image.height/2-20)); } this.sebesseg=0; this.maxSebesseg=200; this.rajzol=function(ctx){ ctx.drawImage(this.image,this.uX,this.uY); for (i = 0; i < this.uLoszerek.length; i++) { this.uLoszerek.rajzol(ctx); } } this.frissit=function(delta){ this.uY += this.sebesseg * (delta / 1000); if(this.uY<0){ this.uY=0; }else if(this.uY>canvas.height-this.image.height){ this.uY=canvas.height-this.image.height; } for (i = this.uLoszerek.length-1; i >= 0; i--) { this.uLoszerek.frissit(delta); if(this.uLoszerek.uLX>canvas.width){ this.uLoszerek.splice(i,1); } } } } function randomEllensegSpawn(){ ellensegek.push(new ellenseg(canvas.width,Math.random()*(canvas.height-40))); } window.onload=function(){ canvas=document.getElementById("myCanvas"); ctx=canvas.getContext("2d"); urhajo=new uOszt(10,canvas.height/2-40); setInterval(function() { foCiklus(1000/60); }, 1000/60); }; function kezdoSzovegKirajzol(){ ctx.textAlign="center"; ctx.font="30px Verdana"; ctx.strokeStyle="white"; ctx.strokeText("Ezt a játékot Kiss Gergő",canvas.width/2,canvas.height/2-100); ctx.strokeText("készítette informatika beadandóként.",canvas.width/2,canvas.height/2-50); ctx.strokeText("Lőni 'Space'-szel tudsz.",canvas.width/2,canvas.height/2); ctx.strokeText("Játékba való belépés 'Enter'-rel, valamint irányításhoz",canvas.width/2,canvas.height/2+50); ctx.strokeText("használd a 'fel' és 'le' billentyűket.",canvas.width/2,canvas.height/2+100); } document.onkeydown=function(e){ switch(e.keyCode){ //enter case 13: if (!elindultE) { setInterval(randomEllensegSpawn, 500); } elindultE=true; break; //fel case 38: urhajo.sebesseg=-urhajo.maxSebesseg; break; //le case 40: urhajo.sebesseg=urhajo.maxSebesseg; break; //space case 32: urhajo.lo(); break; } }; document.onkeyup=function(e){ switch(e.keyCode){ case 40: case 38: urhajo.sebesseg=0; break; } }; function foCiklus(delta) { frissit(delta); rajzol(); } function frissit(delta){ urhajo.frissit(delta); for (i = ellensegek.length - 1; i >= 0; i--) { ellensegek.frissit(delta); if (ellensegek.x + ellensegek.image.width < 0) { ellensegek.splice(i, 1); break; } for (k = urhajo.uLoszerek.length - 1; k >= 0; k--) { if (ellensegek.benneVanE(urhajo.uLoszerek[k].uLX + urhajo.uLoszerek[k].image.width, urhajo.uLoszerek[k].uLY + urhajo.uLoszerek[k].image.height / 2)) { ellensegek.splice(i, 1); urhajo.uLoszerek.splice(k, 1); break; } } } } function rajzol(){ ctx.clearRect(0, 0, canvas.width, canvas.height); urhajo.rajzol(ctx); for (i = 0; i < ellensegek.length; i++) ellensegek.rajzol(ctx); if(!elindultE){ kezdoSzovegKirajzol(); } }






    Mutasd a teljes hozzászólást!
  • Ennyi kódból nem valószínű, hogy valami is meg fog jelenni a böngészőben...
    És ha már innen nem puskáztál, akkor próbáld meg esetleg ennek a teszt-nek a forráskódjából kikeresni néhány fogást az elképzelésed megvalósításához...
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd