分享一篇网页贪吃蛇代码

最新推荐文章于 2023-06-02 11:48:40 发布
最新推荐文章于 2023-06-02 11:48:40 发布
阅读量1k 收藏
点赞数


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: "Microsoft YaHei";
    }
   
    #page {
        margin-right: auto;
        margin-left: auto;
        margin-top: 20px;
        height: 600px;
        width: 980px;
    }
   
    #yard {
        width: 800px;
        border: 1px solid gray;
        box-shadow: 0 0 10px black;
        float: right;
    }
   
    #mark {
        font-weight: 800;
    }
   
    #mark_con {
        color: red;
    }
   
    button {
        width: 50px;
    }
   
    a {
        text-decoration: none;
    }
    </style>
    <script type="text/javascript">
    //伪常量
    var BLOCK_SIZE = 20; //格子大小
    var COLS = 40; //列数
    var ROWS = 30; //行数
    //变量
    var snakes = []; //保存蛇坐标
    var c = null; //绘图对象
    var toGo = 3; //行进方向
    var snakecount = 4; //蛇身数量
    var interval = null; //计时器
    var foodX = 0; //食物X轴坐标
    var foodY = 0; //食物Y轴坐标
    var oMark = null; //分数显示框
    var isPause = false; //是否暂停
    // 绘图函数
    function draw() {
        c.clearRect(0, 0, BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS);
        //画出横线
        for (var i = 1; i <= ROWS; i++) {
            c.beginPath();
            c.moveTo(0, i * BLOCK_SIZE);
            c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE);
            c.strokeStyle = "gray";
            c.stroke();
        }
        //画出竖线
        for (var i = 1; i <= COLS; i++) {
            c.beginPath();
            c.moveTo(i * BLOCK_SIZE, 0);
            c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS);
            c.stroke();
        }
        //画出蛇
        for (var i = 0; i < snakes.length; i++) {
            c.beginPath();
            c.fillStyle = "green";
            c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
            c.moveTo(snakes[i].x, snakes[i].y);
            c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
            c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
            c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
            c.closePath();
            c.strokeStyle = "white";
            c.stroke();
        }
        //画出食物
        c.beginPath();
        c.fillStyle = "yellow";
        c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
        c.moveTo(foodX, foodY);
        c.lineTo(foodX + BLOCK_SIZE, foodY);
        c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
        c.lineTo(foodX, foodY + BLOCK_SIZE);
        c.closePath();
        c.strokeStyle = "red";
        c.stroke();
    }
    //游戏初始化
    function start() {
        for (var i = 0; i < snakecount; i++) {
            snakes[i] = {
                x: i * BLOCK_SIZE,
                y: 0
            };
        }
        addFood();
        draw();
        oMark.innerHTML = 0;
    }
    //移动函数
    function move() {
        switch (toGo) {
            case 1: //左边
                snakes.push({
                    x: snakes[snakecount - 1].x - BLOCK_SIZE,
                    y: snakes[snakecount - 1].y
                });
                break;
            case 2: //上边
                snakes.push({
                    x: snakes[snakecount - 1].x,
                    y: snakes[snakecount - 1].y - BLOCK_SIZE
                });
                break;
            case 3: //右边
                snakes.push({
                    x: snakes[snakecount - 1].x + BLOCK_SIZE,
                    y: snakes[snakecount - 1].y
                });
                break;
            case 4: //下边
                snakes.push({
                    x: snakes[snakecount - 1].x,
                    y: snakes[snakecount - 1].y + BLOCK_SIZE
                });
                break;
            default:
                ;
        }
        snakes.shift();
        isEat();
        isDie();
        draw();
    }
    //吃到食物判断
    function isEat() {
        if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {
            oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
            addFood();
            addSnake();
        }
    }
    //添加蛇身
    function addSnake() {
        snakecount++;
        snakes.unshift({
            x: BLOCK_SIZE * COLS,
            y: BLOCK_SIZE * ROWS
        });
    }
    //交互响应函数
    function keydown(keyCode) {
        switch (keyCode) {
            case 37: //左边
                if (toGo != 1 && toGo != 3) toGo = 1;
                break;
            case 38: //上边
                if (toGo != 2 && toGo != 4) toGo = 2;
                break;
            case 39: //右边
                if (toGo != 3 && toGo != 1) toGo = 3;
                break;
            case 40: //下的
                if (toGo != 4 && toGo != 2) toGo = 4;
                break;
            case 80: //开始/暂停
                if (isPause) {
                    interval = setInterval(move, 100);
                    isPause = false;
                    document.getElementById('pause').innerHTML = "Pause";
                } else {
                    clearInterval(interval);
                    isPause = true;
                    document.getElementById('pause').innerHTML = "Start";
                }
                break;
        }
    }
    //制造食物
    function addFood() {
        foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
        foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
        // console.log(foodX + " -- " + foodY);
    }
    //死亡判断
    function isDie() {
        if (snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS || snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS) {
            alert("Game Over!");
            clearInterval(interval);
        }
        for (var i = 0; i < snakecount - 1; i++) {
            if (snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y) {
                clearInterval(interval);
                alert("Game Over!");
            }
        }
    }
    // 启动函数
    window.onload = function() {
        c = document.getElementById('canvas').getContext('2d');
        oMark = document.getElementById('mark_con');
        start();
        interval = setInterval(move, 100);
        document.onkeydown = function(event) {
            var event = event || window.event;
            keydown(event.keyCode);
        }
    }
    </script>
