• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Jquery编写的贪吃蛇游戏app

武飞扬头像
疯狂的豆包
帮助1

本文是基于JS框架中Jquery搭建的适用于手机安装的apk文件,从而实现可直接进入的app。首先该文档是一个html5程序文件,然后借助Eclipse打包成一个android安装文件,具体如何打包,这里不再赘述,感兴趣的朋友可搜索关键词“如何将html5程序打包成Android应用”。

界面如下:

学新通

学新通

html实现代码:

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta http-equip="Content_Type" content="text/html;charset=utf-8"/>
  5.  
    <title>贪吃蛇</title>
  6.  
    <meta name="viewport" content="width=device-width,shrink-to-fit=no">
  7.  
    <link rel="stylesheet" href="file:///android_asset/css/index.css"/>
  8.  
     
  9.  
    </head>
  10.  
    <body>
  11.  
    <div class="background">
  12.  
    <p class="score">您的成绩:<span>0</span></p>
  13.  
    <div class="snake start"></div>
  14.  
    </div>
  15.  
    <div class="begin">
  16.  
    <ul>
  17.  
    <li><input type="button" id="btn_begin" value="开始"/></li>
  18.  
    <li><input type="button" id="btn_exit" value="退出"/></li>
  19.  
    </ul>
  20.  
    </div>
  21.  
     
  22.  
    <div class="GameOver">
  23.  
    <h1>GAME OVER</h1>
  24.  
    </div>
  25.  
     
  26.  
    <div class="direction_div up_direction">
  27.  
    <button class="up"></button>
  28.  
    </div>
  29.  
    <div class="direction_div left_direction">
  30.  
    <button class="left"></button>
  31.  
    </div>
  32.  
    <div class="direction_div down_direction">
  33.  
    <button class="down"></button>
  34.  
    </div>
  35.  
    <div class="direction_div right_direction">
  36.  
    <button class="right"></button>
  37.  
    </div>
  38.  
    <script type="text/javascript" src="file:///android_asset/js/jquery-3.3.1.min.js"></script>
  39.  
    <script type="text/javascript" src="file:///android_asset/js/index.js"></script>
  40.  
    </body>
  41.  
    </html>
学新通

