前端 纯js版 贪吃蛇小游戏开发

web前端混合开发流程|用gulp开发前端环境|游戏编程开发是前端还是后端

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>前端开发 游戏</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <script>
        //绘制地图
        function Map() {
            var width = 800;
            var height = 400;
            this.show = function () {
                var tu = document.createElement(“div”);
                tu.style.width = width + ‘px’;
                tu.style.height = height + ‘px’;
                tu.style.background = ‘#ccc’;
                document.body.appendChild(tu);
            }
        }
        //绘制食物
        function Food() {
            var len = 20;
            this.xFood = 0;
            this.yFood = 0;
            this.piece = null;
            this.showfood = function () {
                if (this.piece === null) {
                    this.piece = document.createElement(‘div’);
                    this.piece.style.width = this.piece.style.height = len + ‘px’;
                    this.piece.style.background = ‘green’;
                    this.piece.style.position = ‘absolute’;
                    document.body.appendChild(this.piece);
                }
                this.xFood = Math.floor(Math.random() * 40);//食物的权值坐标
                this.yFood = Math.floor(Math.random() * 20);
                this.piece.style.left = this.xFood * len + ‘px’;
                this.piece.style.top = this.yFood * len + ‘px’;
            }
        }
        //绘制小蛇
        function Snake() {
            var len = 20;
            this.snakebody = [[0, 1, ‘green’, null],
            [1, 1, ‘green’, null], [2, 1, ‘green’, null], [3, 1, ‘red’, null]];
            this.redirect = ‘right’;
            this.showSnake = function () {
                for (var i = 0; i < this.snakebody.length; i++) {
                    if (this.snakebody[i][3] === null) {
                        this.snakebody[i][3] = document.createElement(‘div’);
                    }
                    this.snakebody[i][3].style.width = len + ‘px’;
                    this.snakebody[i][3].style.height = len + ‘px’;
                    this.snakebody[i][3].style.background = this.snakebody[i][2];
                    this.snakebody[i][3].style.position = ‘absolute’;
                    this.snakebody[i][3].style.left = this.snakebody[i][0] * len + ‘px’;
                    this.snakebody[i][3].style.top = this.snakebody[i][1] * len + ‘px’;
                    document.body.appendChild(this.snakebody[i][3]);
                }
            }
            //移动小蛇、
            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’) {
                    this.snakebody[this.snakebody.length – 1][0] += 1;
                }
                if (this.redirect == ‘left’) {
                    this.snakebody[this.snakebody.length – 1][0] -= 1;
                }
                if (this.redirect == ‘up’) {
                    this.snakebody[this.snakebody.length – 1][1] -= 1;
                }
                if (this.redirect == ‘down’) {
                    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];
                if (xSnake == food.xFood && ySnake == food.yFood) {
                    //吃食物 增加蛇节
                    var newjie = [this.snakebody[0][0], this.snakebody[0][1], ‘green’, null];
                    this.snakebody.unshift(newjie);
                    food.showfood();
                }
                if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
                    alert(‘Game Over’);
                    clearInterval(timer);
                    return false;
                }
                for (var k = 0; k < this.snakebody.length – 1; k++) {
                    if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
                        alert(‘咬到自己了’);
                        clearInterval(timer);
                        return false;
                    }
                }
                this.showSnake();
            }
        }
        window.onload = function () {
            var map = new Map();
            map.show();
            food = new Food();//声明为全局对象
            food.showfood();
            snake = new Snake();
            snake.showSnake();
            timer = setInterval(“snake.moveSnake()”, 500);
            document.onkeydown = function (e) {
                var num = e.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>
</body>
</html>

前端开发环境搭建文档|游戏编程开发是前端还是后端|游戏开发前端薪资

» 本文来自:前端开发者 » 《前端 纯js版 贪吃蛇小游戏开发》
» 本文链接地址:https://www.rokub.com/4957.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!