var evnt = new Event("collide"); window.onload = ()=>{startGame();} function startGame() { const field = document.getElementsByClassName("container")[0]; for(let i=0, len=50; i { var touchMoveX = event.touches[0].clientX.toFixed(1); var touchMoveY = event.touches[0].clientY.toFixed(1); //console.log("x:"+touchMoveX); //console.log("y:"+touchMoveY); if(touchMoveX >=5 && touchMoveX <=230){ player.style.left = touchMoveX + "px" } }); var blocks = document.getElementsByClassName("block"); for(let i=0, len=blocks.length; i=335){ xDir = -xDir; } if(ballX+xDir<=5){ xDir = -xDir } if(ballY+yDir>=500){ //yDir = -yDir; var playAgain = confirm("Game Over! Play Again?") if(playAgain){ field.innerHTML = ""; startGame(); }else{ return; } } if(ballY+yDir<=5){ yDir = -yDir; } //ball-player collision: var object_1 = player.getBoundingClientRect(); var object_2 = ball.getBoundingClientRect(); if(object_1.left < object_2.left + object_2.width && object_1.left + object_1.width > object_2.left && object_1.top < object_2.top + object_2.height && object_1.top + object_1.height > object_2.top){ yDir=-yDir; } //block-ball collision: for(let j=0; j object_3.left && object_2.top < object_3.top + object_3.height && object_2.top + object_2.height > object_3.top) { yDir=-yDir; //xDir=-xDir; blocks[j].dispatchEvent(evnt); blocks[j] = null; //break; } } setTimeout(function(){ moveBall(ball, xDir, yDir, player, field, blocks) },20) } function Block(size, color) { const myBlock = document.createElement("div"); myBlock.style.position = "relative"; myBlock.style.display = "inline-block"; myBlock.style.width = size + "px"; myBlock.style.height = size + "px"; myBlock.style.margin = "0px"; myBlock.style.padding = "0px"; myBlock.style.background = color; myBlock.style.border = "1px solid black"; return myBlock; }; function Player(width, color) { const myPlayer = document.createElement("div"); myPlayer.style.position = "absolute"; myPlayer.style.width = width + "px"; myPlayer.style.height = "4px"; myPlayer.style.top = "90%"; myPlayer.style.left = "calc(50% - "+myPlayer.style.width+")"; myPlayer.style.background = color; return myPlayer; }; function Ball(size, color) { const myBall = document.createElement("div"); myBall.style.position = "absolute"; myBall.style.height = size + "px"; myBall.style.width = size + "px"; myBall.style.borderRadius = "50%"; myBall.style.background = color; myBall.style.left = "90vw"; myBall.style.top = "50vh"; return myBall; }

unfinished Game