HTML5-打字游戏

最新推荐文章于 2024-03-11 09:16:35 发布

梧桐下的四叶草

最新推荐文章于 2024-03-11 09:16:35 发布

阅读量4.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： javascript html 游戏 css html5

本文链接：https://blog.youkuaiyun.com/zsc2014030403015/article/details/52814237

在网上找了一个HTML5的代码，照着敲了一下。发现收获还是蛮大的。而这个代码大多数是使用jq来写的。对于刚学js不久的自己也算是学习jq的一个不错的项目。游戏效果图如下：

这个图是只写好html和css的图：

这两个是写好的代码效果：

HTML代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5金山打字游戏源码</title>
        <script src="jquery.js"></script>
        <script src="js.js"></script>
        <script>
        $(function(){
            new typegame();
        });
        </script>
    </head>
    <style>
        body{
            margin:0;
            background:url(game.jpg) no-repeat;
            background-size:cover;
            font-family:"幼圆";
            background:#E8F0F0;
            overflow:hidden;
        }
        .stop1{
            width:130px;
            height:50px;
            background:red;
            position:absolute;
            bottom:0;
            left:30px;
            text-align:center;
            cursor:pointer;
            background:url("stop.png");
            background-size:130px 50px;
            line-height:50px;
            color:#392112;
            font-size:16px;
            z-index: 6666666;
            font-weight:bold;
        }
        .screen1{
            width:100%;
            height:100%;
            background:url(img/dz2.jpg) no-repeat;
            background-size:cover;
            margin:0 auto;
            padding:0;
            position:relative;
            overflow:hidden;
        }
        .xiabian{
            width:100%;
            height:40px;
            background:#000;
            position:absolute;
            bottom:0;
            right:0;
            opacity:0.8;
            filter:alpha(opacity=80);
        }