小蛇要長大

時間 2019-11-05

標籤小蛇長大简体版

原文原文鏈接

<!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>
        #map {
            width: 800px;
            height: 600px;
            position: relative;
            background-color: #ccc;
        }
    </style>
    <script src="./Food.js"></script>
    <script src="./Snake.js"></script>
    <script src="./Game.js"></script>
</head>

<body>
    <div id="map"></div>
    <button id='reStart'>從新開始</button>
    <button id='isStop'>暫停/開始</button>
    <script>
        window.onload = () => {
            const map = document.getElementById('map')
            const reStart=document.getElementById('reStart')
            const isStop=document.getElementById('isStop')
            let stop=true
            const game=new Game()
            game.start(map)
            reStart.onclick=()=>{
                game.snake.body=[{
                    left: 3,
                    top: 2,
                    color: 'red'
                },
                {
                    left: 2,
                    top: 2,
                    color: 'yellow'
                },
                {
                    left: 1,
                    top: 2,
                    color: 'blue'
                }];
                game.snake.direction='right';
                game.start(map)
                stop=true
            } 
            
            isStop.onclick=()=>{
                if(stop){
                    clearInterval(game.timer);
                    stop=!stop;
                }else{
                    game.snakeMoveOfTimer(game.snake,map,game.food)
                    stop=!stop;
                }

            }
        }
    </script>
</body>

</html>

Food.jsjavascript

(window=>{
    let newDiv=null;
    class Food{
        constructor(width=20,height=20,left=0,top=0,background='purple'){
            this.width=width;
            this.height=height;
            this.left=left;
            this.top=top;
            this.background=background;
        }
        init(map){
            this.remove(map,newDiv)
            newDiv=document.createElement('div')
            newDiv.style.width=this.width+'px';
            newDiv.style.height=this.height+'px';
            newDiv.style.background=this.background;
            newDiv.style.position='absolute';
            newDiv.style.borderRadius='50%';

            this.top = parseInt(Math.random()*(map.offsetHeight-this.height)/this.height)*this.height;
            this.left = parseInt(Math.random()*(map.offsetWidth-this.width)/this.width)*this.width;
            newDiv.style.left=this.left+'px';
            newDiv.style.top=this.top+'px';
            map.appendChild(newDiv);
            
        }
        remove(map,newDiv){
            if(newDiv){
                map.removeChild(newDiv)
            }
        }
    }
    window.Food=Food
})(window)

Game.jshtml

(window=>{
    class Game{
        constructor(){
            this.food=new Food()
            this.snake=new Snake()
            this.timer=null
        }
        start(){
            this.food.init(map)
            this.snake.init(map)
            this.snakeMoveOfTimer(this.snake,map,this.food)
            this.pressKey(this.snake)
        }
        snakeMoveOfTimer(snake,map,food){
            this.timer&&clearInterval(this.timer)
            this.timer=setInterval(()=>{
                snake.move(map,food);
                const headx=snake.body[0].left*snake.width;
                const heady=snake.body[0].top*snake.height;
                if(headx<0||headx>map.offsetWidth-snake.width){
                    alert`Game over!!!`
                    clearInterval(this.timer)
                }
                if(heady<0||heady>map.offsetHeight-snake.height){
                    alert`Game over!!!`
                    clearInterval(this.timer)
                }
            },200)
        }
        pressKey(snake){
            document.onkeydown=event=>{
                event=event||window.event;
                switch(event.keyCode){
                    case 37:snake.direction='left';break;
                    case 38:snake.direction='top';break;
                    case 39:snake.direction='right';break;
                    case 40:snake.direction='bottom';break;
                }
            }
        }
    }
    window.Game=Game
})(window)

Snake.jsjava

(window => {
    let arrNode = []
    class Snake {
        constructor(width, height, direction) {
            this.width = width || 20;
            this.height = height || 20;
            this.body = [{
                    left: 3,
                    top: 2,
                    color: 'red'
                },
                {
                    left: 2,
                    top: 2,
                    color: 'yellow'
                },
                {
                    left: 1,
                    top: 2,
                    color: 'blue'
                }]
            this.direction = direction || 'right';
        }
        init(map) {
            this.remove(map, arrNode)
            arrNode = []
            this.body.map(item => {
                let newDiv = document.createElement('div')
                newDiv.style.width = this.width + 'px';
                newDiv.style.height = this.height + 'px';
                newDiv.style.position = 'absolute';
                newDiv.style.left = item.left * this.width + 'px';
                newDiv.style.top = item.top * this.height + 'px';
                newDiv.style.background = item.color;
                newDiv.style.borderRadius = '50%';
                map.appendChild(newDiv)
                arrNode.push(newDiv)
            })
        }
        remove(map, arrNode) {
            arrNode.map(item => {
                map.removeChild(item)
            })

        }
        move(map,food) {
            for (let i = this.body.length-1; i >= 1; i--) {
                this.body[i].top = this.body[i - 1].top
                this.body[i].left = this.body[i - 1].left
            }
            switch (this.direction) {
                case 'right':
                    this.body[0].left++;
                    break;
                case 'left':
                    this.body[0].left--;
                    break;
                case 'top':
                    this.body[0].top--;
                    break;
                case 'bottom':
                    this.body[0].top++;
                    break;
            }
            const headerTop=this.body[0].top*this.height;
            const headerLeft=this.body[0].left*this.width;
            const last=this.body[this.body.length-1]
            if(headerLeft===food.left&&headerTop===food.top){
                const obj={
                    left:last.left,
                    top:last.top,
                    color:`rgb(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`
                }
                this.body.push(obj)
                food.init(map)
            }
            this.init(map);
        }
    }
    window.Snake = Snake
})(window)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。