1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147:
| var canvas = document.getElementById("gameScreen"); var context = canvas.getContext("2d"); var imgBrick = document.getElementById('img_brick'); canvas.width = 1020; canvas.height = 700; this.width = 200; this.height = 20; this.position = { x: canvas.width/2 - this.width/2, y: canvas.height - this.height - 10, }; this.maxSpeed = 10; this.speed = 0;
function gameLoop() { animate(); update(); drawBALL(); changeBALL(); requestAnimationFrame(gameLoop); } function animate() { requestAnimationFrame(animate); context.clearRect(0, 650, canvas.width, canvas.height); context.fillStyle = "black"; context.fillRect( this.position.x, this.position.y, this.width, this.height ); } function update() { this.position.x += this.speed; if (this.position.x < 0) {this.position.x = 0} if (this.position.x > canvas.width - this.width) {this.position.x = canvas.width - this.width} } requestAnimationFrame(gameLoop);
function moveLeft() { this.speed = -this.maxSpeed; } function moveRight() { this.speed = this.maxSpeed; } function stopp() { this.speed = 0; } document.addEventListener("keydown", event => { if (event.isComposing || event.keyCode === 37) { moveLeft(); } if (event.isComposing || event.keyCode === 39) { moveRight(); }});
document.addEventListener("keyup", event => { if (event.isComposing || event.keyCode === 37) { if(this.speed < 0) {stopp();} } if (event.isComposing || event.keyCode === 39) { if(this.speed > 0) {stopp();} }});
var x = 200; var y = 200; var vx = 8; var vy = 8;
var radius = 20; function drawBALL() { x += vx; y += vy;
[b]context.clearRect(0, 0, canvas.width, 650);[/b] /*durch dieses clearRect ist das Image, das ich in der Funktion brick() lade, nicht sichtbar..was tun?**/ context.fillStyle = "#FF0080"; context.beginPath(); context.arc(x, y, radius, 0, Math.PI*2, true); context.closePath(); context.fill(); }
function changeBALL() { var bottomofBALL = y + radius; var topofRECT = this.position.y; var leftRECT = this.position.x; var rightRECT = this.position.x + this.width; if ((x + radius) >= canvas.width) {vx = -vx} if ((x - radius) <= 0) {vx = -vx} if ((y - radius) <= 0) {vy = -vy} if (( bottomofBALL >= topofRECT) && (x >= leftRECT) && (x <= rightRECT)){vy = -vy} if ( y > canvas.height) {vy = 50} }
/** BRICK ************************************************************************************************/ function brick() { imgBrick.onload = function() { context.drawImage(imgBrick, 10, 10, 100, 100) } }
brick();] |