H5 贪吃蛇源码

时间：2022-12-25 13:47:17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪食蛇</title>
    <style type="text/css">
        table {
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;
            }
        td {
                border-bottom: 1px solid #ccc;
                border-right: 1px solid #ccc;
                width: 10px;
                height: 13px;
            }
    </style>

    <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var size = 20;//格子的行数和列数
        var snake = new Array();//蛇数组
        function createSnake() {
            var x = parseInt(Math.random() * (size - 2));//右边留出来两个格子
            var y = parseInt(Math.random() * size);
            snake[0] = new Array(x, y);//蛇数组的第一个格子
            $("#x" + x + "y" + y).attr("type", "snake");
            $("#x" + x + "y" + y).css("background-color", "#ccc");
            for (var i = 1; i <= 2; i++) {
                x++;
                snake[i] = new Array(x, y);//蛇数组的第二个和第三个格子
                $("#x" + x + "y" + y).attr("type", "snake");
                $("#x" + x + "y" + y).css("background-color", "#ccc");
            }
        }

        var food = new Array();
        function createFood() {
            var x = parseInt(Math.random() * size);
            var y = parseInt(Math.random() * size);
            while ($("#x" + x + "y" + y).attr("type") == "snake") {//食物出现在了蛇身上 则重新随机
                x = parseInt(Math.random() * size);
                y = parseInt(Math.random() * size);
            }
            food = new Array(x, y);
            $("#x" + x + "y" + y).attr("type", "food");
            $("#x" + x + "y" + y).css("background-color", "red");
        }

        var isLive = false;//表示蛇是否活着
        var row = 0;//行的移动
        var column = 0;//列的移动
        function die() {//死了
            isLive = false;
            window.alert("Game Over!!!");
            window.location.reload();
        }
        function move() {
            //蛇的移动方法
            if (!isLive) {
                return;//已经死了
            }
            var x = snake[0][0] + row;//加给行
            var y = snake[0][1] + column;//加给列
            snake.unshift(new Array(x, y));//将x和y的位置作为新的蛇头，插入数组的最前面
            var type = $("#x" + x + "y" + y).attr("type");
            if (type == "snake") {//如果蛇头前方的格子是蛇
                die();//死了
            } else if (type == "food") {//蛇头前方的格子是食物
                $("#x" + x + "y" + y).attr("type", "snake");//该位置变成蛇的头
                $("#x" + x + "y" + y).css("background-color", "#ccc");
                createFood();//重新随机一个食物
            } else if (type == "map") {//蛇头前方的格子是普通的白色格子
                var tmp = snake.pop();//删掉蛇数组的最后一个格子
                $("#x" + tmp[0] + "y" + tmp[1]).attr("type", "map");//将原来蛇尾巴的位置变成普通的白色格子
                $("#x" + tmp[0] + "y" + tmp[1]).css("background-color", "#fff");
                $("#x" + x + "y" + y).attr("type", "snake");//将原来蛇头前方的格子变成新的蛇头
                $("#x" + x + "y" + y).css("background-color", "#ccc");
            } else {//蛇头前方的格子既不是蛇也不是普通的白格子，也不是食物，那肯定是到表格的边框了
                die();//死了
            }
        }

        var direction = '';//增加一个变量表示方向
        var timer = 0;//用于暂停
        $(function () {
            createSnake();//随机出一个三个格子的横躺着的蛇
            createFood();//随机出一个格子的食物

            $(document).keydown(function (e) {//有键按下
                var key = e.keyCode;
                switch (key) {
                    case 32:
                        //空格键（控制暂停和继续）
                        if (timer != 0) {
                            window.clearInterval(timer);
                            timer = 0;
                        } else {
                            if (isLive) {
                                timer = window.setInterval("move()", 200);
                            }
                        }
                        return;
                    case 37://左
                        if (direction == 'right') {
                            return;//往反方向走则没有效果
                        }
                        row = -1;
                        column = 0;
                        direction = 'left'
                        break;
                    case 38://下
                        if (direction == 'up') {
                            return;//往反方向走则没有效果
                        }
                        row = 0;
                        column = -1;
                        direction = 'down'
                        break;
                    case 39://右
                        if (direction == 'left') {
                            return;//往反方向走则没有效果
                        }
                        row = 1;
                        column = 0;
                        direction = 'right'
                        break;
                    case 40://上
                        if (direction == 'down') {
                            return;//往反方向走则没有效果
                        }
                        row = 0;
                        column = 1;
                        direction = 'up'
                        break;
                    default:
                        return;
                }
                if (!isLive) {
                    isLive = true;
                    if (row == 1 && column == 0) {
                        //最开始就往右侧移动，因为蛇头默认是最左边的一个格子，则给蛇头调换到最右侧
                        //否则最开始不能往右移动
                        snake.reverse();
                    }
                    timer = window.setInterval("move()", 200);
                }
            });
        });
    </script>
