正文

html5+css+js贪吃蛇demo(代码片段)

love-ziji  love-ziji  2022-12-14  559

关键词：

我写博客的主要目的就是温习所学的知识，自己以前写的游戏当然不能放过！

这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的，由于那个时候初学网页前端，所以这款游戏是纯原生Java Script写的，没有使用JQuery。

重新看了一遍自己写的代码，大一的我真的太年轻了，一个注释都没有写，幸好这款游戏的逻辑不难，还能看得懂，补了一些注释，对一些细节加深了理解。（以后要逼着自己写注释才行呀！）

从大一寒假写C语言的俄罗斯方块开始，我就下定决心学一门编程语言，就用这门编程语言写一个游戏，这个目标也基本上实现了，陆陆续续写了C++推箱子、Python飞机大战，最近正在写Java打砖块，以后会慢慢跟大家分享的。

废话不多说，上代码！

<!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>
    <script type="text/javascript">
        var size = 20; //网格大小
        var rows = 30; //网格行数
        var cols = 40; //网格列数
        var c;
        var snake = []; //保存贪吃蛇的位置信息
        var snake_len = 4; //贪吃蛇的长度
        var foodx; //食物x坐标
        var foody; //食物y坐标
        var mark; //分数
        var go = 3; //贪吃蛇爬行方向，左：1；上：2；右：3；下：4
        var pause = true; //是否暂停
        var interval; //游戏循环

        function draw() 
            c.clearRect(0, 0, size * cols, size * rows);

            c.strokeStyle = "black";
            for (var i = 1; i <= rows; i++) 
                c.beginPath();
                c.moveTo(0, i * size);
                c.lineTo(size * cols, i * size);
                c.closePath();
                c.stroke();
             //画横线
            for (var i = 1; i <= cols; i++) 
                c.beginPath();
                c.moveTo(i * size, 0);
                c.lineTo(i * size, size * rows);
                c.closePath();
                c.stroke();
             //画竖线

            c.strokeStyle = "white";
            c.fillStyle = "green";
            for (var i = 0; i < snake_len; i++) 
                c.beginPath();
                c.fillRect(snake[i].x, snake[i].y, size, size);
                c.moveTo(snake[i].x, snake[i].y);
                c.lineTo(snake[i].x + size, snake[i].y);
                c.lineTo(snake[i].x + size, snake[i].y + size);
                c.lineTo(snake[i].x, snake[i].y + size);
                c.closePath();
                c.stroke();
             //画贪吃蛇

            c.fillStyle = "yellow";
            c.beginPath();
            c.fillRect(foodx, foody, size, size);
            c.moveTo(foodx, foody);
            c.lineTo(foodx + size, foody);
            c.lineTo(foodx + size, foody + size);
            c.lineTo(foodx, foody + size);
            c.closePath();
            c.stroke(); //画食物
        

        function addfood() 
            foodx = Math.floor(Math.random() * (cols - 1)) * size;
            foody = Math.floor(Math.random() * (rows - 1)) * size;
            while (foodx == 0) 
                foodx = Math.floor(Math.random() * (cols - 1)) * size;
            
            while (foody == 0) 
                foody = Math.floor(Math.random() * (rows - 1)) * size;
            
         //设置食物位置，保证不为第一行(列)、最后一行(列)

        function start() 
            for (var i = 0; i < snake_len; i++) 
                snake[i] = 
                    x: i * size,
                    y: 0
                
             //设置贪吃蛇出现的位置
            addfood();
            draw();
            mark.innerHTML = 0;
        

        function addsnake() 
            snake_len++;
            snake.unshift(
                x: size * cols,
                y: size * rows
            ); //添加新方块至网格外，会在下个游戏循环添加至贪吃蛇
        

        function IsEat() 
            if (snake[snake_len - 1].x == foodx && snake[snake_len - 1].y == foody) 
                mark.innerHTML = (parseInt(mark.innerHTML) + 1).toString();
                addfood();
                addsnake();
            
        

        function IsDie() 
            if (snake[snake_len - 1].x == -1 * size || snake[snake_len - 1].y == -1 * size ||
                snake[snake_len - 1].x == cols * size || snake[snake_len - 1].y == rows * size) 
                clearInterval(interval);
                alert("Game Over!没有玩过瘾，那就刷新页面再来一次。");
             //贪吃蛇爬行到网格外

            for (var i = 0; i < snake_len - 1; i++) 
                if (snake[i].x == snake[snake_len - 1].x && snake[i].y == snake[snake_len - 1].y) 
                    clearInterval(interval);
                    alert("Game Over!没有玩过瘾，那就刷新页面再来一次。");
                
             //贪吃蛇缠绕
        

        function move() 
            switch (go) 
                case 1:
                    snake.push(
                        x: snake[snake_len - 1].x - size,
                        y: snake[snake_len - 1].y
                    );
                    break;
                case 2:
                    snake.push(
                        x: snake[snake_len - 1].x,
                        y: snake[snake_len - 1].y - size
                    );
                    break;
                case 3:
                    snake.push(
                        x: snake[snake_len - 1].x + size,
                        y: snake[snake_len - 1].y
                    );
                    break;
                case 4:
                    snake.push(
                        x: snake[snake_len - 1].x,
                        y: snake[snake_len - 1].y + size
                    );
            
            snake.shift();
            IsEat();
            IsDie();
            draw();
         //游戏循环

        function keydown(keyCode) 
            switch (keyCode) 
                case 37:
                    if (go != 1 && go != 3)
                        go = 1;
                    break;
                case 38:
                    if (go != 2 && go != 4)
                        go = 2;
                    break;
                case 39:
                    if (go != 3 && go != 1)
                        go = 3;
                    break;
                case 40:
                    if (go != 4 && go != 2)
                        go = 4;
                    break;
                case 32:
                    if (pause) 
                        interval = setInterval(move, 130); //开始游戏循环
                        pause = false;
                        document.getElementById(‘pause‘).innerHTML = "Pause";

                     else 
                        clearInterval(interval);
                        pause = true;
                        document.getElementById(‘pause‘).innerHTML = "Satrt";
                    
                    break;
            
         //键盘操作

        window.onload = function () 
            c = document.getElementById(‘canvas‘).getContext(‘2d‘);
            mark = document.getElementById(‘score‘);
            start();
            document.onkeydown = function (event) 
                var event = event || window.event;
                keydown(event.keyCode);
            
        
    </script>

    <style>
        #page 
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            width: 1000px;
            height: 600px;
        

        #yard 
            width: 800px;
            border: 1px solid gray;
            box-shadow: 0 0 10px #000;
            float: right;
        

        #mark 
            font-weight: 800;
        

        #score 
            color: #f00;
        

        button 
            width: 50px;
        

        p 
            margin-left: 40px;
        
    </style>
