Question

I am creating jquery slide show plugin..
i created folder game inside wp-content/plugin

in my folder i have
readme.txt
game.php
game.css
game.js

In my game.php
i have code:-

<?php
/*
  Plugin Name:game
  Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
  Description: A brief description of the Plugin.
  Version: The Plugin's Version Number, e.g.: 1.0
  Author: Neeraj swarnkar
  Author URI: http://URI_Of_The_Plugin_Author
  License: A "Slug" license name e.g. GPL2
 */

/*  Copyright YEAR  PLUGIN_AUTHOR_NAME  (email : [e-mail])

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License, version 2, as
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */

function image() {
    hello_world_html_page();
}

add_shortcode('img', 'image');

function my_scripts_method() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script(
            'game', 'http://localhost/guest1/wordpress/wp-content/plugins/game/game.js'/* don't hardcode your path */, array('jquery')/* this script depends on jquery, so enqueue it automatically */
    );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');

function hello_world_html_page() {
    ?>
    <?php
    return '<div id="demo-top-bar">
        <div id="slideshow">
            <div><img alt="TITLE" src="img0.jpg"></div>
            <div><img alt="TITLE"src="img1.jpg"></div>
            <div><img alt="TITLE"src="img2.jpg"></div>
            <div><img alt="TITLE"src="img3.jpg"></div>
            <div>
                Pretty cool eh? This slide is proof the content can be anything.
            </div>
        </div>';
}
?>

In my game.js i have:-

$(function() {

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);

});

In game.css

    #slideshow { 
        margin: 80px auto; 
        position: relative; 
        width: 701px; 
        height: 321px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }

    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }

When i activate and run my progam.. it is showing content of js and css file.. help me i am new on wordpress..

I have updated my changes..

Answer 1

First the JS
You include 2 js, your own and jquery. you haven’t registered your won script you just enqueued it.
You can enqueue and register it at once. further more I suggest you merge your que:

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script(
        'game',
        'path/to/your/js'/*don't hardcode your path*/,
        array('jquery')/*this script depends on jquery, so enqueue it automatically*/
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Doesn’t fix all your problems but it’s a step.

2nd the html output
your html output in hello_world_html_page will never display anywhere.
get_option will retrieve a option from the database, it won’t execute a function.

function image() {
    hello_world_html_page()
}
add_shortcode('img', 'image');

This is better but stil wrong.
A short code can’t echo or it will display properly you have to return it.

function hello_world_html_page() {
    return '<div id="demo-top-bar">
        <div id="slideshow">
            <div><img alt="TITLE" src="img0.jpg"></div>
            <div><img alt="TITLE"src="img1.jpg"></div>
            <div><img alt="TITLE"src="img2.jpg"></div>
            <div><img alt="TITLE"src="img3.jpg"></div>
            <div>
                Pretty cool eh? This slide is proof the content can be anything.
            </div>
        </div>';
}

3rd the CSS
You don’t enqueue it anywhere.
If you fix the above 2 points you should be able to handle it:

http://codex.wordpress.org/Function_Reference/wp_enqueue_style
As @swapnesh said there is a diffrence between wp_enqueue_style and wp_enqueue_script