Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 39 views

    127 Fruits Slice Game Source Code

    Uploaded by

    shah g
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    127 Fruits Slice Game Source Code

    Uploaded by

    shah g
    39 views10 pages
    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.

    Original Description:

    web designing 3

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    39 views10 pages

    127 Fruits Slice Game Source Code

    Uploaded by

    shah g
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 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