</head>

<body>
    <div id="page">
        <div id="yard">
            <canvas id="canvas" height="600px" width="800px"></canvas>
        </div>
        <div id="help">
            <div id="mark">得分：<span id="mark_con"></span></div>
            <div id="helper">
                <table>
                    <tr>
                        <td></td>
                        <td>
                            <button οnclick="keydown(38);">上</button>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <button οnclick="keydown(37);">左</button>
                        </td>
                        <td>
                            <button οnclick="keydown(80);" id="pause">暂停</button>
                        </td>
                        <td>
                            <button οnclick="keydown(39);">右</button>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <button οnclick="keydown(40);">下</button>
                        </td>
                        <td></td>
                    </tr>
                </table><a href="index.html">再玩一次</a>
            </div>
        </div>
    </div>
    <div style="text-align:center;">
    </div>
</body>

</html>

ZhangNingXiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html5小游戏源代码H5小游戏源码JS开发网页小游戏开源源码大合集.zip
12-30
维京战争，一个都不能死，捕鱼达人，植物大战僵尸，3D魔方，青蛙吃苍蝇，蜘蛛纸牌，贪吃蛇，水果削除，2048中文版，大鱼吃小鱼，飞机大战，跑酷小游戏，贪吃蛇2.0,射击鸭子，激流勇进，天天消消乐，别踩白块，线条生存，打砖块射击，保卫星球射击，吃豆人，开心消消乐，俄罗斯方块，2048方块版，看图猜词，弹球打砖块，小方块回家，双人五子棋，射箭小游戏，飞机大战2.0，简单闯关游戏，重力球滚动，头像迷阵消除，变色弹球跳台阶，最强眼力，俄罗斯方块2.0，双人五子棋2.0，小人推箱子，经典扫雷，英雄宝石消消乐，赛车游戏，大家来找茬，经典扫雷，锅打灰太狼，3D飞机躲避障，兔子吃月饼，接金币，灌篮高手，疯狂打企鹅，吃月饼大赛，坦克大战，图像之谜拼图，飞机躲避，熊出没，拳王，神经猫，表情，拼图魔方等等
javascript实战项目——网页版贪吃蛇
知来者逆的博客
04-04 4012
这是一个网页版本的贪吃蛇项目，用了html和js实现，代码有很多注释，方便阅读，是一个不错的练手项目。
网页版贪吃蛇源码
没刮胡子的程序员专栏
09-04 1839
运行截图 代码 完整代码如下，创建一个snake.html文件 <html> <head> <title>贪吃蛇</title> <style> body{ } table{ border-collapse: collapse; bord...
HTML5贪吃蛇代码
热门推荐
博客
05-27 2万+
首先声明，这是网上摘录的贪吃蛇完整代码，放在我博客上仅作学习用。         贪吃蛇     *{margin:0;padding: 0;font-family: "Microsoft YaHei";} #page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width
Html/Javascript snake game 贪吃蛇游戏（附全部代码）
m0_60558800的博客
01-06 2240
以前用pyhton 做了贪吃蛇游戏， 这里发表的是html/javascript 版本。难度差不多， 区别是python 主要用class, 而javascript 主要用function ， 他们的功能很相似， 写法稍微有些不同。内容大致是： 1. 蛇由蛇头（红色）和蛇身组成 2.食物随机产生 3.蛇吃到食物后， 会变长， 并且得10分 3.如果蛇头碰到自己得身体或者碰到四周墙壁，则game over 全部代码如下： <!DOCTYPE html> <html&
jQuery贪吃蛇网页版游戏代码
07-29
jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏...
python贪吃蛇代码
07-25
Python贪吃蛇游戏是利用Python编程语言实现的一款经典小游戏，它基于简单的控制逻辑和图形界面，深受初学者和爱好者的喜爱。在这个项目中，我们将深入探讨如何使用Python编写贪吃蛇游戏，涉及的知识点包括Python基础...
代码 简单贪吃蛇源码 代码 简单贪吃蛇源码
05-14
代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单贪吃蛇源码代码 简单...
贪吃蛇代码
04-20
贪吃蛇小游戏，游戏开发，游戏虽小，但各项功能俱全。与其玩别人的游戏，不如自己开发游戏
jQuery贪吃蛇网页版游戏代码.zip
06-13
【jQuery贪吃蛇网页版游戏代码】是一款基于流行的JavaScript库jQuery实现的在线贪吃蛇游戏。这款游戏将经典的街机游戏贪吃蛇移植到了网页环境中，为用户提供了在浏览器上玩耍的便捷体验。jQuery库以其简洁的API和...
贪吃蛇html游戏代码
wjh091225的博客
03-23 1万+
贪吃蛇html游戏代码 拿来即用! 代码如下 <!DOCTYPE html> html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map { width: 400px; height: 400px;...................
贪吃蛇游戏 js网页版
m0_67403013的博客
03-07 2458
在学习了前端三大件之后，对于自己的学习情况进行一个总结，所以写了一个网页版本的简单小游戏，贪吃蛇，成果如下： 首先介绍一下： 分数可以计数总共吃了多少东西，红色的是贪吃蛇的蛇头，蓝色的是食物，还有黄色的，黄色的是身体。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
贪吃蛇完整代码
X-77
11-15 2701
HTML代码如下： <div class="container"> <div class="map"></div> <div class="btn begin"><button></button></div> <div class="btn pause"><button></button></div> </d
html5 canvas+js贪吃蛇网页小游戏代码
wjh091225的博客
03-28 7982
html5 canvas+js贪吃蛇网页小游戏代码 注解都在代码里了,自己理解吧 <!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" conte.
H5网页版贪吃蛇源代码
hnliu's blog
06-15 1万+
H5网页版贪吃蛇源代码，新建文本文档，将下面的代码复制粘贴到文本文档，然后保存文件。重命名文件及后缀名为index.html。将文章最下面的两个图片保存下来，蓝色背景大图重命名为back.jpg，骷髅头的命名为pirate.png。在index.html同级目录下新建一个文件夹叫做image，然后将两张背景图放入image文件夹。现在index.html就可以正常运行了，双击就可以运行。
HTML+js实现贪吃蛇小游戏（内含完整代码）
super码力的博客
01-07 1万+
贪吃蛇小游戏用js和html如何实现，一步一步教会你......
贪吃蛇游戏代码html5,html5 贪吃蛇源码(直接可以运行)
weixin_42320061的博客
05-31 836
【实例简介】自定义 蛇的图片和食物的图片大小canvas 画图【实例截图】【核心代码】var canvas=document.getElementById("canvas");var ctx=canvas.getContext('2d');var gridWidth=20;var score=0;var foods=new Array(),snakes=new Array();var bgIam...
贪吃蛇html网页小游戏,网页贪吃蛇HTML5小游戏制作
weixin_39976413的博客
05-31 844
贪吃蛇是以前我们经常在手机里玩的一个小游戏，现在要是把它搬到网页上也会让人更回味。这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中你可以使用键盘的上下左右来控制蛇的运动方向。现在要列出的是贪吃蛇的制作方法。enjoy！查看演示下载插件.tile {background: rgba(0, 0, 0, 0.15);position: absolute;-webkit-transition-...
用javascript制作网页贪吃蛇游戏
最新发布
2301_78098294的博客
06-02 570
【代码】用javascript制作网页贪吃蛇游戏。
帮我写一个贪吃蛇的网页代码
03-20
好的，以下是一个简单的贪吃蛇网页代码： ```html <!DOCTYPE html> <html> <head> <title>贪吃蛇游戏</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> // 初始化画布和上下文 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 定义贪吃蛇的属性 var snake = { x: 10, y: 10, dx: 10, dy: 0, cells: [], maxCells: 4 }; // 定义食物的属性 var food = { x: Math.floor(Math.random() * 39) * 10, y: Math.floor(Math.random() * 39) * 10 }; // 定义游戏循环 function loop() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 移动贪吃蛇 snake.x += snake.dx; snake.y += snake.dy; // 检查是否撞墙 if (snake.x < 0 || snake.x >= canvas.width || snake.y < 0 || snake.y >= canvas.height) { alert("游戏结束！"); return; } // 添加新的身体部分 snake.cells.unshift({x: snake.x, y: snake.y}); // 删除多余的身体部分 if (snake.cells.length > snake.maxCells) { snake.cells.pop(); } // 绘制贪吃蛇 ctx.fillStyle = "green"; snake.cells.forEach(function(cell, index) { ctx.fillRect(cell.x, cell.y, 10, 10); }); // 绘制食物 ctx.fillStyle = "red"; ctx.fillRect(food.x, food.y, 10, 10); // 检查是否吃到食物 if (snake.x === food.x && snake.y === food.y) { snake.maxCells++; food.x = Math.floor(Math.random() * 39) * 10; food.y = Math.floor(Math.random() * 39) * 10; } // 设置下一帧 requestAnimationFrame(loop); } // 监听键盘事件 document.addEventListener("keydown", function(event) { switch (event.keyCode) { case 37: // 左箭头 snake.dx = -10; snake.dy = 0; break; case 38: // 上箭头 snake.dx = 0; snake.dy = -10; break; case 39: // 右箭头 snake.dx = 10; snake.dy = 0; break; case 40: // 下箭头 snake.dx = 0; snake.dy = 10; break; } }); // 开始游戏循环 requestAnimationFrame(loop); </script> </body> </html> ``` 希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值