Quick Bounce is coded in HTML and JavaScript frameworks. Here is the source code:
body { background-color:rgb(180,0,0) }Quick Bounce
function getCookie(c_name) { var c_value = document.cookie; var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1) { c_start = c_value.indexOf(c_name + "="); } if (c_start == -1) { c_value = null; } else { c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1) { c_end = c_value.length; } c_value = unescape(c_value.substring(c_start,c_end)); } return c_value; } function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } function checkCookie() { var username=getCookie("username"); if (username!=null && username!="") { alert("Welcome Back " + username); } else { username=prompt("Please enter your name:",""); if (username!=null && username!="") { setCookie("username",username,5); } } }
var gameWidth = 500 var gameHeight = 400</p> <p>var intervalOne,intervalTwo,timeoutOne,x var angle = 2 var tempX = 0 var tempY = 0 var speed = 65 var getPad = 0 var nextScore = 0 var score = 0 var count = 0 var block = 1 var square = 0 var squareTop = 0 var squareLeft = 0 var squareMotion = 1 var collisionOne = 0 var collisionTwo = 0 var collisionThree = 0</p> <p>document.body.style.margin = "0px" document.body.style.padding = "0px"</p> <p>function setupGame() { document.getElementById("display").style.borderRight = "20px solid 99CCFF" document.getElementById("display").style.borderBottom = "20px solid 99CCFF" document.getElementById("display").style.width = gameWidth+"px" document.getElementById("display").style.height = gameHeight+"px" document.getElementById("display").style.backgroundColor = "#00FF00" document.getElementById("square1").style.position = "absolute" document.getElementById("square1").style.width = "40px" document.getElementById("square1").style.height = "40px" document.getElementById("square1").style.backgroundColor = "#008B8B" document.getElementById("square1").style.display = "none" document.getElementById("square0").style.position = "absolute" document.getElementById("square0").style.width = "40px" document.getElementById("square0").style.height = "40px" document.getElementById("square0").style.backgroundColor = "#008B8B" document.getElementById("square0").style.display = "none" document.getElementById("graphic2").style.position = "absolute" document.getElementById("graphic2").style.width = "60px" document.getElementById("graphic2").style.height = "30px" document.getElementById("graphic2").style.paddingTop = "10px" document.getElementById("graphic2").style.textAlign = "center" document.getElementById("graphic2").style.font = "15px Iskra, calibri" document.getElementById("graphic2").style.backgroundColor = "#f00" document.getElementById("graphic2").style.color = "#ffff" document.getElementById("graphic2").innerHTML = "<a id=\"play\" href=\"javascript:newGame()\">PLAY</a>" document.getElementById("graphic2").style.color = "#FFFF00" document.getElementById("graphic2").style.textDecoration = "none"</p> <p>padTop = Math.floor(gameHeight/2)-30 padLeft = Math.floor(gameWidth/2)-40</p> <p>document.getElementById("graphic2").style.top = padTop+"px" document.getElementById("graphic2").style.left = padLeft+"px"</p> <p>document.getElementById("graphic").innerHTML = "Quick Bounce" document.getElementById("graphic").style.padding = "10px" document.getElementById("graphic").style.textAlign = "center" document.getElementById("graphic").style.font = "2.0em Iskra, sans-serif" document.getElementById("graphic").style.fontWeight = "normal" document.getElementById("graphic").style.color = "#003399"</p> <p>timeoutOne = setTimeout("intervalTwo = setInterval('demoGame()', speed)", 4000) }</p> <p>function runGame() { angle = 2 clearTimeout(timeoutOne) document.getElementById("square0").style.display = "block" document.getElementById("square1").style.display = "block"</p> <pre class="language-nolang"><code>if(square == 0) { x = document.getElementById("square0") square = 1 } else { x = document.getElementById("square1") square = 0 } </code></pre> <p>bounceGame() }</p> <p>function newGame() { block = 0 angle = 2 tempX = 0 tempY = 0 square = 0 squareTop = 0 squareLeft = 0 squareMotion = 1 nextScore = 0 score = 0 count = 0 collisionOne = 0 collisionTwo = 0 collisionThree = 0</p> <p>clearTimeout(timeoutOne) clearInterval(intervalOne) clearInterval(intervalTwo) document.getElementById("square0").style.left = "0px" document.getElementById("square0").style.top = "0px" document.getElementById("square0").style.display = "block" document.getElementById("square1").style.left = "0px" document.getElementById("square1").style.top = "0px" document.getElementById("square1").style.display = "block" document.getElementById("graphic2").style.top = (gameHeight-40)+"px" document.getElementById("graphic2").innerHTML = "" document.getElementById("graphic").innerHTML = ""</p> <p>intervalOne = setInterval("playGame()", speed) }</p> <p>function playGame() { if(block) { return }</p> <pre class="language-nolang"><code>if(square == 0) { x = document.getElementById("square0") square = 1 } else { x = document.getElementById("square1") square = 0 } </code></pre> <p>bounceGame() checkCollision() }</p> <p>function assignM(aM) { squareMotion = aM }</p> <p>function bounceGame() { if(squareMotion==1) { if(squareTop>=(gameHeight-40) && squareLeft>=(gameWidth-40)) { assignM(3) moveDR(-40) }</p> <pre class="language-nolang"><code> if(squareTop>=(gameHeight-40)) { assignM(2) moveDL(-40) } else if(squareLeft>=(gameWidth-40)) { assignM(4) moveDL(40) } else { moveDR(40) } } else if(squareMotion==2) { if(squareTop<=0 && squareLeft>=(gameWidth-40)) { assignM(4) moveDL(40) } if(squareLeft>=(gameWidth-40)) { assignM(3) moveDR(-40) } else if(squareTop<=0) { assignM(1) moveDR(40) } else { moveDL(-40) } } else if(squareMotion==3) { if(squareTop<=0 && squareLeft<=0) { assignM(1) moveDR(40) } if(squareTop<=0) { assignM(4) moveDL(40) } else if(squareLeft<=0) { assignM(2) moveDL(-40) } else { moveDR(-40) } } else if(squareMotion==4) { if(squareTop>=(gameHeight-40) && squareLeft<=0) { assignM(2) moveDL(-40) } if(squareLeft<=0) { assignM(1) moveDR(40) } else if(squareTop>=(gameHeight-40)) { assignM(3) moveDR(-40) } else { moveDL(40) } } </code></pre> <p>}</p> <p>function moveDR(amount) { save = amount amount = Math.floor(amount/angle)</p> <pre class="language-nolang"><code>if(angle == 0) { amount = 0 } </code></pre> <p>squareLeft += amount x.style.left = squareLeft+"px" squareTop += save x.style.top = squareTop+"px" }</p> <p>function moveDL(amount) { save = amount amount = Math.floor(amount/angle)</p> <pre class="language-nolang"><code>if(angle == 0) { amount = 0 } </code></pre> <p>squareLeft -= amount x.style.left = squareLeft+"px" squareTop += save x.style.top = squareTop+"px" }</p> <p>function assignAngle(aa) { if(aa==1) { angle = 0 nextScore = 500 } if(aa==2) { angle = 2 nextScore = 100 }</p> <pre class="language-nolang"><code>score += nextScore </code></pre> <p>document.getElementById("graphic2").innerHTML = nextScore }</p> <p>function flashScore() { if(score > 0) {<br> if(nextScore == "Game Over") { nextScore = score } else { nextScore = "Game Over" } document.getElementById("graphic").innerHTML = nextScore } else { document.getElementById("graphic").innerHTML = "Game Over" } } function countUp() { if(count < (Math.floor(score/10)*8)) { count += Math.floor(score/10) } else if(count >= (Math.floor(score/10)*8) && count <= (Math.floor(score/10)*9)) { if((Math.floor(score/10)*9) > 200) { count += Math.floor(score/10) } else { count += 10 } } else { if(Math.floor(score/10) > 30) { count += 10 } else { count += 1 } }</p> <pre class="language-nolang"><code>if(count > score) { count = score clearInterval(intervalOne) intervalOne = setInterval("flashScore()", 1997) } </code></pre> <p>document.getElementById("graphic").innerHTML = count }</p> <p>function checkCollision() { var actualLeft = getPad-30</p> <pre class="language-nolang"><code>if(squareTop == 0) { document.getElementById("graphic2").innerHTML = "" } if((squareTop+40)==(gameHeight-40)) { difference = Math.floor(squareLeft-actualLeft) if(difference>=(-39)&&difference<4) { collisionOne++ collisionTwo = 0 collisionThree = 0 if(collisionOne > 3) { assignM(Math.floor(Math.random() * 2) + 2) } else { assignM(3) } assignAngle(2) } else if(difference>=5&&difference<15) { collisionOne = 0 collisionTwo++ collisionThree = 0 if(collisionTwo > 3) { assignM(Math.floor(Math.random() * 2) + 2) assignAngle(2) } else { assignM(3) assignAngle(1) } } else if(difference>=15&&difference<59) { collisionOne = 0 collisionTwo = 0 collisionThree++ if(collisionThree > 3) { assignM(Math.floor(Math.random() * 2) + 2) } else { assignM(2) } assignAngle(2) } } else if((squareTop+40)==gameHeight) { block = 1 clearInterval(intervalOne) setupGame() intervalOne = setInterval("countUp(4000)", speed) } </code></pre> <p>}</p> <p>function getMouseXY(a) { if(navigator.appName=="Netscape") {<br> tempX = a.pageX tempY = a.pageY }<br> else { tempX = event.clientX + document.body.scrollLeft tempY = event.clientY + document.body.scrollTop }</p> <pre class="language-nolang"><code>if(tempX < 0) { tempX = 0 } getPad = tempX if(getPad <= 30) { getPad = 30 } if((getPad-30) > Math.floor(gameWidth-60)) { getPad = Math.floor(gameWidth-60)+30 } if(!block) { document.getElementById("graphic2").style.left = (getPad-30)+"px" } </code></pre> <p>}</p> <p>document.onmousemove = getMouseXY</p> <p>setupGame()
Log in or sign up for Devpost to join the conversation.