我的第一篇博客文章-----HTML

最新推荐文章于 2024-08-16 22:57:43 发布

Dream.梦

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量139

点赞数 2

分类专栏： js 文章标签： html 贪吃蛇

本文链接：https://blog.csdn.net/qq_41123811/article/details/95734860

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

网页版游戏-贪吃蛇

（1）游戏构思

1.1 如何实现主要画面

1.运用canvas画布构造蛇的运动界面
2.以颜色填充实现蛇的身体
3.以随机数生成食物的坐标

1.2 如何实现网页动态

1.根据蛇头的坐标变换实现蛇的动态移动
2.根据蛇与食物的坐标碰撞重合实现分数积累
3.根据分数的增加为游戏增强难度

（2）游戏设计

2.1 设计主体

主体的设置如下：

<body>
    <div id="box">
        <h2>其实我不贪吃的你是知道的</h2>
        <canvas id="canvas" width="450" height="450"></canvas>
    </div>
    <div id="score">得分：<span id="score1"></span></div>

2.2 CSS样式设计

页面的样式：

    #box{width: 680px;height: 500px;border:1px solid white;margin: 0px auto;}
    h2{color:black;text-align: center;text-shadow: 2px 2px 5px #000;}
    #canvas{
        background: green;
        display: block;
        margin: 0px auto;
    }
    #score{
        width: 80px;
        height: 30px;
        background: red;
        text-align: center;
        line-height: 30px;
        position: fixed;
        top: 20px;
        left: 100px;
    }

2.3 JS实现动态变换

将画布分割成一个个格子，实现坐标与填充

            var ctx = document.getElementById("canvas").getContext('2d');
            for(var i = 0;i<30;i++){
            ctx.strokeStyle = "white";
            ctx.beginPath();
            ctx.moveTo(0,15*i);
            ctx.lineTo(450,15*i);
            ctx.moveTo(15*i,0);
            ctx.lineTo(15*i,450);
            ctx.closePath();
            ctx.stroke();
            }

定义各个变量

        //整个蛇的身体
        var snake = [];
        //蛇的长度和宽度
        var width = 15;
        var height = 15;
        //蛇的头
        var head;
        //蛇开始运动的速度
        var speed = 500;
        //游戏得分
        var score = 0;
        //食物开始的位置

3.蛇的绘制

        //蛇的节点长度
        for(var i = 0;i<5;i++){
            snake[i] = new cell(i,0,-2)
        }
        //蛇的节点 x，y代表坐标，f代表方向
        function cell(x,y,f){
            this.x = x;
            this.y = y;
            this.f = f;
        }
        drawsnake();

其中drawsnake的方法包括蛇的绘制和碰撞食物后
的蛇的身体重新绘制

 function drawsnake(){
            ctx.clearRect(0,0,450,450)
            for(var i = 0;i<snake.length;i++){
                ctx.fillStyle = "black";
                //蛇头的特别颜色
                if(i==snake.length-1){
                    ctx.fillStyle = "red";
                }
                ctx.beginPath();
                ctx.rect(snake[i].x*15,snake[i].y*15,width,height);
                ctx.closePath();
                ctx.fill();
            }
            head = snake[snake.length-1];
            drawfood();
            //判断食物碰撞
            if(head.x==food.x&&head.y==food.y){
                var newcell = new cell(head.x,head.y,head.f);
                var Score;
                score++;
                Score = score;
                document.getElementById("score1").innerHTML = Score;
                switch(head.f){
                    case 1:newcell.y--;break;
                    case 2:newcell.x--;break;
                    case -1:newcell.y++;break;
                    case -2:newcell.x++;break;
                }
                snake[snake.length] = newcell;
                //蛇的速度增加,随着游戏的进行游戏难度不断增加
                if(speed>100){
                    speed = speed-20;//20个
                }if (speed>50){
                    speed = speed-5;//30个
                }else{
                    speed = speed- 1;//80个最多
                }
                initfood();
           }
       }

4.食物的生成

        //食物的坐标
        function food(x,y){
            this.x = x;
            this.y = y;
        }
        //绘制食物
        function drawfood(){
            ctx.fillStyle = "yellow";
            ctx.beginPath();
            ctx.rect(food.x*15,food.y*15,width,height);
            ctx.closePath();
            ctx.fill();
        }
        //食物随机生成
        function initfood(){
            var x = Math.ceil(Math.random()*28+1);
            var y = Math.ceil(Math.random()*28+1);
            food.x = x;
            food.y = y;
            for(var i = 0;i<snake.length;i++){
                if(snake[i].x == x&&snake[i].y ==y){
                    initfood();
                }
            }
        }

5.键盘控制蛇的移动

//键盘监听事件//上1下-1左2右-2
        document.onkeydown = function(e){
            var code = e.keyCode;
            var direction = 0;
            switch (code) {
                case 38:direction = 1;break
                case 39:direction = -2;break
                case 40:direction = -1;break
                case 37:direction = 2;break
            }
            //禁止蛇进行掉头
            if(direction!=0){
                if(parseInt(head.f)+direction!=0){
                    movesnake(direction);
                }
            }
        }
        //蛇移动的方法
        function movesnake(direction){
            var newcell = new cell(head.x,head.y,head.f);
            newcell.f = direction;
            var newsnake = [];
            //循环定义新的蛇
            for(var i = 1;i<snake.length;i++){
                newsnake[i-1] = snake[i];
            }
            newsnake[newsnake.length] = newcell;
            switch(direction){
                case 1:newcell.y--;break;
                case 2:newcell.x--;break;
                case -1:newcell.y++;break;
                case -2:newcell.x++;break;
            }
            snake = newsnake;
            head = snake[snake.length-1];
            //判断是否执行游戏结束，游戏结束，停止蛇的绘画
            if(isgameover()){
                drawsnake();
            }
        }

6.游戏的结束

//判断游戏结束
        function isgameover(){
            //超出边框
            if(head.x>=30||head.x<0||head.y>=30||head.y<0){
                alert('游戏结束');
                window.location.reload();
            }
            //在自己碰撞
            for(var i=0;i<snake.length-2;i++){
                if(head.x==snake[i].x&&head.y==snake[i].y){
                    alert('游戏结束');
                    window.location.reload();
                }
            }
            return true;
        }

7.时间移动

//自动移动
        function movecell(){
            movesnake(head.f);
            setTimeout("movecell()",speed)
        }
        movecell();

（3）评价

一个简单点的网页版贪吃蛇，其中有一个bug有时在食物碰撞是会出现颜色的重叠。 js实现

Dream.梦

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的第一篇博客文章-----HTML

网页版游戏-贪吃蛇（1）游戏构思1.1 如何实现主要画面1.运用canvas画布构造蛇的运动界面2.以颜色填充实现蛇的身体3.以随机数生成食物的坐标1.2 如何实现网页动态1.根据蛇头的坐标变换实现蛇的动态移动2.根据蛇与食物的坐标碰撞重合实现分数积累3.根据分数的增加为游戏增强难度（2）游戏设计2.1 设计主体2.2 CSS样式设计2.3 JS实现动态变换（3）评价...
复制链接

扫一扫

专栏目录