前端那些事之原生 js实现贪吃蛇篇

最新推荐文章于 2024-05-15 02:21:18 发布

weixin_33966365

最新推荐文章于 2024-05-15 02:21:18 发布

阅读量117

点赞数

文章标签：前端 python ViewUI

原文链接：https://my.oschina.net/yongxinke/blog/852277

版权

2019独角兽企业重金招聘Python工程师标准>>>

原生js实现贪吃蛇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇游戏</title>
    <style>
        body, div, img {
            margin: 0 auto;
            padding: 0;
        }
        body{
            background-color: #fff;
            color:#b35208;
        }
        .wrapper{
            width: 800px;
            height: 400px;
            background: url("./images/bg.png") no-repeat center center;
            padding: 80px;
        }
        .score{
            margin: 10px auto;
            text-align: center;
            font-size: 30px;
            font-weight: 900;
        }
        .col{
            width: 40px;
            height: 40px;
            float: left;
            display: inline-block;

        }
        .row{

        }
        .snake{
            background: url("./images/box.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .egg{
            background: url("./images/circle.png") no-repeat center center;
            background-size: 100% 100%;
        }
        .gameover{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 408px;
            height: 90px;
            margin-top: -90px;
            margin-left:-204px;
            background: url("./images/gameover.png") no-repeat center center;
            opacity:0;
            transform: scale(0);
            transition: all .5s;
            z-index: -1;
        }
        .show{
            opacity:1;
            transform: scale(1);
            z-index: 1;
        }
        
    </style>
</head>
<body>
<div class="gameover" id="gameover">

</div>
<div class="score">得分:0</div>
<div class="wrapper">
    <!--<div class="row">-->
        <!--<div class="col snake"></div>-->
        <!--<div class="col"></div>-->
        <!--<div class="col egg"></div>-->
    <!--</div>-->
</div>
<script>
    /*
    * 1.创建基础
    * 2.蛇的初始化，实物的初始化（随机）
    * 3.开始游戏
    *   1.键盘事件切换
    *   2.开始之后，判断是否碰到墙
    *   3.判断是否碰到自己
    *   4.判断是否吃了实物
    * 4.游戏结束
    * */
    var scoreDiv = document.querySelector(".score"); //取得分的div对象
    var score = 0;//得分
    var rows = 9; //行
    var cols = 20; //列
    var snakeArr = []; //存储所有对象
    var time = 400; //毫秒

    var snakebody = []; //定义一个数组存放蛇身
    var direction = "right"; //操作蛇移动的方向
    var changeDir = true; //添加键盘事件监听方向键来改变蛇的移动方向

    function createModel(){//创建基础
        var wrapperDiv = document.querySelector(".wrapper");
        for(var i = 0; i < rows; i++) {
            var rowDiv = document.createElement("div");
            var rowArry = [];
            for(var j = 0; j < cols; j++) {
                var colDiv = document.createElement("div");
                colDiv.className = "col";
                rowArry.push(colDiv);
                rowDiv.appendChild(colDiv);
            }
            snakeArr.push(rowArry);
            wrapperDiv.appendChild(rowDiv);
        }
        wrapperDiv.style.width = cols * 40 + "px";
        wrapperDiv.style.margin = "auto";
    }
    //创建蛇的初始模型
    function snake() {
        for(var i = 0; i < 3; i++) {
            snakeArr[0][i].className = "col snake";
            snakebody.push(snakeArr[0][i]);
        }
    }
    createModel();
    snake();

    document.onkeydown = function(event) {
        event = event || window.event; //判断是否需要改变方向，true表示需要 false不需要
        if(!changeDir) {
            return; //表示直接结束函数，后续代码不执行
        }
        //假设蛇在向右移动，按键左右都不起作用
        if(direction == "right" && event.keyCode == "37") {
            return;
        }
        if(direction == "left" && event.keyCode == "39") {
            return;
        }
        if(direction == "down" && event.keyCode == "38") {
            return;
        }
        if(direction == "up" && event.keyCode == "40") {
            return;
        }
        //更据按键操作，设置方向
        switch(event.keyCode) {
            case 37:
                direction = "left"; //方向向左
                break;
            case 38:
                direction = "up";
                break;
            case 39:
                direction = "right";
                break;
            case 40:
                direction = "down";
                break;
        }
        //按键后变为false
        changeDir = false;
        //延迟
        var delayTime = setTimeout(function() {
            changeDir = true;
            clearTimeout(delayTime);
        }, time);
    }
    //蛇的移动偏移量
    var x = 2;
    var y = 0;
    //蛇的移动函数
    function snakeMove() {
        var snameTimer = setInterval(function() {
            //更据设置的方向设置蛇头的方向
            switch(direction) {
                case "right":
                    x++;
                    break;
                case "left":
                    x--;
                    break;
                case "up":
                    y--;
                    break;
                case "down":
                    y++;
                    break;
            }
            //判断游戏结束－－碰壁

            if(x < 0 || x >= cols || y < 0 || y >= rows) {
                document.getElementById("gameover").style.display = "block";
                clearInterval(snameTimer);
                return;
            }
            //判断蛇吃到自己
            for(var i = 0; i < snakebody.length; i++) {
                if(snakebody[i] == snakeArr[y][x]) {
                    document.getElementById("gameover").style.display = "block";
                    clearInterval(snameTimer);
                    return;
                }
            }
            //判断蛇头移动的位置是否有蛋
            if(eggX == x && eggY == y) {
                snakeArr[eggY][eggX].className = "col snake";
                snakebody.push(snakeArr[eggY][eggX]);//加入到蛇身
                score++;
                scoreDiv.innerHTML = "得分:" + score;
                food();
            } else {
                snakebody[0].className = "col";
                snakebody.shift();
                snakeArr[y][x].className = "col snake";
                snakebody.push(snakeArr[y][x]);
            }
        }, time);
    }
    snakeMove();
    //随机函数
    function randomNumber(max) {
        var ran = Math.floor(Math.random() * max);
        return ran;
    }
    //生成蛋的函数
    var eggX = 0;
    var eggY = 0;
    function food() {
        //随机出新的egg的下标的x和y
        eggX = randomNumber(cols);
        eggY = randomNumber(rows);
        //如果即将生蛋的位置和蛇身重合
        if(snakeArr[eggY][eggX].className == "col snake") {
            food(); //重新生成
        } else {
            //否则 新生生蛋的位置并改样式
            snakeArr[eggY][eggX].className = "col egg";
        }
    }
    food();
</script>
</body>
</html>

转载于:https://my.oschina.net/yongxinke/blog/852277