JS小案例: 贪吃蛇

最新推荐文章于 2024-05-02 14:46:08 发布

张鹿鹿

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量2.4k

点赞数 4

分类专栏： HTML5基础文章标签： canvas

本文链接：https://blog.csdn.net/u013144863/article/details/52224547

版权

HTML5基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas测试</title>
    <script type="application/javascript">
        window.onload = function () {
            //绘图对象
            var can = document.getElementById("m_canvas");
            //38为向上按键的值, 默认蛇向上走ml
            var kc = 38;//↑
            document.onkeydown = function (key) {
                if (Math.abs(kc - key.keyCode) != 2) {
                    kc = key.keyCode;
                }
            };
            var context = can.getContext("2d");
            var array = [{x: 200, y: 150}, {x: 200, y: 155}];
            var bean = null;//豆子
            //绘图方法, 循环调用绘制图形
            function draw() {
                //蛇头
                var point = {x: array[0].x, y:array[0].y};//point就是一个对象,
                switch (kc) {
                    case 37://←
                        point.x -= 5;
                        break;
                    case 38://↑
                        point.y -= 5;
                        break;
                    case 39://→
                        point.x += 5;
                        break;
                    case 40://↓
                        point.y += 5;
                        break;
                }
                if (bean == null) {
                    var x = Math.floor(Math.random() * 80) * 5;
                    var y = Math.floor(Math.random() * 60) * 5;
                    bean = {x: x, y: y};
                }

                //蛇头移动
                for (var i = array.length; i >= 0; i--) {
                    if (i == array.length) {
                        //判断一下蛇头跟豆子在不在同一个位置
                        if (point.x == bean.x && point.y == bean.y) {
                            array[i] = array[i - 1];
                            bean = null;
                        }
                    } else if (i > 0) {
                        array[i] = array[i - 1];
                    } else {
                        array[i] = point;
                    }
                }

                if (bean == null) {
                    var x = Math.floor(Math.random() * 80) * 5;
                    var y = Math.floor(Math.random() * 60) * 5;
                    bean = {x: x, y: y};
                }

                //画出矩形
                context.fillStyle = "#000000";
                context.fillRect(0, 0, 400, 300);
                //
                context.fillStyle = "#ff0000";

                for (var i= 0; i < array.length; i++) {
                    context.fillRect(array[i].x, array[i].y, 5, 5);
                }
                context.fillStyle = "#00ff00";
                context.fillRect(bean.x, bean.y, 5, 5);


                setTimeout(draw, 200);
            }

            setTimeout(draw, 200);

        }
    </script>
</head>
<body>


<!--单写canvas没有任何意义-->
<canvas id="m_canvas" width="400" height="300">天哪你怎么还不支持canvas</canvas>

</body>
</html>

执行效果

这里写图片描述

张鹿鹿

关注

4
点赞
踩
23

收藏

觉得还不错? 一键收藏
3
评论
JS小案例: 贪吃蛇

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas测试</title> <script type="application/javascript"> window.onload = function () { //绘图对象
复制链接

扫一扫