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. Linux程序

    1.如何找到一个进程的安装程序目录与启动目录 2.如何完全卸载一个程序

  2. 开发SharePoint 自定义WebService 的小工具

    是一个开源的项目,地址:http://www.codeproject.com/Articles/10728/WSS-Web-Service-DISCO-and-WSDL-Generator-Helpe ...

  3. PropertiesTest

    import java.io.FileInputStream; import java.io.IOException; import java.util.Properties; public clas ...

  4. WPF自定义依赖集合属性无法触发更新的问题

    通常WPF中通过继承UserControl的来快速创建自定义控件,最近项目上需要设计一个卫星星图显示控件,最终效果如下图所示.完成过程中遇到了自定义集合依赖属性无法触发更新通知的问题,在此记录一下,方 ...

  5. Python 规范化LinkedIn用户联系人的职位名

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-19 @author: guaguastd @name: j ...

  6. 2014年7月微软MVP名单揭晓！

    微软公司于2001年8月起開始在亚洲与各大基本的第三方站点上的微软技术相关论坛合作,微软称之为"亚洲社区支持"计划.    为了鼓舞大家在论坛中更好地互相帮助,共同提高,微软在全亚 ...

  7. python学习（四）字符串学习

    #!/usr/bin/python # 这一节学习的是python中的字符串操作 # 字符串是在Python中作为序列存在的, 其他的序列有列表和元组 # 1. 序列的操作 S = 'Spam' # ...

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

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

  9. 【WPF学习笔记】之如何点登录按钮时判断用户名密码进行登录：动画系列之（二）

    ...... 承接动画系列之(一)的代码: 再添加登录按钮代码进行登录,验证用户名和密码在数据库是否正确. 直接上代码: using System; using System.Collections. ...

  10. ANDROID 推送到底哪家强（转）

    之前在群里有同学问我关于推送的一些问题,解答之后我觉得这个话题还挺有用,因为几乎大部分人都会遇到这个问题,那姑且就写篇文章总结给你们吧. 1. 为什么要用推送? 推送功能可谓是现如今任何一个 App ...