贪吃蛇小游戏（面向对象编程）

最新推荐文章于 2022-06-05 18:07:41 发布

小天妖精

最新推荐文章于 2022-06-05 18:07:41 发布

阅读量147

点赞数

分类专栏： Javascript 文章标签： javascript 面向对象编程

本文链接：https://blog.csdn.net/weixin_39084623/article/details/113643588

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

面向对象编程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="cont">

    </div>
</body>
<script>
    var map;
    var snake;
    var food;
    onload = function () {
        map=new Map();
        map.display();
        food=new Food();
        food.display();
        snake=new Snake();
        document.onkeydown = function (e) {
            var e = e || event;
            snake.setDirect(e.keyCode);
        }
        snake.display();
    }
    setInterval(function () {
            snake.move();
            snake.display();
        }, 100)
    function Map() {
        this.width = 800;
        this.height = 700;
        this.color = "#ccc";
        this.pos = "0 auto";
        this.m = null;
    }
    Map.prototype.display = function () {
        this.m = document.createElement("div");
        this.m.style.width = this.width + "px";
        this.m.style.height = this.height + "px";
        this.m.style.margin = this.pos;
        this.m.style.position = "relative";
        this.m.style.background = this.color;
        document.body.appendChild(this.m);
    }

    function Food() {
        this.width = 20;
        this.height = 20;
        this.x = 0;
        this.y = 0;
        this.f = null;
    }
        Food.prototype.display = function(){
            if (this.f == null) {
                this.f = document.createElement("div");
                this.f.style.width = this.width + "px";
                this.f.style.height = this.height + "px";
                this.f.style.position = "absolute";
                map.m.appendChild(this.f);
                this.f.style.borderRadius=50+"%";
                console.log(1)
            }
            this.f.style.background =`rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`;
            this.x = Math.round(Math.random() * 39);
            this.y = Math.round(Math.random() * 19);

            this.f.style.left = this.x * this.width + "px";
            this.f.style.top = this.y * this.height + "px";
        }

    function Snake() {
        this.width = 20;
        this.height = 20;
        this.color = "yellow";
        this.body = [[5, 3, null], [4, 3, null], [3, 3, null]];
        this.direct = "right";
    }
    Snake.prototype.display = function () {
        this.color=`rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)},${Math.round(Math.random()*255)})`;
        for (var i = 0; i < this.body.length; i++) {
            if (this.body[i][2] == null) {
                this.body[i][2] = document.createElement("div");
            }
            this.body[i][2].style.width = this.width + "px";
            this.body[i][2].style.height = this.height + "px";
            this.body[i][2].style.position = "absolute";
            this.body[i][2].style.background =this.color ;
            this.body[i][2].style.left = this.body[i][0] * this.width + "px";
            this.body[i][2].style.top = this.body[i][1] * this.height + "px";
            map.m.appendChild(this.body[i][2]);
        }
        this.body[0][2].style.borderRadius=30+"%"
    }
    Snake.prototype.move = function () {
        for (var i = this.body.length - 1; i > 0; i--) {
            this.body[i][0] = this.body[i - 1][0];  
            this.body[i][1] = this.body[i - 1][1];
        }
        switch (this.direct) {
            case "left": this.body[0][0] -= 1; break
            case "right": this.body[0][0] += 1; break
            case "top": this.body[0][1] -= 1; break
            case "bottom": this.body[0][1] += 1; break
        }
        if (this.body[0][0] < 0) {
            alert("撞墙了");
            return;
        }
        if (this.body[0][0] > 39) {
            alert("撞墙了");
            return;
        }
        if (this.body[0][1] < 0) {
            alert("撞墙了");
            return;
        }
        if (this.body[0][1] > 34) {
            alert("撞墙了");
            return;
        }
        if (this.body[0][0] == food.x && this.body[0][1] == food.y) {
            var le = this.body.length;
            var x = this.body[le - 1][0];
            var y = this.body[le - 1][1];
            this.body.push([x, y, null]);
            food.display();
        }

        for (var i = this.body.length - 1; i > 0; i--) {
            if (this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]) {
                alert("吃到自己了");
                return;
            }
        }
    }
    Snake.prototype.setDirect = function (value) {
        switch (value) {
            case 37: this.direct = "left"; break;
            case 38: this.direct = "top"; break;
            case 39: this.direct = "right"; break;
            case 40: this.direct = "bottom"; break;
        }
    }

</script>

</html>