javascript娱乐局——贪吃蛇

最新推荐文章于 2024-09-11 08:39:02 发布

54渣渣shuo

最新推荐文章于 2024-09-11 08:39:02 发布

阅读量1k

点赞数 1

分类专栏：杂项文章标签： javascript

本文链接：https://blog.csdn.net/CYS_zxcvbnm/article/details/108014544

版权

杂项专栏收录该内容

5 篇文章 0 订阅

订阅专栏

javascript娱乐局——贪吃蛇

累了，写了个小bug，阿呸。。。，小游戏，换换口味。

一共三个对象map，snake，food，代表的含义如名字。snake和food其实就是数组，表示位置，map来画图、判断得分、失败等等，直接上代码，可直接运行。

<!doctype html>
<html>

<body>
    <canvas id="map" width="400" height="400" style="background:Black"></canvas>
    <h1>Score:</h1>
    <h2 id="score">0</h2>

    <script>
        //地图
        function Map() {
            this.field = document.getElementById("map").getContext("2d"); //画布
            this.draw = function (something) { //画蛇或者食物
                this.field.fillStyle = something.color;
                var position;
                for (position in something.positions) {
                    this.field.fillRect(something.positions[position][0], something.positions[position][1], 20, 20);
                }
            }
             this.clear = function () { //清除画布
                this.field.clearRect(0, 0, 400, 400);
            }
            this.judge = function (snake, food) { //判断状态（得分、失败、普通）
                var snakeHeadX = snake.positions[0][0];
                var snakeHeadY = snake.positions[0][1];
                var foodX = food.positions[0][0];
                var foodY = food.positions[0][1];
                if ((snakeHeadX == foodX) && (snakeHeadY == foodY)) {  //吃食物
                    snake.positions.unshift([foodX, foodY]);
                    food.positions[0] = [Math.floor(Math.random() * 20) * 20, Math.floor(Math.random() * 20) * 20];
                    this.clear();
                    this.draw(food);
                    this.draw(snake);
                    var score = document.getElementById('score');
                        score.innerHTML = (Number(score.innerHTML)+1).toString();
                }
                else if ((snakeHeadX+20 > 400) || (snakeHeadX < 0) || (snakeHeadY+20 > 400) || (snakeHeadY < 0)) {
                    alert('GIME OVER!'); //撞墙
                }
                else {
                    this.clear();
                    this.draw(food);
                    this.draw(snake);
                }
            }
        }
        
        //蛇
        function Snake() {
            this.positions = [[40 + 20, 40], [40, 40], [40 - 20, 40]]; //蛇的躯干
            this.color = "Yellow";
            this.direction = [1,0]; //蛇头方向
            this.move = function () { //移动
                this.positions.unshift([this.positions[0][0] + this.direction[0] * 20, this.positions[0][1] + this.direction[1] * 20]);
                this.positions.pop();
            }
            this.obeyOrders = function (snake = this) { //等待键盘上下左右
                document.onkeydown = function (event) {
                    var e = event || window.event || arguments.callee.caller.arguments[0];
                    var order = e.keyCode;
                    console.log(snake.direction);
                    switch (order) {
                        case 37:
                            snake.direction[0] = -1;
                            snake.direction[1] = 0;
                            break;
                        case 38:
                            snake.direction[1] = -1;
                            snake.direction[0] = 0;
                            break;
                        case 39:
                            snake.direction[0] = 1;
                            snake.direction[1] = 0;
                            break;
                        case 40:
                            snake.direction[1] = 1;
                            snake.direction[0] = 0;
                            break;
                        default:
                            ;
                    }
                };
            }
        }

        //食物
        function Food() {
            this.positions = [[Math.floor(Math.random() * 20) * 20, Math.floor(Math.random() * 20) * 20]]; //随机位置
            this.color = 'Red';
        }


        //开始执行
        (function () {

            var map = new Map();
            var snake = new Snake();
            var food = new Food();
            map.draw(snake);
            map.draw(food);
            snake.obeyOrders();
            var t=0;
            var interval = setInterval(function () { //每0.5s走一步
                map.judge(snake, food);
                snake.move();
            }, 500);
        })()
    </script>


</body>

</html>