HTML5贪吃蛇代码

最新推荐文章于 2024-03-02 18:08:16 发布
最新推荐文章于 2024-03-02 18:08:16 发布
阅读量2.1w 收藏 25
点赞数 12
分类专栏： JavaWeb

首先声明，这是网上摘录的贪吃蛇完整代码，放在我博客上仅作学习用。

<!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 = "red";
                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,200);
                                        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;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
JensLee
关注
  • 12
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
H5贪吃蛇代码
06-13
html5贪吃蛇代码文件 html5贪吃蛇代码文件 html5贪吃蛇代码文件 html5贪吃蛇代码文件 html5贪吃蛇代码文件
HTML5 贪吃蛇游戏实现思路及源代码
12-13
游戏操作说明 通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。 游戏具体实现 游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制 每个方块的移动呢？ 如果观察蛇的移动，可以发现，从蛇的头部到尾部，每个方块在下一时刻的位置就是它的前一个方块在当前时刻 的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。 另外一个值得注意的问题是 贪吃蛇吃下食物之后，新增加的方块应该放在哪个位置。 答案就是在下一时刻，新增加的方块应该出现在当前时刻的尾部位置。 因此，在吃下食物之后应该在更新蛇的每
python贪吃蛇游戏代码详解,python贪吃蛇最简单代码
2301_81837718的博客
03-02 951
这篇文章主要介绍了python贪吃蛇游戏代码详解外加中文，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。
html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）
IT_10的博客
08-03 5006
先看结果截图（界面很丑，但是主要是为了贪吃蛇游戏算法设计和历史记录、排行榜功能的实现，希望以后不被产品经理打，哈哈） 功能描述： 1.开始游戏页面之前输入玩家姓名 2.历史记录：可以查看之前自己玩过的记录（历史记录存储在本机硬盘，所以即使电脑重新开启，下一次也能读取到之前的记录） 3.排行榜：历史玩家的记录 4.清除记录：清除所有存储在本机的记录 实现： &lt;!doctype...
用html画布创建贪吃蛇,利用HTML5 canvas和jQuery制作的贪吃蛇网页小游戏：
weixin_34749016的博客
06-22 150
Document#canvas{box-shadow: 0 0 10px #000;margin: 20px auto;display: block;}$(function(){//canvas绘图的构造函数function Draw(canvas){this.canvas = canvas;//Draw私有属性传入dom获取canvas；//检测兼容this.check = function()...
用javascript制作网页贪吃蛇游戏
2301_78098294的博客
06-02 475
【代码】用javascript制作网页贪吃蛇游戏。
H5贪吃蛇完整代码（前端HTML CSS JS）
10-22
用积分免费下载的资源哦~ HTML5 CSS3 JavaScript制作的精美贪吃蛇小游戏 对期末作业、代码学习等方面都很有帮助
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
javascript实战项目——网页版贪吃蛇
知来者逆的博客
04-04 3611
这是一个网页版本的贪吃蛇项目，用了html和js实现，代码有很多注释，方便阅读，是一个不错的练手项目。
贪吃蛇html游戏代码
wjh091225的博客
03-23 1万+
贪吃蛇html游戏代码 拿来即用! 代码如下 <!DOCTYPE html> html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map { width: 400px; height: 400px;...................
Html5 Canvas轻松实现贪吃蛇游戏
op_cd的博客
02-14 329
html5 canvas实现贪吃蛇小游戏
Html5 贪吃蛇特效特效代码
03-20
Html5 贪吃蛇特效是一款简单的使用键盘按键的游戏效果，游戏规则：按上下左右键控制方向。
HTML5 canvas简单贪吃蛇小游戏特效代码
03-20
HTML5 canvas简单贪吃蛇小游戏，按上下左右键开始游戏。
贪吃蛇HTML5代码
06-04
此段代码实现了简单的贪吃蛇网页版，用css、HTML5和JS完成
HTML5贪吃蛇中文版
12-01
HTML5贪吃蛇中文版基于HTML5 canvas制作，贪吃蛇网页版小游戏，代码附带详细中文注释，供大家参考。
用html做贪吃蛇
02-06
贪吃蛇html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击index.html即可开始贪吃蛇，加油！！！
html5简单的贪吃蛇小游戏代码
11-03
html5简单的贪吃蛇小游戏代码 html5简单的贪吃蛇小游戏代码
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
最新发布
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
html5贪吃蛇代码
06-01
以下是一个简单的 HTML5 贪吃蛇游戏的代码示例： ```html <!DOCTYPE html> <html> <head> <title>贪吃蛇游戏</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="gameCanvas" width="400" height="400"></canvas> <script> // 定义游戏画布和绘图环境 var canvas = document.getElementById("gameCanvas"); var ctx = canvas.getContext("2d"); // 定义蛇的初始位置和大小 var snakeX = 10; var snakeY = 10; var snakeSize = 20; // 定义蛇的移动速度和方向 var snakeSpeed = 1; var snakeDirection = "right"; // 定义食物的初始位置和大小 var foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize; var foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize; var foodSize = snakeSize; // 绘制蛇和食物 function draw() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制蛇 ctx.fillStyle = "green"; ctx.fillRect(snakeX, snakeY, snakeSize, snakeSize); // 绘制食物 ctx.fillStyle = "red"; ctx.fillRect(foodX, foodY, foodSize, foodSize); } // 更新蛇的位置和方向 function update() { // 根据方向更新蛇的位置 if (snakeDirection == "right") { snakeX += snakeSize * snakeSpeed; } else if (snakeDirection == "left") { snakeX -= snakeSize * snakeSpeed; } else if (snakeDirection == "up") { snakeY -= snakeSize * snakeSpeed; } else if (snakeDirection == "down") { snakeY += snakeSize * snakeSpeed; } // 检测蛇是否吃到了食物 if (snakeX == foodX && snakeY == foodY) { // 重新生成食物的位置 foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize; foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize; } } // 监听键盘事件，改变蛇的方向 document.addEventListener("keydown", function(event) { if (event.keyCode == 37 && snakeDirection != "right") { snakeDirection = "left"; } else if (event.keyCode == 38 && snakeDirection != "down") { snakeDirection = "up"; } else if (event.keyCode == 39 && snakeDirection != "left") { snakeDirection = "right"; } else if (event.keyCode == 40 && snakeDirection != "up") { snakeDirection = "down"; } }); // 游戏循环，每秒钟更新一次 setInterval(function() { update(); draw(); }, 1000 / 60); </script> </body> </html> ``` 这只是一个简单的示例，还有很多地方可以进行优化和改进，比如增加蛇的长度、增加难度等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值