Scribd
Upload
156 views10 pages

127 Fruits Slice Game Source Code

The document is the code for a fruit catching game. It includes the HTML, CSS, and JavaScript code. The HTML contains the game elements like the score, fruit container, and start button. The CSS styles these elements and sets up the game board. The JavaScript controls the game play by randomly generating and moving fruits for the player to catch, tracking score and lives, and ending the game when lives are lost.

Uploaded by

shah g
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
156 views10 pages

127 Fruits Slice Game Source Code

The document is the code for a fruit catching game. It includes the HTML, CSS, and JavaScript code. The HTML contains the game elements like the score, fruit container, and start button. The CSS styles these elements and sets up the game board. The JavaScript controls the game play by randomly generating and moving fruits for the player to catch, tracking score and lives, and ending the game when lives are lost.

Uploaded by

shah g
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

<!--index.

html-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruits Game</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="styling.css">
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.
4/themes/smoothness/jquery-ui.css">
</head>

<body>
<div id="container">
<div id="score">
Score: <span id="scorevalue">0</span>
</div>
<div id="trialsLeft">

</div>
<div id="correct">
Correct
</div>
<div id="wrong">
Try again
</div>
<div id="fruitsContainer">
<img id="fruit1" class="fruit">
</div>
<div id="instruction">
Catch Fruits
</div>
<div id="startreset">
Start Game
</div>
<div id="gameOver">

</div>
</div>
<audio id="slicesound">
<source src="audio/slicefruit.mp3"></source>
<source src="audio/slicefruit.ogg"></source>
</audio>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/j
query.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4
/jquery-ui.min.js">
</script>
<script src="jquery.js"></script>
</body>
</html>

/*styling.css*/
html{
height: 100%;
background: radial-gradient(circle, #fff, #ccc);
background: -webkit-radial-gradient(circle, #fff,
#ccc);
background: -o-radial-gradient(circle, #fff, #ccc);
background: -moz-radial-gradient(circle, #fff, #ccc);
}
#container{
height: 600px;
width: 750px;
background-color: #9DD2EA;
margin: 10px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 0px 0px #009de4;
-moz-box-shadow: 0px 4px 0px 0px #009de4;
-webkit-box-shadow: 0px 4px 0px 0px #009de4;
/* box-shadow: [horizontal offset] [vertical
offset] [blur radius] [optional spread radius] [color]*/
position: relative;
}

#score{
background-color: #F1FF92;
color: #888E5F;
padding: 11px;
position: absolute;
left: 700px;
box-shadow: 0px 4px 0px #9da853;
-moz-box-shadow: 0px 4px 0px #9da853;
-webkit-box-shadow: 0px 4px 0px #9da853;
}

#correct{
position: absolute;
left: 260px;
background-color: #42e252;
color: white;
padding: 11px;
display: none;
}

#wrong{
position: absolute;
left: 250px;
background-color: #de401a;
color: white;
padding: 11px;
display: none;
}

#fruitsContainer{
width: 650px;
height: 400px;
margin: 50px auto 10px auto;
background-color: white;
box-shadow: 0px 4px #535aa8;
-moz-box-shadow: 0px 4px #535aa8;
-webkit-box-shadow: 0px 4px #535aa8;
font-size: 100px;
text-align: center;
font-family: cursive, sans-serif;
color: black;
position: relative;
overflow: hidden;
}

#instruction{
width: 450px;
height: 50px;
background-color: #B481D9;
margin: 10px auto;
text-align: center;
line-height: 45px;
box-shadow: 0px 4px #8153a8;
-moz-box-shadow: 0px 4px #8153a8;
-webkit-box-shadow: 0px 4px #8153a8;
}

#choices{
width: 450px;
height: 100px;
margin: 5px auto;
}

.box{
width: 85px;
height: 85px;
background-color: white;
float: left;
margin-right: 36px;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 80px;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}

.box:hover, #startreset:hover{
/* background-color: #9C89F6;*/
/* color: white;*/
/* box-shadow: 0px 4px #6b54d3;*/
/* -moz-box-shadow: 0px 4px #6b54d3;*/
/* -webkit-box-shadow: 0px 4px #6b54d3;*/
}

