Hallo allemaal,
ik ben bezig met het boek how to make games with javascript and html5. In het boek staat een opdracht over hoe je een bal kan laten stuiteren in een canvas, nu wou ik graag nog een bal toevoegen en na wat probeersels is het met een omslachtige manier gelukt maar nu heb ik het probleem dat de tweede bal flikkert. Weet iemand misschien waardoor dit wordt veroorzaakt? Alle tips worden geapprecieerd!
Hier de code:
<html>
<head>
<title>2 ball met input</title>
<style>
canvas {
background-color:yellow;
}
form {
width:330px;
margin:20px;
background-color:red;
padding:20px;
}
</style>
<script type="text/javascript">
//==== bal 1 ====\\
var boxx = 20;
var boxy = 30;
var boxwidth = 350;
var boxheight = 250;
var ballrad = 10;
var boxboundx = boxwidth+boxx-ballrad;
var boxboundy = boxheight+boxy-ballrad;
var inboxboundx = boxx+ballrad;
var inboxboundy = boxy+ballrad;
var ballx = 50;
var bally = 60;
var ctx;
var ballvx = 4;
var ballvy = 8;
function init() {
ctx = document.getElementById ('canvas').getContext('2d');
ctx.linewidth = ballrad;
ctx.fillStyle ="rgb(200,0,50)";
moveball();
setInterval(moveball,20);
}
//==== beweging bal 1 ====\\
function moveball(){
ctx.clearRect(boxx,boxy,boxwidth,boxheight);
moveandcheck();
ctx.beginPath();
ctx.arc(ballx, bally, ballrad,0,Math.PI*2,false);
ctx.fill();
ctx.strokeRect(boxx,boxy, boxwidth,boxheight);
}
function moveandcheck(){
var nballx = ballx + ballvx;
var nbally = bally +ballvy;
if (nballx > boxboundx) {
ballvx = -ballvx;
nballx = boxboundx;
}
if (nballx < inboxboundx) {
nballx = inboxboundx;
ballvx = -ballvx;
}
if (nbally > boxboundy) {
nbally = boxboundy;
ballvy = -ballvy;
}
if (nbally < inboxboundy) {
nbally = inboxboundy;
ballvy = -ballvy;
}
ballx = nballx;
bally = nbally;
}
//==== bal 2 ====\\
var boxx2 = 20;
var boxy2 = 30;
var boxwidth2 = 350;
var boxheight2 = 250;
var ballrad2 = 10;
var boxboundx2 = boxwidth2+boxx2-ballrad2;
var boxboundy2 = boxheight2+boxy2-ballrad2;
var inboxboundx2 = boxx2+ballrad2;
var inboxboundy2 = boxy2+ballrad2;
var ballx2 = 50;
var bally2 = 60;
var ctx2;
var ballvx2 = 4;
var ballvy2 = 8;
function init2() {
ctx2 = document.getElementById ('canvas').getContext('2d');
ctx2.linewidth = ballrad;
ctx2.fillStyle ="rgb(200,0,50)";
moveball2();
setInterval(moveball2,20);
}
//==== beweging bal 2 ====\\
function moveball2(){
ctx.clearRect(boxx2,boxy2,boxwidth2,boxheight2);
moveandcheck2();
ctx.beginPath();
ctx.arc(ballx2, bally2, ballrad2,0,Math.PI*2,false);
ctx.fill();
ctx.strokeRect(boxx2,boxy2, boxwidth2,boxheight2);
}
function moveandcheck2(){
var nballx2 = ballx2 + ballvx2;
var nbally2 = bally +ballvy2;
if (nballx2 > boxboundx2) {
ballvx2 = -ballvx2;
nballx2 = boxboundx2;
}
if (nballx2 < inboxboundx2) {
nballx2 = inboxboundx2;
ballvx2 = -ballvx2;
}
if (nbally2 > boxboundy2) {
nbally2 = boxboundy2;
ballvy2 = -ballvy2;
}
if (nbally2 < inboxboundy2) {
nbally2 = inboxboundy2;
ballvy2 = -ballvy2;
}
ballx2 = nballx2;
bally2 = nbally2;
}
</script>
</head>
<body onLoad="init(), init2();">
<canvas id="canvas" width= "400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<form name="f" id="f" onSubmit= "return change();">
Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-20" max="20" />
<br>
Vertical velocity <input name= "vv" id="vv" value="8" type="number" min="-20" max="20"/>
<input type="submit" value="CHANGE"/>
</form>
</body>
</html>
ik ben bezig met het boek how to make games with javascript and html5. In het boek staat een opdracht over hoe je een bal kan laten stuiteren in een canvas, nu wou ik graag nog een bal toevoegen en na wat probeersels is het met een omslachtige manier gelukt maar nu heb ik het probleem dat de tweede bal flikkert. Weet iemand misschien waardoor dit wordt veroorzaakt? Alle tips worden geapprecieerd!
Hier de code:
<html>
<head>
<title>2 ball met input</title>
<style>
canvas {
background-color:yellow;
}
form {
width:330px;
margin:20px;
background-color:red;
padding:20px;
}
</style>
<script type="text/javascript">
//==== bal 1 ====\\
var boxx = 20;
var boxy = 30;
var boxwidth = 350;
var boxheight = 250;
var ballrad = 10;
var boxboundx = boxwidth+boxx-ballrad;
var boxboundy = boxheight+boxy-ballrad;
var inboxboundx = boxx+ballrad;
var inboxboundy = boxy+ballrad;
var ballx = 50;
var bally = 60;
var ctx;
var ballvx = 4;
var ballvy = 8;
function init() {
ctx = document.getElementById ('canvas').getContext('2d');
ctx.linewidth = ballrad;
ctx.fillStyle ="rgb(200,0,50)";
moveball();
setInterval(moveball,20);
}
//==== beweging bal 1 ====\\
function moveball(){
ctx.clearRect(boxx,boxy,boxwidth,boxheight);
moveandcheck();
ctx.beginPath();
ctx.arc(ballx, bally, ballrad,0,Math.PI*2,false);
ctx.fill();
ctx.strokeRect(boxx,boxy, boxwidth,boxheight);
}
function moveandcheck(){
var nballx = ballx + ballvx;
var nbally = bally +ballvy;
if (nballx > boxboundx) {
ballvx = -ballvx;
nballx = boxboundx;
}
if (nballx < inboxboundx) {
nballx = inboxboundx;
ballvx = -ballvx;
}
if (nbally > boxboundy) {
nbally = boxboundy;
ballvy = -ballvy;
}
if (nbally < inboxboundy) {
nbally = inboxboundy;
ballvy = -ballvy;
}
ballx = nballx;
bally = nbally;
}
//==== bal 2 ====\\
var boxx2 = 20;
var boxy2 = 30;
var boxwidth2 = 350;
var boxheight2 = 250;
var ballrad2 = 10;
var boxboundx2 = boxwidth2+boxx2-ballrad2;
var boxboundy2 = boxheight2+boxy2-ballrad2;
var inboxboundx2 = boxx2+ballrad2;
var inboxboundy2 = boxy2+ballrad2;
var ballx2 = 50;
var bally2 = 60;
var ctx2;
var ballvx2 = 4;
var ballvy2 = 8;
function init2() {
ctx2 = document.getElementById ('canvas').getContext('2d');
ctx2.linewidth = ballrad;
ctx2.fillStyle ="rgb(200,0,50)";
moveball2();
setInterval(moveball2,20);
}
//==== beweging bal 2 ====\\
function moveball2(){
ctx.clearRect(boxx2,boxy2,boxwidth2,boxheight2);
moveandcheck2();
ctx.beginPath();
ctx.arc(ballx2, bally2, ballrad2,0,Math.PI*2,false);
ctx.fill();
ctx.strokeRect(boxx2,boxy2, boxwidth2,boxheight2);
}
function moveandcheck2(){
var nballx2 = ballx2 + ballvx2;
var nbally2 = bally +ballvy2;
if (nballx2 > boxboundx2) {
ballvx2 = -ballvx2;
nballx2 = boxboundx2;
}
if (nballx2 < inboxboundx2) {
nballx2 = inboxboundx2;
ballvx2 = -ballvx2;
}
if (nbally2 > boxboundy2) {
nbally2 = boxboundy2;
ballvy2 = -ballvy2;
}
if (nbally2 < inboxboundy2) {
nbally2 = inboxboundy2;
ballvy2 = -ballvy2;
}
ballx2 = nballx2;
bally2 = nbally2;
}
</script>
</head>
<body onLoad="init(), init2();">
<canvas id="canvas" width= "400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<form name="f" id="f" onSubmit= "return change();">
Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-20" max="20" />
<br>
Vertical velocity <input name= "vv" id="vv" value="8" type="number" min="-20" max="20"/>
<input type="submit" value="CHANGE"/>
</form>
</body>
</html>
