1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg


​2. [文件] snake.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The snake game</title>
</head>
<script type="text/javascript">
    function log(msg) {
        console.log(msg);
    }
</script>
 
<body>
 
 
    <canvas id="canvas">
        Your browser cannot support html5.  
    </canvas>
 
    <script type="text/javascript">
        this.onkeydown = function(e) {
            var code = e.keyCode;
            if (code == 37)
                changeMove(3);
            if (code == 38)
                changeMove(0);
            if (code == 39)
                changeMove(1);
            if (code == 40)
                changeMove(2);
        }
        function changeMove(val) {
            if ((move == 0 || move == 2) && (val == 2 || val == 0))
                return;http://www.huiyi8.com/hunsha/chuangyi/​
            if ((move == 3 || move == 1) && (val == 1 || val == 3))
                return;创意婚纱照片
            move = val;
        }
 
        function dead(snake) {
            // 撞墙壁
            switch (move) {
            case 0:
                if (snake[0] < 0) {
                    log('up:' + snake[0]);
                    return true;
                }
                break;
            case 1:
                if (snake[0] % 20 == 0) {
                    log('right:' + snake[0]);
                    return true;
                }
                break;
            case 2:
                if (snake[0] >= 400) {
                    log('down:' + snake[0]);
                    return true;
                }
                break;
            case 3:
                if ((snake[0] + 1) % 20 == 0) {
                    log('left:' + snake[0]);
                    return true;
                }
                break;
            default:
                break;
            }
            // 咬自己
            for(var i = 1; i < snake.length ; i ++) {
                if(snake[0] == snake[i]) {
                    log('self:' + snake[0]);
                    return true;
                }
            }
            return false;
        }
        // rand=-1表示食物被吃，要求重新生成食物
        function run(rand) {
            //ctx.fillStyle = '#000000';
            ctx.clearRect(100, 100, 300, 300);
            // 画布容器
            var container = new Array(400);
            for ( var i = 0; i < container.length; i++) {
                container[i] = 0;
            }
            for ( var i in snake) {
                container[snake[i]] = 1;
            }
            // 生成食物
            if(rand == -1) {
                var rands = [];
                for ( var i in container) {
                    if (container[i] == 0)
                        rands.push(i);
                }
                rand = rands[parseInt(Math.random() * rands.length)];
            }
            // 放入画布容器
            container[rand] = 1;
            for ( var i = 0; i < container.length; i++) {
                if (container[i] == 0) {
                    ctx.fillRect(100 + sw * (i % 20),
                            100 + sw * parseInt((i / 20)), sw, sw);
 
                    ctx.strokeRect(100 + sw * (i % 20),
                            100 + sw * parseInt((i / 20)), 10, sw);
                } else {
                    ctx.strokeRect(100 + sw * (i % 20),
                            100 + sw * parseInt((i / 20)), sw, sw);
                }
            }
            var slen = snake.length;
            var shead = snake[0], send = snake[slen - 1];
            ctx.fillStyle = '#000000';
            ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
            //ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
            ctx.fillStyle = '#ff0000';
            ctx.beginPath();
            ctx.arc((100 + sw * (shead % 20)) + sw / 2, (100 + sw * parseInt((shead / 20))) + sw / 2, sw / 2, 0, Math.PI * 2, false);
            //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
            ctx.closePath();
            ctx.fill();
            ctx.fillStyle = '#000000';
            //ctx.strokeRect(100 + sw * (shead % 20), 100 + sw
            //      * parseInt((shead / 20)), sw, sw);
            for ( var i = slen - 1; i > 0; i--) {
                snake[i] = snake[i - 1];
            }
            switch (move) {
            case 0:
                snake[0] = shead - 20;
                break;
            case 1:
                snake[0] = shead + 1;
                break;
            case 2:
                snake[0] = shead + 20;
                break;
            case 3:
                snake[0] = shead - 1;
                break;
            default:
                break;
            }
            // 死亡
            if (dead(snake)) {
                alert('game over');
                return false;
            }
            // 蛇吃到食物，增加移动次数，到达蛇尾，把食物放到蛇数组
            if (eat && ms++ == slen) {
                ms = 0;
                snake.push(send);
                eat = false;
            }
            // 吃到食物，重新生成食物
            if (snake[0] == rand) {
                eat = true;
                rand = -1;
            }
            setTimeout('run(' + rand + ')', speed);
        }
        //log(snake);
        //for(var i = 0; i < 300; i ++)
        var canvas = document.getElementById('canvas');
        canvas.width = 400;
        canvas.height = 400;
        var ctx = canvas.getContext('2d');
        var snake = []; // 蛇对象
        snake.push(205);
        snake.push(204);
        snake.push(203);
        snake.push(202);
        snake.push(201);
        // move：移动方式[0, 1, 2, 3] = [up, right, down, left]
        // ms：当蛇吃到食物后的移动次数，以此来判断增加蛇数组长度
        // eat：蛇是否吃到食物
        // sw：蛇方块宽度
        // speed：速度ms
        var move = 1, ms = 0, eat = false, sw = 10, speed = 50;
        run(-1);
 
        log(canvas);
    </script>
