首页 > 代码库 > 最简单的HTML5游戏——贪吃蛇

最简单的HTML5游戏——贪吃蛇

2024-10-07 04:44:38   217人阅读

<html>
<head>
<meta charset="UTF-8"/>
<title>贪吃蛇</title>
</head>

<body>
    <canvas id="canvas" width="1000" height="700"></canvas>
    <div>
        <input id="switch" type="button" value=http://www.mamicode.com/"開始" onclick="clickSwitch()">

        <input id="content" type="text" value=http://www.mamicode.com/"0">
    </div>
</body>

<script type="text/javascript">
    const WIDTH = 1000;
    const HEIGHT = 700;
    const SNACK_WIDTH = 20;
    const SNACK_HEIGHT = 20;
    //移动时间间隔
    const TIME_MOVE = 300;
    //食物刷新时间
    const TIME_FOOD = 5000;
    //食物总量
    const TOTAL_FOOD = 200;
    //石头刷新时间
    const TIME_STONE = 8000;
    //石头总量
    const TOTAL_STONE = 300;
    
    var switchStatus = 0;
    var changeMove = "right";
    var currentMove = "right";
    //全部被用的位置
    var points = new Array();
    var snacks = new Array();
    var foods = new Array();
    var stones = new Array();
    var moveing = false;
    var timeMoveId, timeFoodId, timeStoneId;
    
    window.onload = function () {
        createGround();
    };
    
    //捕获按的哪个键
    function keyDown(event) {
        if (event.keyCode == "87") {
            //按下W键
            changeMove = "up";
        } else if (event.keyCode == "68") {
            //按下D键
            changeMove = "right";
        } else if (event.keyCode == "83") {
            //按下S键
            changeMove = "down";
        } else if (event.keyCode == "65") {
            //按下A键
            changeMove = "left";
        }
    }

    function handlePoints(x, y, type) {
        if (0 == type) {
            points.push(x+y*WIDTH);
        } else {
            var index = points.indexOf(x+y*WIDTH);
            if (index != -1) {
                points.splice(index, 1);
            }
        }
    }
    
    //贪吃蛇
    function snack(x, y) {
        this.x = x;
        this.y = y;
    }
    
    //食物
    function food(x, y) {
        this.x = x;
        this.y = y;
    }
    
    //石头
    function stone(x, y) {
        this.x = x;
        this.y = y;
    }
    
    //开关操作
    function clickSwitch() {
        if (switchStatus == 0 || switchStatus == 2) {
            document.getElementById("switch").value = http://www.mamicode.com/"暂停";
            if (switchStatus == 0) {
                //開始
                play();
            }
            switchStatus = 1;
        } else if (switchStatus == 1) {
            document.getElementById("switch").value = http://www.mamicode.com/"继续";
            switchStatus = 2;
        }
    }
    
    //碰撞判定并操作
    function judge(x, y) {
        /*** 推断是否撞上边界  ***/
        if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) {
            end();
            return;
        }
        
        var i;
        /*** 推断是否撞上自己  ***/
        for (i = 1; i < snacks.length; i++) {
            if (snacks[0].x == snacks[i].x && snacks[0].y == snacks[i].y) {
                end();
                return;
            }
        }
        
        /*** 推断是否撞上石头  ***/
        for (i = 0; i < stones.length; i++) {
            if (snacks[0].x == stones[i].x && snacks[0].y == stones[i].y) {
                end();
                return;
            }
        }
        
        /*** 推断是否撞上食物  ***/
         var flag = false;
        for (i = 0; i < foods.length; i++) {
            if (x == foods[i].x && y == foods[i].y) {
                flag = true;
                foods.splice(i, 1);
            }
        }
        var newSnack = new snack(x, y);
        snacks.unshift(newSnack);
        if (!flag) {
            var p = snacks.pop();
            handlePoints(p.x, p.y, 1);
        }
        document.getElementById("content").value = http://www.mamicode.com/"x:"+snacks[0].x+" y:"+snacks[0].y+" length:"+snacks.length;
        
        refresh();
    }
    
    //移动贪吃蛇
    function move() {
        if(moveing == false && switchStatus == 1) {
            moveing = true;
            if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) {
                currentMove = "left";
                judge(snacks[0].x-SNACK_WIDTH, snacks[0].y);
            } else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) {
                currentMove = "up";
                judge(snacks[0].x, snacks[0].y-SNACK_HEIGHT);
            } else if ((currentMove != "left" && changeMove == "right")  || (currentMove == "right" && changeMove == "left")) {
                currentMove = "right";
                judge(snacks[0].x+SNACK_WIDTH, snacks[0].y);
            } else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up")){
                currentMove = "down";
                judge(snacks[0].x, snacks[0].y+SNACK_HEIGHT);
            }
            changMove = currentMove;
        }
        moveing = false;
    }
    
    //创建地图
    function createGround() {
        var canvas = document.getElementById("canvas");
        var draw = canvas.getContext(‘2d‘);
        //清除原图形
        draw.clearRect(0, 0, WIDTH, HEIGHT);
        draw.strokeStyle = "red";
        draw.strokeRect(0, 0, WIDTH, HEIGHT);
    }
    
    //创建食物
    function createFood() {
        if (foods.length < TOTAL_FOOD) {
            var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
            var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
            if (points.indexOf(x+y*WIDTH) == -1) {
                var newFood = new food(x, y);
                //alert(newFood.x + "****" + newFood.y);
                var canvas = document.getElementById("canvas");
                var draw = canvas.getContext(‘2d‘);
                draw.fillStyle = "green";
                draw.fillRect(x, y, SNACK_WIDTH, SNACK_HEIGHT);
                foods.push(newFood);
                handlePoints(x, y, 0);
            }
        }
    }
    
    //创建石头
    function createStone() {
        if (stones.length < TOTAL_STONE) {
            var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
            var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
            if (points.indexOf(x+y*WIDTH) == -1) {
                var newStone = new stone(x, y);
                var canvas = document.getElementById("canvas");
                var draw = canvas.getContext(‘2d‘);
                draw.fillStyle = "#663300";
                draw.beginPath();   
                draw.arc(x+SNACK_WIDTH*0.5, y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
                draw.closePath();                        
                draw.fill();
                stones.push(newStone);
                handlePoints(x, y, 0);
            }
        }
    }
    
    //刷新场景
    function refresh() {
        var canvas = document.getElementById("canvas");
        var draw = canvas.getContext(‘2d‘);
        //清除原图形
        draw.clearRect(1, 1, WIDTH-2, HEIGHT-2);
        
        /*** 边界  ***/
        draw.strokeStyle = "red";
        draw.strokeRect(0, 0, WIDTH, HEIGHT);
        
        var i;
        /*** 食物   ***/
        draw.fillStyle = "green";
        for (i = 0; i < foods.length; i++) {
            draw.fillRect(foods[i].x, foods[i].y, SNACK_WIDTH, SNACK_HEIGHT);
        }
        
        /*** 石头  ***/
        draw.fillStyle = "#663300";
        for (i = 0; i < stones.length; i++) {
            draw.beginPath();   
            draw.arc(stones[i].x+SNACK_WIDTH*0.5, stones[i].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
            draw.closePath();                        
            draw.fill();
        }
        
        /***  贪吃蛇    ***/
        draw.fillStyle = "blue";                   
        draw.beginPath();   
        //圆心x坐标|圆心y坐标|半径|始|PI为圆周率。Math.PI*2为画圆|true为时针方向：逆时针，0为顺时针
        draw.arc(snacks[0].x+SNACK_WIDTH*0.5, snacks[0].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);     
        draw.closePath();                        
        draw.fill();
        for (i = 1; i < snacks.length; i++) {
            draw.fillRect(snacks[i].x, snacks[i].y, SNACK_WIDTH, SNACK_HEIGHT);
        }
    }

    //游戏開始
    function play() {
        createGround();
        
        for (var i = 2; i > 0; i--) {
            var newSnack = new snack(SNACK_WIDTH*i, SNACK_HEIGHT);
            snacks.push(newSnack);
            handlePoints(newSnack.x, newSnack.y, 0);
        }
        refresh();
        
        document.onkeydown = keyDown;
        timeMoveId = setInterval(move, TIME_MOVE);
        timeFoodId = setInterval(createFood, TIME_FOOD);
        timeStoneId = setInterval(createStone, TIME_STONE);
    }
    
    //游戏结束
    function end() {
        clearInterval(timeMoveId);  
        clearInterval(timeFoodId);  
        clearInterval(timeStoneId);  
        switchStatus = 0;
        changeMove = "right";
        currentMove = "right";
        points.length = 0;
        snacks.length = 0;
        foods.length = 0;
        stones.length = 0;
        moveing = false;
        document.getElementById("switch").value = http://www.mamicode.com/"開始";
        document.getElementById("content").value = http://www.mamicode.com/"游戏结束";
        alert("游戏结束");
    }
    
</script>

</html>

最简单的HTML5游戏——贪吃蛇


联系
我们