3
Ich versuche ein Pong-Spiel in Canvas zu machen. Ich dachte, ich würde damit beginnen, den Ball über die Straße zu bewegen. Das Problem ist, wenn ich die Draw-Funktion in eine Schleife verwandle, anstatt in einen Ball an jeder neuen Position. (Siehe Abbildung unten.)JavaScript + Canvas Moving Object
Ich dachte, die Leinwand Clearing- und dann wieder zeichnet alles würde das Problem lösen, aber anscheinend nicht.
Hier ist mein Code:
HTML:
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>Super Pong!</title>
<script type="text/javascript" src="superPong.js"></script>
</head>
<body>
<nav>
<ul id="navlist">
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
</nav>
<div id="content">
<canvas width="1000" height="600">Your browser does not support HTML5 Canvas</canvas>
</div>
</body>
</html>
CSS:
body {
background-color: #E93D19;
color: #341711;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 2vw;
}
#content {
text-align: center;
padding-top: 3%;
}
canvas {
background-color: white;
}
nav {
height: 100px;
width: 100%;
text-align: center;
font-size: 3vw;
}
#navlist {
background-color: #FD851D;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
transform: translateY(10%);
}
#navlist li {
display: inline;
}
#navlist a {
color: #C91D09;
text-decoration: none;
}
#navlist a:hover {
background-color: #C91D09;
color: #FD851D;
}
JavaScript:
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
var canWidth=canvas.width;
var canHeight=canvas.height;
var pi=Math.PI;
var timer=null;
var ms=16;
var gameBall={
size:30,
positionX:0,
positionY:0,
color:"#FFF",
set setSize(newSize){
this.size=newSize;
},
set setPosX(posX){
this.positionX=posX;
},
set setPosY(posY){
this.positionY=posY;
},
set setColor(newColor){
this.color=newColor;
},
get getSize(){
return this.size;
},
get getPosX(){
return this.positionX;
},
get getPosY(){
return this.positionY;
},
get getColor(){
return this.color;
}
}
function clearCanvas(){
ctx.clearRect(0,0,canWidth,canHeight);
}
function drawBackground(){
ctx.fillStyle="#000";
ctx.fillRect(0,0,canWidth,canHeight);
}
function drawBall(){
ctx.save();
var posX=gameBall.getPosX;
var posY=gameBall.getPosY;
var size=gameBall.getSize;
ctx.fillStyle=gameBall.getColor;
ctx.arc(posX,posY,size,0,2*pi,true);
ctx.fill();
ctx.restore();
}
function updateBall(){
//clearCanvas();
//drawBackground();
gameBall.setPosX=gameBall.getPosX+3;
gameBall.setPosY=gameBall.getPosY+3;
drawBall();
}
gameBall.setPosX=100;
gameBall.setPosY=100;
drawBackground();
timer=setInterval(updateBall, ms);
}
Ich hätte vorgeschlagen, die Zeichenfläche bei jedem Update zu löschen, bevor neue Positionen gezeichnet werden usw. Ich sehe, dass Sie das in Ihrer 'updateBall' Funktion haben, aber es scheint auskommentiert zu sein. Habe ich recht, wenn ich sage, dass es nicht funktioniert hat? –
Der Grund, warum es momentan auskommentiert ist, dass ich ein paar verschiedene Lösungen versuchte (wie "ctx.save() und ctx.restore()"). Leider funktioniert das nicht. –
Ich habe eine Geige (der Code ist leicht aktualisiert, aber das Problem bleibt) http://jsfiddle.net/Q5HDu/288/ –