</body>
</html>

简易html5贪吃蛇的更多相关文章

  1. WebGL实现HTML5贪吃蛇3D游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  2. [置顶] 63行代码完美实现html5 贪吃蛇游戏

    以前也很少关注html5,感觉选择html已经慢慢成为趋势,想了解下.就找了个游戏学习了,写完这个游戏感觉html5和js结合很紧密,如果js不是特别好.估计需要先补习下js,这个只是个人的建议,不一 ...

  3. JavaScript 实现简易版贪吃蛇（Day_13）

    时光永远在变迁,你始终要丢下过去. 使用语言 JavaScript  概述 运用JavaScript  实现简易版<贪吃蛇>.     Html 页面 1 <!DOCTYPE htm ...

  4. 使用TypeScript实现简单的HTML5贪吃蛇游戏

    TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已 ...

  5. Javascript基础示例：用JS写简易版贪吃蛇（面向对象）

    废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. HTML5贪吃蛇源代码

    显示效果例如以下:点击这里!       代码下载:点击这里! <script> function show(){  var date = new Date(); //日期对象  var ...

  7. python贪吃蛇

    代码地址如下:http://www.demodashi.com/demo/13335.html 一.先展示python贪吃蛇效果 二.操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT ...

  8. WebGL实现HTML5的3D贪吃蛇游戏

    js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

  9. [原创]html5游戏_贪吃蛇

    代码随便写写,尚有许多不足,PC与手机端皆可运行 手机端滑屏操作,PC端方向键操作 疑问: 生成食物,与判断是否可以移动方面 有两种实现方式, 1.使用js内存,数组循环判断 2.使用dom的quer ...

随机推荐

  1. vue2.0 引用qrcode.js实现获取改变二维码的样式

    vue代码 <template> <div class="qart"> <div id="qrcode" ref="qr ...

  2. jenkins构建一个python项目

    Jenkins发布后端python代码 “系统管理”“管理插件”“已安装” 检查是否有“Git plugin”和“Publish Over SSH”两个插件,如果没有,则需点击“可选插件”,找到它 ...

  3. shell函数传递带空格的参数

    shell中的参数以空格为分割符,经常会碰到需要传递带空格的参数,例如传递带空格的文件名. 方法很简单:给参数加双引号. 但是实际效果要看你的函数内容,一种可能的情况是: 其实你真的传递进去了带空格的 ...

  4. ORCAD中的一些操作小技巧

    1.ORCAD中改变元器件和文本字体颜色的命令: 打开在 View -> Toolbar -> Command Window.然后圈选文字(可复选),然后到 Command Window ...

  5. 产生N个不重复的随机数的快速算法

    //seed array ,,,,,,,,,}; //随机数个数 ; //结果存放在里面 ]; ; i < N; i++) { //从剩下的随机数里生成 , startArray.length ...

  6. Chrome自带恐龙小游戏的源码研究(完)

    在上一篇<Chrome自带恐龙小游戏的源码研究(七)>中研究了恐龙与障碍物的碰撞检测,这一篇主要研究组成游戏的其它要素. 游戏分数记录 如图所示,分数及最高分记录显示在游戏界面的右上角,每 ...

  7. 8148之更换摄像头出现异常---REISZER OVERFLOW OCCURED: RESTARTING

    my iss config as: rsz_reg->SRC_VSZ  = 1079;//715;    rsz_reg->SRC_HSZ  = 1919;//1277; rszA_reg ...

  8. 【BZOJ2654】tree 二分+最小生成树

    [BZOJ2654]tree Description 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解. Input 第一行V,E,need ...

  9. libEasyPlayer RTSP windows播放器SDK API接口设计说明

    概述 libEasyPlayer实现对RTSP直播流进行实时采集和解码显示,稳定,高效,低延时:解码可采用intel硬件解码和软件解码两种方式,能实时进行录像和快照抓图,OSD叠加等功能. API接口 ...

  10. varnish代理缓存服务器的安装与使用

    1. 下载解压 cd /usr/local/src/ wget https://codeload.github.com/varnishcache/varnish-cache/zip/master ch ...