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. IDEA小技巧-随时更新

    © 版权声明:本文为博主原创文章,转载请注明出处 1.设置删除一行快捷键 File->Settings->keymap->Delete Line 2.设置代码提示快捷键 File-& ...

  2. neural network and deep learning笔记（1）

    neural network and deep learning 这本书看了陆陆续续看了好几遍了,但每次都会有不一样的收获. DL领域的paper日新月异.每天都会有非常多新的idea出来,我想.深入 ...

  3. Kindeditor上传图片回显不出来

    原因之一: 图片成功上传但是回显不出来,这个时候,要检查返回的图片地址是否加了http://这个玩意,不然会将原来的头加上图片返回地址.

  4. linux SPI驱动——spidev之deive（五）

    1.定义board设备 1: struct spi_board_info { 2: /* the device name and module name are coupled, like platf ...

  5. 未加载Microsoft.SqlServer.management.sdk.sfc version......

    这个问题卡了我好久,于是决定记录下来,我这里缺失的是Microsoft.SqlServer.management.sdk.sfc version 12.0.0,当然你也可能后面是11开头的, 这个是由 ...

  6. EasyUI触发方法、触发事件、创建对象的格式??

    创建对象 $("选择器").组件名({ 属性名 : 值, 属性名 : 值 }); 触发方法 $("选择器").组件名("方法名",参数); ...

  7. 如何在IntelliJ IDEA在线查看源码的API文档

    https://blog.csdn.net/IFollowRivers/article/details/81604463

  8. 高特权级代码段转向低特权级代码段（利用 ret(retf) 指令实现 jmp from ring0 to ring3）

    [0]写在前面 0.1)本代码旨在演示 从 ring0 转移到 ring3(即,从高特权级 转移到 低特权级) 0.2)本文 只对 与 门相关的 代码进行简要注释,言简意赅: 0.3)文末的个人总结是 ...

  9. 抽钻石vs中奖门 概率问题

    在概率问题中,假设跟着日常经验与感觉走.常常会得到错误的答案.以下"抽钻石"的故事非常可以说明这一点. 题目一:某天电视台举办了这种一个游戏节目.主持人首先拿出三个盒子.已知这三个 ...

  10. 【Android】带底部指示的自定义ViewPager控件

    在项目中经常需要使用轮转广告的效果,在android-v4版本中提供的ViewPager是一个很好的工具,而一般我们使用Viewpager的时候,都会选择在底部有一排指示物指示当前显示的是哪一个pag ...