css实现代码:

  1.  
    *{
  2.  
    margin: 0px;
  3.  
    padding: 0px;
  4.  
    list-style: none;
  5.  
    }
  6.  
    body{
  7.  
    position: relative;
  8.  
    }
  9.  
    .background{
  10.  
    position: relative;
  11.  
    top: 20px;
  12.  
    z-index: -1;
  13.  
    margin: 20px auto;
  14.  
    width: 600px;
  15.  
    height: 200px;
  16.  
    border: solid 2px ;
  17.  
    background-color: bisque;
  18.  
    }
  19.  
    .snake{
  20.  
    display: inline-block;
  21.  
    border: solid 1px;
  22.  
    width: 5px;
  23.  
    height: 5px;
  24.  
    background-color: saddlebrown;
  25.  
    border-radius: 40%;
  26.  
    position: absolute;
  27.  
    z-index: 10px;
  28.  
    }
  29.  
    .start{
  30.  
    top:100px;
  31.  
    left: 100px;
  32.  
    }
  33.  
     
  34.  
    .snake_boby{
  35.  
    display: inline-block;
  36.  
    border: solid 1px;
  37.  
    width: 5px;
  38.  
    height: 5px;
  39.  
    background-color: yellowgreen;
  40.  
    position: absolute;
  41.  
    border-radius: 40%;
  42.  
    z-index: 10px;
  43.  
    }
  44.  
    .food{
  45.  
    display: inline-block;
  46.  
    border: solid 0.5px;
  47.  
    width: 5px;
  48.  
    height: 5px;
  49.  
    background-color:red;
  50.  
    border-radius:50%;
  51.  
    position: absolute;
  52.  
    z-index: 10px;
  53.  
    }
  54.  
     
  55.  
    .score{
  56.  
    position: absolute;
  57.  
    font-size: 10px;
  58.  
    top: -20px;
  59.  
    left: 0px;
  60.  
    }
  61.  
     
  62.  
    .begin {
  63.  
    position: absolute;
  64.  
    top: 90px;
  65.  
    left:320px;
  66.  
    transform: translateX(-50%);
  67.  
    border: solid 1px;
  68.  
    background-size: 300px ;
  69.  
    width: 150px;
  70.  
    height: 100px;
  71.  
    }
  72.  
     
  73.  
    .begin ul li input{
  74.  
    width: 150px;
  75.  
    height: 50px;
  76.  
    line-height: 30px;
  77.  
    border: none;
  78.  
    background-color: #7dbb32;
  79.  
    cursor: pointer;
  80.  
    border-radius: .3em;
  81.  
    box-shadow: 0 1px white inset;
  82.  
    text-align: center;
  83.  
    text-shadow: 0 1px 1px black;
  84.  
    color:white;
  85.  
    font-weight: bold;
  86.  
    outline: none;
  87.  
    }
  88.  
     
  89.  
    .GameOver{
  90.  
    display: none;
  91.  
    }
  92.  
     
  93.  
    .GameOver h1{
  94.  
    text-align: center;
  95.  
    margin-top: -60px;
  96.  
    margin-left: 360px;
  97.  
    color:red;
  98.  
    font-size: 18px;
  99.  
    font-weight: bold;
  100.  
    text-shadow: 2px 2px 0 white;
  101.  
    position: absolute;
  102.  
     
  103.  
    }
  104.  
     
  105.  
    .direction_div{
  106.  
    position:relative;
  107.  
    width: 30px;
  108.  
    height: 30px;
  109.  
    }/*left*/
  110.  
    .left_direction {
  111.  
    top: 5%;
  112.  
    left:35%;
  113.  
    }
  114.  
    /*bottom*/
  115.  
    .down_direction{
  116.  
    top:-29px;
  117.  
    left: 45%;
  118.  
    }
  119.  
    /*right*/
  120.  
    .right_direction{
  121.  
    top:-60px;
  122.  
    left:52%;
  123.  
    }
  124.  
    /*top*/
  125.  
    .up_direction{
  126.  
    top: 2%;
  127.  
    left: 45%;
  128.  
    }
  129.  
     
  130.  
    .left{
  131.  
    width: 50px;
  132.  
    height: 30px;
  133.  
    background: green;
  134.  
    border: none;
  135.  
    font-size: 18px;
  136.  
    border-radius:10px;
  137.  
    color:white;
  138.  
    }
  139.  
     
  140.  
    .down{
  141.  
    width: 30px;
  142.  
    height: 30px;
  143.  
    background: green;
  144.  
    border: none;
  145.  
    font-size: 18px;
  146.  
    border-radius:10px;
  147.  
    color:white;
  148.  
    }
  149.  
    .up{
  150.  
    width: 30px;
  151.  
    height: 30px;
  152.  
    background: green;
  153.  
    border: none;
  154.  
    font-size: 18px;
  155.  
    border-radius:10px;
  156.  
    color:white;
  157.  
     
  158.  
    }
  159.  
    .right{
  160.  
    width: 50px;
  161.  
    height: 30px;
  162.  
    background: green;
  163.  
    border: none;
  164.  
    font-size: 18px;
  165.  
    border-radius:10px;
  166.  
    color:white;
  167.  
     
  168.  
    }
学新通