</head>

<body>
<div id="page">
    <div id="yard">
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
    <div id="help">
        <div id="mark">Mark:<span id="score"></span></div>
        <div id="helper">
            <table>
                <tr>
                    <td></td>
                    <td>
                        <button onclick="keydown(38)">Up</button>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <button onclick="keydown(37)">Left</button>
                    </td>
                    <td>
                        <button onclick="keydown(32)" id="pause">Satrt</button>
                    </td>
                    <td>
                        <button onclick="keydown(39)">Right</button>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button onclick="keydown(40)">Down</button>
                    </td>
                    <td></td>
                </tr>
            </table>
            <p>空格键暂停</p>
        </div>
    </div>
</div>
</body>

</html>

效果图：

技术图片

试玩：http://static.pzijigame.com/Game/snake.html（PC端才能玩哦！！！）

有感兴趣的朋友可以直接私聊我（1527985747@qq.com），我们可以一起讨论，一起进步！！！

html+css+js实现❤️贪吃蛇游戏源码❤️(代码片段)

效果演示：代码目录：主要代码实现：部分代码:<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"&g 查看详情

web前端---html+css+js实现的贪吃蛇游戏(代码片段)

...的所有点都是不动的。用程序化来表达就是，整条贪吃蛇可以是一个类似这样[[1,2],[1,3]]的带位置信息的数组，查看详情

