分享一款HTML5小游戏绵羊快跑


本文摘自PHP中文网,作者零下一度,侵删。

有一点小bug,绵羊被抓了,过一段时间重新开始狼的数量会很多,不是从1个开始增加。不过小编正在努力的改中……..

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<?php

/*

*Author: Jamin

*

*Blog:http://meego123.net

*/

if(substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip')){

    ob_start('ob_gzhandler');

}

?>

<!DOCTYPE html>

<html>

<head>

<title>绵羊快跑</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

<script type="text/javascript" src="js/game.js"></script>

<noscript><iframe scr="*.htm"></iframe></noscript>

<link rel="stylesheet" type="text/css" media="all" href="css/index.css" />

</head>

<body oncontextmenu="return false">

<p id="container">

      <p id="info">

        <p id="wolf">Wolfs:<span id="wolfCounter">0</span></p>

        <p id="scorer">&nbsp;<!--Score:<span id="scoreCounter">0</span>--></p>

     </p>

     <p id="content">

     <p id="mask"></p>

     <p id="option">

     <p id="result"></p>

         <ul id="menu">

            <li id="start"><span>Start Game</span></li>

            <li id="helpMe"><span >Help</span></li>

        </ul>

        <p id="help">

            <ol>

                <li>按键:W、S、A、D 分别控制 上、下、左、右。</li>

                <li>说明:通过控制绵羊向四周跑动,避开狼群的追捕。</li>

                <li>胜利条件:坚持时间越长,狼群出现的数量越多,得分越高。</li>

                <li>作者:Jamin</li>

            </ol>

        </p>

     </p>

     <canvas id="map" width="800" height="600">

         你的浏览器不支持HTML5!建议使用IE9+、Chrome、Opera、FireFox、Safari 等浏览器

     </canvas>

     </p>

</p>

</body>

</html>

[图片]

以上就是分享一款HTML5小游戏绵羊快跑的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5打开手机扫码功能及优缺点_HTML5教程技巧

HTML5新特性有哪些

svg是什么

HTML5 web 存储详解

HTML5 frameset标签的替代方案是什么?frameset标签替代的解决办法

如何使用HTML5 canvas绘制文字的轮廓

h5的定时器怎样实现进度条功能

HTML5的优势有哪些

介绍下HTML5.1里的新内容

HTML5 dialog使用详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...