js实现代码:

  1.  
    var $background = $('.background') //该全局变量用于获取背景图,因为背景图在游戏中不会发生变化,可在最开始获取就行
  2.  
    var coordinate_x = new Array() //创建一个数组,用于存放蛇的每个身体节点的x坐标值
  3.  
    var coordinate_y = new Array() //创建一个数组,用于存放蛇的每个身体节点的y坐标值
  4.  
    var status = 'Right' //该全局变量用于存放贪吃蛇行走的方向,默认为向右走
  5.  
    var Time //该全局变量用于存放setInterval(Auto_walk,$grade),用于游戏停止
  6.  
    var $grade=100 //该全局变量用于存在游戏等级的数字变量,主要用于设置行走的快慢
  7.  
    var $score = 0 //建个全局变量用于存放分数
  8.  
    var food_y
  9.  
    var food_x
  10.  
     
  11.  
    $(document).ready(function () {
  12.  
    $('.start').hide() //页面加载后,在游戏未开始前隐藏蛇头
  13.  
    $('#btn_begin').click(function () {
  14.  
    //为开始游戏按钮添加单击事件
  15.  
    $('.start').show()
  16.  
    Create_start_snake_boby()
  17.  
    Create_snake_boby()
  18.  
    create_food()
  19.  
    Time = setInterval(Auto_walk,$grade) //使用setInterval()方法,实现蛇的自动行走
  20.  
    $('.begin').hide()
  21.  
    $('.direction_div').show()
  22.  
    })
  23.  
     
  24.  
    $('#btn_exit').click(function () {
  25.  
    //为退出按钮添加单击事件,实现当前窗口关闭
  26.  
    window.close()
  27.  
    })
  28.  
     
  29.  
     
  30.  
    $('.up').click(function () {
  31.  
    move_top()
  32.  
    if (status != 'Bottom') {
  33.  
    //判断将要移动的方向是否与现在的移动方向相反,相反则status不变
  34.  
    status = 'Top'
  35.  
    }
  36.  
    })
  37.  
    $('.down').click(function () {
  38.  
    move_bottom()
  39.  
    if (status != 'Top') {
  40.  
    status = 'Bottom'
  41.  
    }
  42.  
    })
  43.  
    $('.left').click(function () {
  44.  
    move_left()
  45.  
    if (status != 'Right') {
  46.  
    status = 'Left'
  47.  
    }
  48.  
    })
  49.  
    $('.right').click(function () {
  50.  
    move_right()
  51.  
    if (status != 'Left') {
  52.  
    status = 'Right'
  53.  
    }
  54.  
    })
  55.  
    })
  56.  
     
  57.  
    // 游戏初始化时创建一节蛇身
  58.  
    function Create_start_snake_boby() {
  59.  
    var $newSnake_boby = $("<div class='snake_boby'></div>") //创建一个新节点(蛇身)
  60.  
    var $snakes = $('.background>div') //获取全部的蛇身
  61.  
    var L_left = parseInt($snakes.eq($snakes.length - 1).css('left')) - 5 'px' //查到蛇尾节点,获取x,y坐标值,赋给新建的蛇身节点
  62.  
    var L_Top = $snakes.eq($snakes.length - 1).css('top')
  63.  
    $newSnake_boby.css('left', L_left)
  64.  
    $newSnake_boby.css('top', L_Top)
  65.  
    $background.append($newSnake_boby) //把新建的蛇身节点添加到背景中
  66.  
    }
  67.  
    // 创建一节蛇身
  68.  
    function Create_snake_boby() {
  69.  
    var $newSnake_boby = $("<div class='snake_boby'></div>")
  70.  
    var $snakes = $('.background>div')
  71.  
    var Last_boby_x = parseInt($snakes.eq($snakes.length - 1).css('left')) //获取蛇尾的坐标
  72.  
    var LastButOne_boby_x = parseInt($snakes.eq($snakes.length - 2).css('left')) //获取倒数第二节蛇身的坐标
  73.  
    var Last_boby_y = parseInt($snakes.eq($snakes.length - 1).css('top'))
  74.  
    var LastButOne_boby_y = parseInt($snakes.eq($snakes.length - 2).css('top'))
  75.  
    //判断最后两节蛇身是否处在垂直
  76.  
    if (Last_boby_x == LastButOne_boby_x) {
  77.  
    //通过判断最后两节蛇身的y坐标来确定新蛇身的添加方向
  78.  
    if (Last_boby_y > LastButOne_boby_y) {
  79.  
    $newSnake_boby.css('left', Last_boby_x)
  80.  
    $newSnake_boby.css('top', Last_boby_y 5 'px')
  81.  
    } else if (Last_boby_y < LastButOne_boby_y) {
  82.  
    $newSnake_boby.css('left', Last_boby_x)
  83.  
    $newSnake_boby.css('top', Last_boby_y - 5 'px')
  84.  
    }
  85.  
    } else if (Last_boby_y == LastButOne_boby_y) {
  86.  
    if (Last_boby_x > LastButOne_boby_x) {
  87.  
    $newSnake_boby.css('left', Last_boby_x 5 'px')
  88.  
    $newSnake_boby.css('top', Last_boby_y)
  89.  
    } else if (Last_boby_x < LastButOne_boby_x) {
  90.  
    $newSnake_boby.css('left', Last_boby_x - 5 'px')
  91.  
    $newSnake_boby.css('top', Last_boby_y)
  92.  
    }
  93.  
    }
  94.  
    $background.append($newSnake_boby)
  95.  
    }
  96.  
     
  97.  
    // 生成食物
  98.  
    function create_food() {
  99.  
    var status = true //新建一个变量用来判断是否生成新的食物
  100.  
    var $snakes = $('.background>div')
  101.  
    do {
  102.  
    this.food_x = Math.floor(Math.random() * 80) * 5 //随机生成一个坐标值
  103.  
    this.food_y = Math.floor(Math.random() * 30) * 5
  104.  
    for (var i = 0; i < $snakes.length; i ) {
  105.  
    coordinate_y[i] = $snakes.eq(i).css('top')
  106.  
    coordinate_x[i] = $snakes.eq(i).css('left')
  107.  
    if (
  108.  
    food_x != parseInt(coordinate_x[i]) &&
  109.  
    food_y != parseInt(coordinate_y[i])
  110.  
    ) {
  111.  
    //判断新坐标值是否跟蛇身重叠
  112.  
    status = false //不存在重叠,转化status的值,跳出循环
  113.  
    }
  114.  
    }
  115.  
    } while (status)
  116.  
    var $food = $("<span class='food'></span>")
  117.  
    $food.css('top', food_y 'px')
  118.  
    $food.css('left', food_x 'px')
  119.  
    $background.append($food)
  120.  
    }
  121.  
     
  122.  
    // 依照当前前进方向自动行走
  123.  
    function Auto_walk() {
  124.  
    if (status == 'Right') {
  125.  
    move_right()
  126.  
    } else if (status == 'Left') {
  127.  
    move_left()
  128.  
    } else if (status == 'Top') {
  129.  
    move_top()
  130.  
    } else if (status == 'Bottom') {
  131.  
    move_bottom()
  132.  
    }
  133.  
    }
  134.  
    function move_right() {
  135.  
    var $snakes = $('.background>div')
  136.  
    var $H_Top = parseInt($snakes.eq(0).css('top'))
  137.  
    var $H_Left = parseInt($snakes.eq(0).css('left'))
  138.  
    for (var i = 0; i < $snakes.length; i ) {
  139.  
    coordinate_y[i] = $snakes.eq(i).css('top')
  140.  
    coordinate_x[i] = $snakes.eq(i).css('left')
  141.  
    }
  142.  
    if (
  143.  
    !(
  144.  
    $H_Top == parseInt(coordinate_y[1]) &&
  145.  
    $H_Left 5 == parseInt(coordinate_x[1])
  146.  
    )
  147.  
    ) {
  148.  
    $snakes.eq(0).css('left', $H_Left 5 'px')
  149.  
    for (var i = 1; i < $snakes.length; i ) {
  150.  
    $snakes.eq(i).css('top', coordinate_y[i - 1])
  151.  
    $snakes.eq(i).css('left', coordinate_x[i - 1])
  152.  
    }
  153.  
    eat()
  154.  
    collide_dead()
  155.  
    } else {
  156.  
    return false
  157.  
    }
  158.  
    }
  159.  
    // 左转
  160.  
    function move_left() {
  161.  
    var $snakes = $('.background>div')
  162.  
    var $H_Top = parseInt($snakes.eq(0).css('top'))
  163.  
    var $H_Left = parseInt($snakes.eq(0).css('left'))
  164.  
     
  165.  
    // 获取当前贪吃蛇全部蛇身及蛇头的坐标
  166.  
    for (var i = 0; i < $snakes.length; i ) {
  167.  
    coordinate_y[i] = $snakes.eq(i).css('top')
  168.  
    coordinate_x[i] = $snakes.eq(i).css('left')
  169.  
    }
  170.  
     
  171.  
    // 贪吃蛇移动一次
  172.  
    // 首先判断本次移动是否回头
  173.  
    // 如果不是回头,则进行移动
  174.  
    if (
  175.  
    !(
  176.  
    $H_Top == parseInt(coordinate_y[1]) &&
  177.  
    $H_Left - 5 == parseInt(coordinate_x[1])
  178.  
    )
  179.  
    ) {
  180.  
    $snakes.eq(0).css('left', $H_Left - 5 'px')
  181.  
    for (var i = 1; i < $snakes.length; i ) {
  182.  
    $snakes.eq(i).css('top', coordinate_y[i - 1])
  183.  
    $snakes.eq(i).css('left', coordinate_x[i - 1])
  184.  
    }
  185.  
     
  186.  
    // 移动完成后判断是否发生碰撞
  187.  
    collide_dead()
  188.  
    eat()
  189.  
    } else {
  190.  
    return false
  191.  
    }
  192.  
    }
  193.  
     
  194.  
    // 上转
  195.  
    function move_top() {
  196.  
    var $snakes = $('.background>div')
  197.  
    var $H_Top = parseInt($snakes.eq(0).css('top'))
  198.  
    var $H_Left = parseInt($snakes.eq(0).css('left'))
  199.  
    for (var i = 0; i < $snakes.length; i ) {
  200.  
    coordinate_y[i] = $snakes.eq(i).css('top')
  201.  
    coordinate_x[i] = $snakes.eq(i).css('left')
  202.  
    }
  203.  
    if (
  204.  
    !(
  205.  
    $H_Top - 5 == parseInt(coordinate_y[1]) &&
  206.  
    $H_Left == parseInt(coordinate_x[1])
  207.  
    )
  208.  
    ) {
  209.  
    $snakes.eq(0).css('top', $H_Top - 5 'px')
  210.  
    for (var i = 1; i < $snakes.length; i ) {
  211.  
    $snakes.eq(i).css('top', coordinate_y[i - 1])
  212.  
    $snakes.eq(i).css('left', coordinate_x[i - 1])
  213.  
    }
  214.  
    collide_dead()
  215.  
    eat()
  216.  
    } else {
  217.  
    return false
  218.  
    }
  219.  
    }
  220.  
     
  221.  
    // 下转
  222.  
    function move_bottom() {
  223.  
    var $snakes = $('.background>div')
  224.  
    var $H_Top = parseInt($snakes.eq(0).css('top'))
  225.  
    var $H_Left = parseInt($snakes.eq(0).css('left'))
  226.  
    for (var i = 0; i < $snakes.length; i ) {
  227.  
    coordinate_y[i] = $snakes.eq(i).css('top')
  228.  
    coordinate_x[i] = $snakes.eq(i).css('left')
  229.  
    }
  230.  
    if (
  231.  
    !(
  232.  
    $H_Top 20 == parseInt(coordinate_y[1]) &&
  233.  
    $H_Left == parseInt(coordinate_x[1])
  234.  
    )
  235.  
    ) {
  236.  
    $snakes.eq(0).css('top', $H_Top 5 'px')
  237.  
    for (var i = 1; i < $snakes.length; i ) {
  238.  
    $snakes.eq(i).css('top', coordinate_y[i - 1])
  239.  
    $snakes.eq(i).css('left', coordinate_x[i - 1])
  240.  
    }
  241.  
    collide_dead()
  242.  
    eat()
  243.  
    } else {
  244.  
    return false
  245.  
    }
  246.  
    }
  247.  
     
  248.  
    // 吃动作
  249.  
    function eat() {
  250.  
    var $snakes = $('.background>div')
  251.  
    var $H_Top1 = parseInt($snakes.eq(0).css('top')) //获取蛇头的坐标
  252.  
    var $H_Left1 = parseInt($snakes.eq(0).css('left'))
  253.  
    if ($H_Top1 == food_y && $H_Left1 == food_x) {
  254.  
    //判断蛇头的坐标和食物的坐标是否重叠,重叠,添加一节蛇身,新建一个食物,分数加一,刷新分数
  255.  
    $('.food').remove()
  256.  
    Create_snake_boby()
  257.  
    create_food()
  258.  
    $score
  259.  
    $('.score span').html($score)
  260.  
    }
  261.  
    }
  262.  
    // 碰撞死亡判定
  263.  
    function collide_dead() {
  264.  
    var $snakes = $('.background>div')
  265.  
    var $H_Top1 = parseInt($snakes.eq(0).css('top')) //获取蛇头坐标
  266.  
    var $H_Left1 = parseInt($snakes.eq(0).css('left'))
  267.  
    for (var i = 0; i < $snakes.length; i ) {
  268.  
    //遍历全部蛇身节点坐标
  269.  
    coordinate_y[i] = $snakes.eq(i).css('top')
  270.  
    coordinate_x[i] = $snakes.eq(i).css('left')
  271.  
    }
  272.  
    for (var j = 1; j < $snakes.length; j ) {
  273.  
    //判断蛇头坐标是否跟蛇身任意节点坐标重叠,重叠则认为吃到自己,清空setInterval,显示GameOver
  274.  
    if (
  275.  
    $H_Top1 == parseInt(coordinate_y[j]) &&
  276.  
    $H_Left1 == parseInt(coordinate_x[j])
  277.  
    ) {
  278.  
    clearTimeout(Time)
  279.  
    window.location.reload()
  280.  
    $('.begin').show()
  281.  
    return false
  282.  
    }
  283.  
    //判断是否超出边界
  284.  
    if ($H_Top1 > 195 || $H_Top1 < 0 || $H_Left1 > 595 || $H_Left1 < 0 ) {
  285.  
    clearTimeout(Time)
  286.  
    window.location.reload()
  287.  
    $('.begin').show()
  288.  
    return false
  289.  
    }
  290.  
    }
  291.  
    }
学新通

划重点!问题集中在html实现代码!

1. 本文使用的jquery.js文件是离线的,放在程序的文件夹中;

2. 因html的代码是从上到下执行的,切记要把所有的js文件放在最后,如文中所示的位置;

3.因打包需要,一定要把文件地址标识清楚,否则打包出来的apk文件是没有渲染和执行,例如:

<link rel="stylesheet" href="file:///android_asset/css/index.css"/>
<script type="text/javascript" src="file:///android_asset/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="file:///android_asset/js/index.js"></script>

总结:

说实在话,这是一个简单的,基本上完整的游戏app,但还是有些bug,比如不能适用全部尺寸的android手机,上下左右按键过于粗糙,同时结束后不能重玩,都需要后续完善。我还是想分享出来,让各位同学朋友互相借鉴学习。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhhecec
系列文章
更多 icon
同类精品
更多 icon
继续加载