-1
ich entwickle ein spiel als eine codierung übung und ich stoße auf einen fehler, den ich nicht finden kann, wenn ich drücke die gewählte taste es nicht entfernt die form und neuzeichnen anotherer es aus irgendeinem grund hält nur die form eine neue Form this is how the game should work Code hier eingebenclearRect isnt clearing leinwand
window.addEventListener("load", function() {
function clear(ctx, width, height) {
}
function drawRandomShape(width, height) {
//ctx.clearRect(0,0, canvas.width, canvas.height)
canvas.style.backgroundColor = 'white';
// var num = Math.floor(Math.random() * 10)
var number = 30;
var countdown = setInterval(function(){
timerSpan.innerHTML = number--;
//console.log(number)
if(number == 0 - 1){
clearInterval(countdown);
}
},1000);
function randomShape(){
var randomNum = Math.floor(Math.random() * 10);
//ctx.clearRect(0,0, canvas.width, canvas.height)
// if(number > 0){
if(randomNum >= 0 && randomNum <= 2){
// ctx.clearRect(0, 0, canvas.width, canvas.height);
var triangle = ctx.beginPath();
triangle += ctx.moveTo(0, 0);
triangle += ctx.lineTo(90, 90);
triangle += ctx.lineTo(0, 90);
triangle += ctx.closePath();
triangle += ctx.fillStyle = "red";
triangle += ctx.fill();
document.addEventListener('keyup', function shape(e){
if(e.keyCode == 37){
triangle += ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
document.removeEventListener('keyup', shape);
randomShape();
}
});
}else if(randomNum > 2 && randomNum <= 4){
// ctx.clearRect(0,0, canvas.width, canvas.height);
var blackTriangle = ctx.fillStyle = "black";
blackTriangle += ctx.beginPath();
blackTriangle += ctx.moveTo(0,0);
blackTriangle += ctx.lineTo(90, 90);
blackTriangle += ctx.lineTo(0, 90);
blackTriangle += ctx.fill();
document.addEventListener('keyup', function shape(e){
if(e.keyCode == 38){
blackTriangle += ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
document.removeEventListener('keyup', shape);
randomShape();
}
});
}else if(randomNum >= 4 && randomNum <= 6){
//ctx.clearRect(0, 0, canvas.width, canvas.height);
var redSquare = ctx.fillStyle = 'black';
redSquare += ctx.rect(200, 100, 90, 90)
redSquare += ctx.fill();
document.addEventListener('keyup', function shape(e){
if(e.keyCode == 39){
redSquare += ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
randomShape()
}
});
}else if(randomNum > 6 && randomNum < 10){
//ctx.clearRect(0,0, canvas.width, canvas.height);
var whiteSquare = ctx.rect(50,70,90,90);
whiteSquare += ctx.fillStyle = 'red';
whiteSquare += ctx.fill();
document.addEventListener('keyup', function shape(e) {
if(e.keyCode == 40){
whiteSquare += ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
document.removeEventListener('keyup', shape);
randomShape();
}
});
}
console.log(randomNum)
//};
}
randomShape();
}
//}, 1000);
function drawGameStartText(width, height ,score) {
width = 170;
height = 350;
ctx.fillStyle = 'White';
ctx.font = '30px Verdana'
ctx.fillText('Press space bar to start a new game' , width , height);
}
function restartGame(ctx, width, height){
}
var canvas = document.getElementById("shapes-game"),
height = canvas.scrollHeight,
width = canvas.scrollWidth,
gameOn = false,
expectedKey = undefined,
ctx = canvas.getContext('2d'),
// white triangle = up, red square = down,
// red triangle = left, white square = right
expectedKeysMap = {white0: 38, red1: 40, red0: 37, white1: 39};
timerSpan = document.getElementById("time-remaining");
scoreSpan = document.getElementById("score-val"),
seconds = 3;
// intervalId;
document.addEventListener("keyup", function(e) {
e.preventDefault();
if(e.keyCode == 32){
drawRandomShape();
}
});
drawGameStartText()
})body {
padding-bottom: 50px;
}
#shapes-game {
border: 4px solid grey;
background-color: black;
}
.canvas-container {
padding: 10px;
}
.canvas-container, #shapes-game {
height: 750px;
width: 800px;
}
.scores {
padding: 10px;
text-align: center;
}
.legend {
padding-top: 15px;
}
.legend-contents {
text-align: left;
padding-left: 30px;
}
.triangle-bottomleft-red {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
}
.triangle-bottomleft-black {
width: 0;
height: 0;
border-bottom: 54px solid black;
border-right: 58px solid transparent;
}
.triangle-inner-white {
position: relative;
top: 2px;
left: 2px;
width: 0;
height: 0;
border-bottom: 50px solid white;
border-right: 50px solid transparent;
}
.triangle-left {
width: 0;
height: 0;
border-top: 23px solid transparent;
border-bottom: 23px solid transparent;
border-right: 23px solid red;
}
.inner-triangle {
position: relative;
top: -20px;
left: 2px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
.red-square {
width: 50px;
height: 50px;
background-color: red;
}
.white-square {
width: 50px;
height: 50px;
background-color: white;
border-style: solid;
border-width: 1px;
}<!DOCTYPE html>
<html>
<head>
<title>Shapes!!</title>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="vendor/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<div class="col-xs-10 canvas-container">
<canvas id="shapes-game" height="750" width="800"></canvas>
</div>
<div class="col-xs-2 scores">
<h1>Score</h1>
<h3><span id="score-val">0</span></h3>
<h1>Timer</h1>
<h3><span id="time-remaining">30</span></h3>
<div class="legend">
<h1>Legend</h1>
<div class="legend-contents">
<div class="triangle-bottomleft-red">
</div>
<h4>Left</h4>
<div class="white-square">
</div>
<h4>Right</h4>
<div class="triangle-bottomleft-black">
<div class="triangle-inner-white"></div>
</div>
<h4>Up</h4>
<div class="red-square">
</div>
<h4>Down</h4>
</div>
</div>
</div>
</div>
</body>
</html>
Was denken Sie, die Linie 'ctx.clearRect (0, 0, ctx.canvas.width, ctx. canvas.height) 'tut? Was glaubst du, dass es zurückkommt? So wie du es geschrieben hast, wird es die gesamte Leinwand räumen. – zero298
gut, wie würde ich in der Lage sein, nur die Formen zu löschen? – Sean
Ich sehe eine Menge von auskommentiert 'clearRect' ist die Orte, an denen Sie versucht haben, es zu setzen und es hat nicht funktioniert? –