</head>

<body>
    <script type="text/javascript">
        //生成格子
        document.writeln("<table  cellspacing='0' align='center'>");
        for (var i = 0; i < size; i++) {
            document.writeln("<tr>");
            for (var j = 0; j < size; j++) {
                document.writeln("<td id='x" + j + "y" + i + "' type='map'></td>");
            }
            document.writeln("</tr>");
        }
        document.writeln("</table>");
    </script>
<h2>请按上下左右方向键开始，按空格键暂停和继续</h2>
</body>
</html>

H5 贪吃蛇源码的更多相关文章

  1. Winfrom 极简版贪吃蛇源码

    该源码是我在百度知识库借助前辈的的经验,加上自己的一点小改动写的一个非常简陋的贪吃蛇小程序.如果你们有更好的改动方案,欢迎评论. 进入主题吧! 1.创建一个桌面应运程序,拖一个定时器控件.这样,程序界 ...

  2. c&num; 贪吃蛇源码

    using UnityEngine; using System.Collections;using System.Diagnostics;using UnityEngine.SceneManageme ...

  3. js贪吃蛇源码

    1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> & ...

  4. C语言实现贪吃蛇源码

    先放效果 源代码 //2016-2-12 //zhaoyu //Gmail:zhaoyu1995.com@gmail.com //Language: C //Platform:Code::Blocks ...

  5. &lbrack;C语言&rsqb;贪吃蛇&lowbar;结构数组实现

    一.设计思路 蛇身本质上就是个结构数组,数组里存储了坐标x.y的值,再通过一个循环把它打印出来,蛇的移动则是不断地刷新重新打印.所以撞墙.咬到自己只是数组x.y值的简单比较. 二.用上的知识点 结构数 ...

  6. Android源码50例汇总，欢迎各位下载（转载）

    下载中心好资料很多,藏在各个角落,小弟在此帮大家做了一个整理,做了一个下载目录,方便大家选择性下载. 源码实例如下: <Android应用开发揭秘>源代码推荐 http://down.51 ...

  7. JS小游戏：贪吃蛇（附源码）

    javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...

  8. Unity 3D游戏-贪吃蛇类游戏源码：重要方法和功能的实现

    贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...

  9. iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

    iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCel ...

随机推荐

  1. 滚动RollUp、压缩

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. Java之--Java语言基础组成（关键字、标识符、注释、常量和变量、运算符）

    Java语言基础组成-关键字.标识符.注释.常量和变量.运算符 Java语言由8个模块构成,分别为:1.关键字:2.标识符(包名.类名.接口名.常量名.变量名等):3.注释:4.常量和变量:5.运算符 ...

  3. 【LeetCode】101 - Symmetric Tree

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  4. RASP 完爆 WAF 的5大理由！

    Web 应用防火墙(WAF)已经成为常见 Web 应用普遍采用的安全防护工具,即便如此,WAF 提供的保护方案仍旧存在诸多不足,笔者认为称 WAF 为好的安全监控工具更为恰当.幸运的是,应用安全保护技 ...

  5. java爬取网站信息和url实例

    https://blog.csdn.net/weixin_38409425/article/details/78616688(出自此為博主) 具體代碼如下: import java.io.Buffer ...

  6. html中传递信息

    <div class="card" data-username="ArgenBarbie"> </div> JS: var userna ...

  7. C&num;使用zookeeper

    C#使用zookeeper https://blog.csdn.net/XuWei_XuWei/article/details/80611659 1.简述 zookeeper适用于分布式锁,配置管理, ...

  8. 非对齐访问（unaligned accesses&rpar;

    从CPU角度看内存访问对齐 结构体成员非对齐访问所带来的思考 ARM体系中存储系统非对齐的存储访问操作 什么是cache line? cache line就是处理器从RAM load/store数据到 ...

  9. 怎么使用fiddler 测试post get 接口

    直接上图 测试 post

  10. 双系统Grub引导下恢复windows引导的方法

    此方法适用于windows系统正常,linux和windows 双系统下恢复windows系统引导.需要使用windows安装u盘 1. 启动至windows安装u盘,点击修复计算机 2. 进入命令行 ...

相关文章