Skip to content

Instantly share code, notes, and snippets.

@courtney-scripted

courtney-scripted/index.html

Created May 30, 2017 20:16
Show Gist options
  • Save courtney-scripted/ab1175785384e2c148307d56ac81990f to your computer and use it in GitHub Desktop.
Save courtney-scripted/ab1175785384e2c148307d56ac81990f to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=ab1175785384e2c148307d56ac81990f
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Capstone Step 6</title>
</head>
<body>
<h2>Catch</h2>
<p>Score:</p>
<p class="score">0</p>
<div class="canvas">
<div class="paddle"> </div>
<div class="item"> </div>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
//DATA TO KEEP TRACK
var score = 0;
//MOVE PLAYER
$("body").keydown(function(event){
if(event.which === 37){
$(".paddle").css("left", $(".paddle").offset().left - 10);
}
else if (event.which === 39){
$(".paddle").css("left", $(".paddle").offset().left +10);
}
else{
return;
}
});
//MAKE OBJECT FALL
setInterval(animate,100);
function animate() {
var random = Math.random() * $(".canvas").width();
console.log(random);
$( "body" ).append('<div class="item"> </div>');
$(".item").last().css("left", random);
$(".item").each(function(){
var itemTop = $(this).position().top ;
var itemBottom = itemTop + $(this).height();
var gameFloor = $(".canvas").position().top + $(".canvas").height();
if (itemBottom < gameFloor) {
$(this).css("top", itemTop + 30);
}
else {
$(this).remove();
}
if(checkcollison(this)){
score = score + 1;
$(".score").text(score);
$(this).remove();
}
});
}
//CHECK COLLISION
function checkcollison(selector){
var paddleTop = $(".paddle").offset().top;
var paddleBottom = paddleTop + $(".paddle").height();
var paddleLeft = $(".paddle").offset().left;
var paddleRight = paddleLeft + $(".paddle").width();
var itemTop = $(selector).offset().top;
var itemBottom = itemTop + $(selector).height();
var itemLeft = $(selector).offset().left;
var itemRight = itemLeft + $(selector).width();
if (paddleLeft <= itemLeft && itemLeft <=paddleRight){
if ((paddleTop <= itemTop && itemTop <= paddleBottom)||(paddleTop <= itemBottom && itemBottom <=paddleBottom)){
return true;
}
}
return false;
}
Raw
styles.css
p {
display: inline;
}
.canvas {
height: 400px;
width: 400px;
border: solid;
}
.paddle {
position: absolute;
height:10px;
width:60px;
background-color : black;
top : 450px;
}
.item {
position : absolute;
height:10px;
width:10px;
left: 50%;
top: 10%;
background-color : red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment