zoukankan      html  css  js  c++  java
  • 简单贪吃蛇

    在游戏开始时,分数为0,游戏结束时会弹出分数。

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style>
    *{padding: 0;margin: 0;}
    #layer{border-collapse:collapse; border-spacing:0;}
    #layer td{ 40px;height: 20px;}
    #controller{margin-top: 50px;}
    #layer td.snake{background-color:green}
    #layer td.food{background-color:red}
    #show_score{
    position:absolute;
    top:70px;
    left:180px;
    100px;
    height:40px;
    }
    #button{150px;
    height:50px}
    </style>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    </head>
    <body>
    <center>

    <input id="show_score" type="reset" value="score:0">

    <div id="controller">
    <!--不知道怎么用button传参数-->

    <button onclick="ready()" id="button">开始游戏</button>

    <script>

    </script>
    <table id="layer" background='background.jpg'></table>
    </center>
    <script>
    function ready(){
    //绘制地图
    var layer={x:20,y:20}
    var str='';
    var score = 0;
    for (var y = 1; y<=layer.y; y++) {
    str+='<tr>';
    for (var x = 1; x<=layer.x; x++) {
    str+='<td id="'+x+'_'+y+'"></td>';//?
    };
    str+='</tr>';
    };
    $('#layer').html(str);
    //放置小蛇
    var moveTime=500;
    var sanke=[{//蛇的数组
    x:Math.floor(layer.x/2),//得到一个数的整数
    y:Math.floor(layer.y/2)
    }];

    var snakHead=sanke[0].x+'_'+sanke[0].y;
    $('#'+snakHead).addClass('snake');

    //改变方向
    var direction=38;
    function go(num){direction=num;}

    //监听键盘
    $(document).keydown(function(event){ go(event.keyCode); });
    //小蛇移动
    function snakeMove(){
    var nextPoint={};
    switch(direction){
    case 38://上
    nextPoint.x=sanke[0].x;nextPoint.y=sanke[0].y-1;
    break;
    case 40://下
    nextPoint.x=sanke[0].x;nextPoint.y=sanke[0].y+1;
    break;
    case 37://左
    nextPoint.x=sanke[0].x-1;nextPoint.y=sanke[0].y;
    break;
    case 39://右
    nextPoint.x=sanke[0].x+1;nextPoint.y=sanke[0].y;
    break;
    }
    var nextBody=$('#'+nextPoint.x+'_'+nextPoint.y);//?

    if(nextBody.length>0){
    if(nextBody.hasClass('snake')){
    alert('自残而死!你的得分为'+score);clearInterval(timer);
    }else{
    sanke.unshift(nextPoint);//蛇头增加
    nextBody.addClass('snake');

    if(nextBody.hasClass('food')){
    nextBody.removeClass('food');
    makeFood();
    //分数
    score++;
    var show_score = document.getElementById('show_score');
    show_score.value="score:"+score;
    }else{
    var lastSnake=sanke[sanke.length-1];
    $('#'+lastSnake.x+'_'+lastSnake.y).removeClass('snake');
    sanke.pop();//删除尾部 
    }
    }
    }else{
    alert('撞墙而死!你的得分为'+score);clearInterval(timer);
    }
    }

    //随机产生食物
    function makeFood(){
    var empty=$('#layer td:not(.sanke)');
    var rnd=Math.floor(Math.random() * (empty.length- 1));
    empty.eq(rnd).addClass('food');
    }

    //动画
    makeFood();
    var timer=setInterval(snakeMove,moveTime);
    }
    </script>

    </body>
    </html>

  • 相关阅读:
    PTA考试几点注意事项
    网易云信在融合通信场景下的探索和实践之 SIPGateway 服务架构
    破旧立新,精准测试之道
    从 0 到 1 构建实时音视频引擎
    云信小课堂|如何实现音视频通话
    Python 回调函数实现异步处理
    数据结构--链表--约瑟夫问题
    Python 轻松实现ORM
    leetcode 递归编程技巧-链表算法题
    Tornado 初识
  • 原文地址:https://www.cnblogs.com/wxw1314/p/5094455.html
Copyright © 2011-2022 走看看