.box:active, #startreset:active{
background-color: #9C89F6;
color: white;
box-shadow: 0px 0px #6b54d3;
-moz-box-shadow: 0px 0px #6b54d3;
-webkit-box-shadow: 0px 0px #6b54d3;
top: 4px;
}
#box4{
margin-right: 0;
}

#startreset{
width: 78px;
padding: 10px;
background-color: rgba(255,255,255,0.5);
margin: 0 auto;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
}

#trialsLeft{
width: 80px;
padding: 10px;
position: absolute;
background-color: #F1FF92;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
/* visibility: hidden;*/
display: none;
}

#gameOver{
height: 200px;
width: 500px;
background: linear-gradient(#F3CA6B, #F3706C);
background: -webkit-linear-gradient(#F3CA6B, #F3706C);
background: -o-linear-gradient(#F3CA6B, #F3706C);
background: -moz-linear-gradient(#F3CA6B, #F3706C);
color: white;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 170px;
left: 145px;
z-index: 2;
display: none;
}

.life{
width: 16px;
height: 16px;
margin: 0 5px;
}

.fruit{
display: none;
position: absolute;
}

//jquery.js
var playing = false;
var score;
var trialsLeft;
var step;
var action; //used for setInterval
var fruits = ['apple', 'banana', 'cherries', 'grapes',
'mango', 'orange', 'peach', 'pear', 'watermelon'];
$(function(){

//click on start reset button

$("#startreset").click(function(){

//we are playing


if(playing == true){

//reload page
location.reload();
}else{

//we are not playing


playing = true; //game initiated

//set score to 0
score = 0; //set score to 0
$("#scorevalue").html(score);
//show trials left
$("#trialsLeft").show();
trialsLeft = 3;
addHearts();

//hide game over box


$("#gameOver").hide();

//change button text to reset game


$("#startreset").html("Reset Game");

//start sending fruits


startAction();
}
});

//slice a fruit

$("#fruit1").mouseover(function(){
score++;
$("#scorevalue").html(score); //update score
// document.getElementById("slicesound").play();
$("#slicesound")[0].play();//play sound

//stop fruit
clearInterval(action);

//hide fruit
$("#fruit1").hide("explode", 500); //slice fruit

//send new fruit


setTimeout(startAction, 500);
});

//functions

//fill trialLeft box with hearts

function addHearts(){
$("#trialsLeft").empty();
for(i = 0; i < trialsLeft; i++){
$("#trialsLeft").append('<img
src="images/heart.png" class="life">');
}
}

//start sending fruits

function startAction(){

//generate a fruit
$("#fruit1").show();
chooseFruit(); //choose a random fruit
$("#fruit1").css({'left' :
Math.round(550*Math.random()), 'top' : -50}); //random
position

//generate a random step


step = 1+ Math.round(5*Math.random()); // change step

// Move fruit down by one step every 10ms


action = setInterval(function(){

//move fruit by one step


$("#fruit1").css('top',
$("#fruit1").position().top + step);

//check if the fruit is too low


if($("#fruit1").position().top >
$("#fruitsContainer").height()){
//check if we have trials left
if(trialsLeft > 1 ){
//generate a fruit
$("#fruit1").show();
chooseFruit(); //choose a random fruit
$("#fruit1").css({'left' :
Math.round(550*Math.random()), 'top' : -50}); //random
position

//generate a random step


step = 1+ Math.round(5*Math.random()); //
change step
//reduce trials by one
trialsLeft --;

//populate trialsLeft box


addHearts();

}else{ // game over


playing = false; //we are not playing
anymore
$("#startreset").html("Start Game"); //
change button to Start Game
$("#gameOver").show();
$("#gameOver").html('<p>Game
Over!</p><p>Your score is '+ score +'</p>');
$("#trialsLeft").hide();
stopAction();
}
}
}, 10);
}

// generate a random fruit

function chooseFruit(){
$("#fruit1").attr('src' , 'images/' +
fruits[Math.round(8*Math.random())] +'.png');
}

//Stop dropping fruits

function stopAction(){
clearInterval(action);
$("#fruit1").hide();
}
});

You might also like