《游戏学习》| 射击类小游戏 html5 打野鸭子

Posted 2022-04-21 李泰山

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《游戏学习》| 射击类小游戏 html5 打野鸭子相关的知识，希望对你有一定的参考价值。

整合游戏是由html、js、 css等代码完成的，无后端数据保存功能。

项目目录

css 文件夹是游戏样式控制文件

js文件夹是游戏事件控制文件

sounds文件夹是游戏声音控制文件

sprites 文件夹是游戏图片文件

游戏主页

index.html代码如下

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/reset.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="msapplication-tap-highlight" content="no"/>

        <script src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/createjs-2014.12.12.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        
    </head>
    <body ondragstart="return false;" ondrop="return false;" >
	<div style="position: fixed; background-color: transparent; top: 0px; left: 0px; width: 100%; height: 100%"></div>
          <script>
            $(document).ready(function()
                     var oMain = new CMain(
                                            scope_accelleration:2,    //SCOPE ACCELLERATION
											scope_friction:0.85,      //SCOPE FRICTION
											max_scope_speed:40,       //MAXIMUM SCOPE SPEED
											num_bullets:3,            //NUMBER OF PLAYER BULLETS FOR EACH SHOT LEVEL
											hit_score: 100,           //POINTS GAINED WHEN DUCK IS HITTEN
											bonus_time:4000,          //BONUS TIME IN MILLISECONDS
											lives:4,                  //NUMBER OF PLAYER LIVES
											duck_increase_speed: 0.5, //INCREASE THIS VALUE TO SPEED UP DUCKS AFTER EACH LEVEL SHOT
											duck_occurence: [ 1,  //NUMBER OF DUCKS IN SHOT 1
															  1,  //NUMBER OF DUCKS IN SHOT 2
															  1,  //NUMBER OF DUCKS IN SHOT 3
															  1,  //NUMBER OF DUCKS IN SHOT 4
															  1,  //NUMBER OF DUCKS IN SHOT 5
															  2,  //NUMBER OF DUCKS IN SHOT 6
															  2,  //NUMBER OF DUCKS IN SHOT 7
															  2,  //NUMBER OF DUCKS IN SHOT 8
															  2,  //NUMBER OF DUCKS IN SHOT 9
															  3   //NUMBER OF DUCKS IN SHOT 10
																  //ADD NEW DUCK OCCURENCE HERE IF YOU NEED...
															]
                                           );
                      
                     $(oMain).on("game_start", function(evt) 
                             //alert("game_start");
                     );

                     $(oMain).on("save_score", function(evt,iScore) 
                             //alert("iScore: "+iScore);
                     );

                     $(oMain).on("restart", function(evt) 
                             //alert("restart");
                     );
           );

        </script>
        <canvas id="canvas" class='ani_hack' width="1024" height="768" > </canvas>

    </body>
</html>

启动方式，tomcat/nginx 等服务器部署，或者浏览器直接打开index.html