原生JS益智小游戏贪吃蛇

来源:https://www.sucaihuo.com/js/3015.html 2017-09-15 22:37浏览(545) 收藏

一款原生JS益智小游戏贪吃蛇,通过方向键来控制蛇的运动轨迹,不停的吞吃指定区域内出现的蓝色蛋,只要不超出区域就可以一直玩下去。
原生JS益智小游戏贪吃蛇
分类:游戏 > 益智 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需简单设置页面元素的样式,代码如下:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body {
        text-align: center;
    }
    #map {
        width: 800px;
        height: 600px;
        background-color: #ccc;
        position: relative;
        margin: 20px auto;
    }
    #map img{
        position: absolute;
        height: 600px;
        left:-209px;
        top: 0;
        z-index: 99;
    }
    #goal {
        margin: 30px;
        float: left;
    }
    .btn {
        padding: 0 5px;
        margin: 10px 10px 10px 0;
        height: 38px;
        border: 1px solid #0094ff;
        font-size: 22px;
        text-align: center;
        line-height: 38px;
        color: #0094ff;
        cursor: pointer;
        transition: all 0.3s;
    }
    .btn:hover {
        background-color: #0094ff;
        color: #fff;
    }
</style>

页面的body部分,需设置好页面元素的容器,代码如下:

<p id="goal">得分:0</p>
<input type="button" value="老年人手速" class="btn"/>
<input type="button" value="单身手速" class="btn"/>
<div id="map"><img src="./img/snake.jpg" alt=""/></div>

页面的底部,需引入必要的JS文件,并启用对应的插件,代码如下:

<script type="text/javascript" src="js/food.js"></script>
<script type="text/javascript" src="js/snake.js"></script>
<script type="text/javascript" src="js/game.js" charset="utf-8"></script>
<script type="text/javascript">
    var game = new Game();
    game.food = new Food();
    game.snake = new Snake();
    game.chooseDifficulty();
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2