JS implements a simple version of the Snake game-HTML Tutorial-php.cn

JS implements a simple version of the Snake game
jacklove
Release： 2018-06-11 23:42:15
Original
1917 people have browsed it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>新建网页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>

    <script type="text/javascript">
        //① 绘制地图
        function Map() {
            //私有成员(不会随便发生变化)
            var w = 800;
            var h = 400;

            //成员方法，绘制地图
            this.showmap = function () {
                //创建p、设置css样式、追加给body
                var tu = document.createElement(&#39;p&#39;);

                tu.style.width = w + "px";
                tu.style.height = h + "px";
                tu.style.backgroundImage = "url(./12.jpg)";

                document.body.appendChild(tu);
            }
        }

        //② 绘制食物
        function Food() {
            var len = 20;
            //把食物(权值)坐标声明为公开的，以便在外部访问
            this.xFood = 0;
            this.yFood = 0;
            this.piece = null; //页面上唯一的食物对象
            //绘制
            this.showfood = function () {
                //创建p、设置css样式、追加给body
                if (this.piece === null) {
                    this.piece = document.createElement(&#39;p&#39;);
                    this.piece.style.width = this.piece.style.height = len + "px";
                    this.piece.style.backgroundColor = "green";
                    this.piece.style.position = "absolute";

                    document.body.appendChild(this.piece);
                }
                //食物设置绝对定位(position/left/top)
                //食物位置“随机”摆放
                //移动步进值：20px
                //食物“权值”坐标： X轴(0-39)  Y轴(0-19)  
                //食物真实坐标：权值坐标 *  步进值
                this.xFood = Math.floor(Math.random() * 40);  //0-39的随机数
                this.yFood = Math.floor(Math.random() * 20);  //0-19的随机数

                this.piece.style.left = this.xFood * len + "px";
                this.piece.style.top = this.yFood * len + "px";

            }
        }

        //③ 小蛇
        function Snake() {
            var len = 20;
            this.redirect = "right"; //默认向右边移动
            //后期snakebody要变化，因此声明为公开的(每个蛇节：[x坐标，y坐标，颜色，蛇节对象])
            this.snakebody = [[0, 1, &#39;green&#39;, null], [1, 1, &#39;green&#39;, null], [2, 1, &#39;green&#39;, null], [3, 1, &#39;red&#39;, null]];
            //a.绘制小蛇
            this.showsnake = function () {
                //遍历小蛇的各个蛇节，并依次创建即可
                for (var i = 0; i < this.snakebody.length; i++) {
                    //this.snakebody[i]//代表每个蛇节
                    //创建蛇节p
                    if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节
                        this.snakebody[i][3] = document.createElement(&#39;p&#39;);
                        //设置css样式(宽度、高度、颜色)
                        this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px";
                        this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];
                        //绝对定位及位置
                        this.snakebody[i][3].style.position = "absolute";
                        //把蛇节追加给body
                        document.body.appendChild(this.snakebody[i][3]);
                    }
                    this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px";
                    this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px";
                }
            }

            //b.移动小蛇
            this.movesnake = function () {
                //非蛇头蛇节(当前蛇节的新坐标 是"下个蛇节"的旧坐标)
                for (var i = 0; i < this.snakebody.length - 1; i++) {
                    this.snakebody[i][0] = this.snakebody[i + 1][0];
                    this.snakebody[i][1] = this.snakebody[i + 1][1];
                }
                if (this.redirect == "right") {
                    //蛇头x坐标递增
                    this.snakebody[this.snakebody.length - 1][0] += 1;
                }
                if (this.redirect == "left") {
                    //蛇头x坐标递减
                    this.snakebody[this.snakebody.length - 1][0] -= 1;
                }
                if (this.redirect == "up") {
                    //蛇头y坐标递减
                    this.snakebody[this.snakebody.length - 1][1] -= 1;
                }
                if (this.redirect == "down") {
                    //蛇头y坐标递增
                    this.snakebody[this.snakebody.length - 1][1] += 1;
                }

                //判断蛇头碰到食物
                //蛇头坐标
                var xSnake = this.snakebody[this.snakebody.length - 1][0];
                var ySnake = this.snakebody[this.snakebody.length - 1][1];
                //食物坐标food.xFood/food.yFood;
                if (xSnake == food.xFood && ySnake == food.yFood) {
                    //吃食物增加蛇节
                    var newjie = [this.snakebody[0][0], this.snakebody[0][1], &#39;green&#39;, null];
                    this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置去

                    //原食物消失，重新生成一个食物
                    food.showfood();
                }

                //控制小蛇在地图范围内移动
                if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
                    alert(&#39;game over&#39;);
                    clearInterval(mytime);
                    return false;
                }
                //吃到自己判断(蛇头坐标与其他蛇节坐标一致)
                for (var k = 0; k < this.snakebody.length - 1; k++) {
                    if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
                        alert(&#39;game over kill you by yourself&#39;);
                        clearInterval(mytime);
                        return false;
                    }
                }

                //根据新坐标绘制小蛇
                this.showsnake();
            }
        }

        window.onload = function () {
            var map = new Map();
            map.showmap();

            food = new Food();//声明为全局的以便在该加载事件函数外部访问
            food.showfood();

            snake = new Snake();//声明为全局的snake对象
            snake.showsnake();

            //移动小蛇
            //setInterval(全局变量，时间)
            mytime = setInterval("snake.movesnake()", 200);

            //设置键盘事件，控制器小蛇移动方向
            document.onkeydown = function (evt) {
                var num = evt.keyCode;//通过事件对象获得数值码，进而知道被触发键子
                if (num == 38) {
                    snake.redirect = "up";
                }
                if (num == 40) {
                    snake.redirect = "down";
                }
                if (num == 37) {
                    snake.redirect = "left";
                }
                if (num == 39) {
                    snake.redirect = "right";
                }
            }
        }
    </script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body></body>
</html>
Copy after login
This article shows the code related to JS implementation of a simple version of the Snake game. For more related content, please pay attention to the Chinese website of Inkjet PHP.
Related recommendations:
Simple PHP MySQL paging class
##HTML to Excel, and print and download functions
Two tree array constructors without recursion
The above is the detailed content of JS implements a simple version of the Snake game. For more information, please follow other related articles on the PHP Chinese website!