js实现——贪吃蛇(代码片段)

把以下代码保存成Snake.html文件，使用Google或360浏览器打开<!DOCTYPEHTML><html><head><metacharset="utf-8"/><title>Snake</title><style></style></head><body><di 查看详情

利用canvas+js实现贪吃蛇(代码片段)

今天想写一个贪吃蛇的页面，于是就选择了Canvs，不过只实现蛇身的长度是1的情况，对于蛇身大于2的情况，我还没想出来如何绘制蛇，等查资料后，再来实现下面是源码部分：html：<divstyle="... 查看详情

js学习——贪吃蛇代码（简易版）(代码片段)

贪吃蛇目录游戏链接：页面游戏页面开始页面暂停页面代码html代码css代码js代码素材目录结构图片素材说明方块的构造函数方块原型上的方法蛇的构造函数蛇的初始化方法蛇的下一个位置方法（重点）这个方法用于获... 查看详情

js学习——贪吃蛇代码（简易版）(代码片段)

js制作贪吃蛇小游戏(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>#mapwidth:800px;height:800px;background-color:black;position:relative;< 查看详情

html实现简单的贪吃蛇小游戏（附完整源码）(代码片段)

基于HTML5技术的贪吃蛇小游戏的设计与实现项目简介：贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术... 查看详情

利用canvas+js实现贪吃蛇(代码片段)

将贪吃蛇改造成面向对象，类似插件的东西。过程中，要把握好this的指向，因为这个，调试了好大会将randFood进行了修正，添加了一个配置参数与默认参数合并方法，其他的都还是一样的。html代码没有改&#... 查看详情

#夏日挑战赛#openharmony基于js实现的贪吃蛇(代码片段)

...划3.0–夏日挑战赛前言不知道干啥，那就敲代码吧，写个贪吃蛇，很显然，被自己菜哭了，自己写的贪吃蛇自己都不会玩（ps:我曾经可是在不会死亡的情况下完了好长时间>_<)实现效果如下：:::hljs-center:::具体实现思路容器初... 查看详情

react-redux自制简易贪吃蛇小游戏(代码片段)

...本环境搭建首先画一个框，当作边界，再初始化贪吃蛇，就像这样:左上角两个小黑方块就是贪吃蛇了这里贪吃蛇的移动是以网格做单位的，把游戏区查看详情

react-redux自制简易贪吃蛇小游戏(代码片段)

利用canvas+js实现贪吃蛇(代码片段)

相比1来说，增加了，以下功能：1、蛇每次一次食物，蛇身就增加 1。 2、吃一次食物，速度就加快20毫秒未实现：蛇头碰到蛇身时，游戏结束。。。。bug：在它向上移动时，按向下键，身... 查看详情

typescript教程#16：ts+webpack+less实现贪吃蛇小游戏(代码片段)

...谷TypeScript教程（李立超老师TS新课）学习笔记。贪吃蛇源码笔记：https://github.com/kaimo313/typescript-demo/tree/main/greedy-snake项目搭建我们以demo3的项目为基础，可以复制一份过来在这个基础上添加less相关的处理npmi-Dlessles... 查看详情

typescript教程#16：ts+webpack+less实现贪吃蛇小游戏(代码片段)

html+css+js实现❤️贪吃蛇游戏你能吃过我？❤️源码送给你一起来玩-建议收藏(代码片段)

🍅作者主页：Java李杨勇 🍅简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】🍅欢迎点赞👍收藏⭐留言📝 效果演示：... 查看详情