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. HDU 3466 01背包变形

    给出物品数量N和总钱数M 对于N个物品.每一个物品有其花费p[i], 特殊值q[i],价值v[i] q[i] 表示当手中剩余的钱数大于q[i]时,才干够买这个物品 首先对N个物品进行 q-p的排序,表 ...

  2. vue 监听 watch 使用

    1.api https://cn.vuejs.org/v2/api/#watch 有2个配置: (1)深度 watcher deep: true(2)该回调将会在侦听开始之后被立即调用 immedia ...

  3. ps快捷键记录

    alt+delete  前景色填充 ctrl+delete  背景色填充 alt+shift+鼠标调节  变换选取,做圆环 ctrl+t  自由变换 alt+鼠标拖动  快捷复制某区域 delete ...

  4. 【BIEE】数据透视表格第一列添加序号

    现在有这么一个需求,需要在数据透视图的表格前面条件一列序号,作为行号,如下图: 那么实现这个如何实现呢? 只需要在BIEE分析编辑界面,新建一列,然后公式定义为:RCOUNT(RSUM(1)) ,保存 ...

  5. js函数的Json写法

    https://zhidao.baidu.com/question/83401454.html

  6. CSS - 修改input - placeholder 和 readonly 的样式

    placeholder ::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; } :-moz-placeholder ...

  7. vsftpd 虚拟用户限定在虚拟用户目录

    1.安装vsftpd yum -y install pam pam-devel db4 db4-tcl vsftpd 2.更名默认配置文件,以便恢复 cp /etc/vsftpd/vsftpd.con ...

  8. 【Android】第三方库使用的问题集

    Google/百度地图Key的获取 百度地图UnsatisfiedLinkError错误 async-http-client中的FATAL EXCEPTION Google/百度地图Key的获取 无论 ...

  9. ASP.NET动态网站制作（7）-- JS（2）

    前言:这节课是JS的第二节课,主要是JS中的控制语句. 内容: 1.条件语句:  (1)比较操作符:==,!=,>,>=,<,<=.字符串大小写转换:toUpperCase() ...

  10. 【BZOJ3671】[Noi2014]随机数生成器 暴力

    [BZOJ3535][Noi2014]随机数生成器 Description Input 第1行包含5个整数,依次为 x_0,a,b,c,d ,描述小H采用的随机数生成算法所需的随机种子.第2行包含三个 ...