码迷,mamicode.com
首页 > Web开发 > 详细

JS100行代码实现 贪吃蛇 ,快写给你的女朋友

时间:2020-07-29 21:40:24      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:html   load()   code   star   screen   start   doctype   white   next   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #root{
            width: 100%;
            font-size: 0;
        }
        .block{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script>
        const BLOCK_LENGTH = 30;  //方格边长
        const BLOCK_COLOR = "white";  //方格颜色
        const FOOD_COLOR = "salmon";  //食物颜色
        const HEAD_COLOR = "orchid";  //头部颜色
        const BODY_COLOR = "plum";  //身体颜色
        let js = 0;  //定时器ID
        let w_size = Math.floor((window.screen.width || 450) / BLOCK_LENGTH),  //横向方格数量
            h_size = Math.floor((document.documentElement.clientHeight || 450) / BLOCK_LENGTH);  //纵向方格数量
        //生成地图 start
        if(true){
            let map = "";
            for(let i = 0, len = w_size * h_size; i < len; ++i){
                map += `<div class=‘block‘ style=‘width:${BLOCK_LENGTH}px;height:${BLOCK_LENGTH}px;background-color:${BLOCK_COLOR};‘></div>`;
            }
            document.getElementById(‘root‘).innerHTML = map;
        }
        //生成地图 end
        let snake_list = [0];  //蛇身
        let snake_length = 1;  //蛇身长度
        let block_list = document.getElementsByClassName(‘block‘);  //方格列表
        function creat_food(){  //生成食物
            let sub = 0;
            if(snake_list.length / (w_size * h_size) < 0.75){
                sub = Math.floor(Math.random()*(w_size*h_size));
                while(block_list[sub].style.backgroundColor != BLOCK_COLOR){
                    sub = Math.floor(Math.random()*(w_size*h_size));
                }
            }else{
                let block_arr = [];
                for(let i = 0, len = w_size * h_size; i < len; ++i){
                    if(block_list[i].style.backgroundColor == BLOCK_COLOR){
                        block_arr.push(i);
                    }
                }
                sub = block_arr[Math.floor(Math.random()*(block_arr.length))];
            }
            block_list[sub].style.backgroundColor = FOOD_COLOR;
        }
        let dir = 4;  //移动方向(上:1下:2左:3右:4)
        function move(){  //移动
            let handle = function(next){
                let max = next > snake_list[snake_length - 1] ? next : snake_list[snake_length - 1];
                if(
                    block_list[next] == undefined ||
                    block_list[next].style.backgroundColor == BODY_COLOR ||
                    (
                        Math.abs(next - snake_list[snake_length - 1]) == 1 &&
                        max % w_size == 0
                    )
                ){
                    clearInterval(js);
                    alert("得分:" + snake_length);
                    location.reload();
                }else if(block_list[next].style.backgroundColor == FOOD_COLOR){
                    block_list[snake_list[snake_length - 1]].style.backgroundColor = BODY_COLOR;
                    snake_list.push(next);
                    ++snake_length;
                    block_list[next].style.backgroundColor = HEAD_COLOR;
                    creat_food();
                }else{
                    block_list[snake_list[snake_length - 1]].style.backgroundColor = BODY_COLOR;
                    block_list[snake_list[0]].style.backgroundColor = BLOCK_COLOR;
                    snake_list.shift();
                    snake_list.push(next);
                    block_list[snake_list[snake_length - 1]].style.backgroundColor = HEAD_COLOR;
                }
            };
            switch(dir){
                case 1:
                    handle(snake_list[snake_length - 1] - w_size);
                    break;
                case 2:
                    handle(snake_list[snake_length - 1] + w_size);
                    break;
                case 3:
                    handle(snake_list[snake_length - 1] - 1);
                    break;
                case 4:
                    handle(snake_list[snake_length - 1] + 1);
                    break;
                default:
                    ;
            }
        }
        document.onkeypress = function(e){
            let theEvent = e || window.event;
            let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            switch(code){
                case 38: case 119:
                    (dir == 1 || dir == 2) ? void 0 : dir = 1;
                    break;
                case 37: case 97:
                    (dir == 3 || dir == 4) ? void 0 : dir = 3;
                    break;
                case 40: case 115:
                    (dir == 1 || dir == 2) ? void 0 : dir = 2;
                    break;
                case 39: case 100:
                    (dir == 3 || dir == 4) ? void 0 : dir = 4;
                    break;
                default:
                    ;
            }
        };
        block_list[snake_list[0]].style.backgroundColor = HEAD_COLOR;
        creat_food();
        js = setInterval(move, 300);
    </script>
</body>
</html>

代码易读不用解释,只提一个事,蛇移动的时候,没必要每个部位都动,只处理头尾就可以了,这个应该也是显而易见的

JS100行代码实现 贪吃蛇 ,快写给你的女朋友

标签:html   load()   code   star   screen   start   doctype   white   next   

原文地址:https://www.cnblogs.com/zhenfeishi/p/13399314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!