H5网页版贪吃蛇源代码

最新推荐文章于 2025-03-21 15:56:07 发布
最新推荐文章于 2025-03-21 15:56:07 发布
阅读量1.6w 收藏 32
点赞数 12
分类专栏： C++ 独立游戏 游戏开发 文章标签： html 源代码 贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuhannan111/article/details/73292629
版权
H5网页版贪吃蛇源代码，新建文本文档，将下面的代码复制粘贴到文本文档，然后保存文件。重命名文件及后缀名为index.html。将文章最下面的两个图片保存下来，蓝色背景大图重命名为back.jpg，骷髅头的命名为pirate.png。在index.html同级目录下新建一个文件夹叫做image，然后将两张背景图放入image文件夹。现在index.html就可以正常运行了，双击就可以运行。
<html lang="en">
  <head>
    <meta charset=GB2312>
    <title></title>
    <meta name="description" content="HTML5/canvas demo, 500 particles to play around with." />
    <meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" />
   <style>
html, body {
            text-align: center;
            margin:0;
            padding:0;
            background: #000000; 
            color: #666666;
            line-height: 1.25em;
        }       

        #outer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1px;
            height: 1px;
            overflow: visible;
        }       

        #canvasContainer { 
            position: absolute;
            width: 1000px;
            height: 560px;
            top: -280px;
            left: -500px;
        }

        canvas { 
            border: 1px solid #333333; 
        }

        a {
            color: #00CBCB;
            text-decoration:none;
            font-weight:bold;
        }
        a:hover {
            color:#FFFFFF;
        }

        #output {
            font-family: Arial, Helvetica, sans-serif; 
            font-size: 0.75em;
            margin-top:4px;
        }

        #footer{
            font-size: 0.6em;
            font-family: Arial, Helvetica, sans-serif;
            position: absolute;
            bottom:8px;
            width:98%;
        }

</style>
  </head>

  <body>
    <div id="outer">
        <div id="canvasContainer">
            <canvas id="mainCanvas" width="1000" height="560" style="border:1px solid #c3c3c3;"></canvas>
            <div id="output"></div>
        </div>
    </div>
<script type="text/javascript">
(function(){

    var PI_2        = Math.PI * 2;

    var canvasW     = 1000;
    var canvasH     = 560;
    var numMovers   = 600;
    var friction    = 0.96;
    var movers      = [];
    var i=0;
    var canvas;
    var ctx;
    var canvasDiv;
    var outerDiv;
    var spring=0.12;
    var mouseX;
    var mouseY;
    var mouseVX;
    var mouseVY;
    var prevMouseX;
    var prevMouseY;
    var isMouseDown;
    var snake;
    var _food;
    var speed=3;
    var gameOver=false;
    var score=0;
    var Difficulty;
    var gameState=0;//一共四个值，0,1,2,3,4,5分别对应开始开始菜单界面，正在游戏中，暂停，结束，超时,查看排名
    var playButton;
    var configButton;
    var RankingButton;
    var buttonArray=[];
    var buttonIndex=0;
    var backImage;
    var remainTime;
    function initFarm(){
        canvas = document.getElementById("mainCanvas"); 
        if ( canvas.getContext ){
            setup();
            perform=setInterval( run , speed );
        }
    }

    function setup(){
        outerDiv  = document.getElementById("outer");
        canvasDiv = document.getElementById("canvasContainer");
        ctx = canvas.getContext("2d");
        remainTime=59;
        beginTime=new Date().getSeconds();
        snake=new Asphyre(200,200,500,5);
        _food=new food(20*Math.floor(Math.random()*50),20*Math.floor(Math.random()*28));
        snake.init();
        pirate=new pirateImage(150,0,256,256,0);
        playButton=new button("Play",900,200,70,20*Math.PI/180,"blue");
        configButton=new button("Config",900,300,70,20*Math.PI/180,"blue");
        rankingButton=new button("Ranking",900,400,70,20*Math.PI/180,"blue");
        buttonArray.push(playButton);
        buttonArray.push(configButton);
        buttonArray.push(rankingButton);
        mouseX = prevMouseX = canvasW * 0.5;
        mouseY = prevMouseY = canvasH * 0.5;

        document.onmousedown = onDocMouseDown;
        document.onmouseup   = onDocMouseUp;
        document.onmousemove = onDocMouseMove;
    }

    function addNewRanking(user,score){

        var info=user+": "+score
        $.post(
                "${pageContext.request.contextPath}/graph_toXml.action",
                {info:info},
                function(data){
                }
        );
    }

    function showRanking(context){
        var ForReading = 1;
        var fso=new ActiveXObject("Scripting.FileSystemObject");
        var ts = fso.OpenTextFile("c:\\Ranking.txt", ForReading);
        s = ts.ReadLine();
        context.fillStyle = "rgba(102,195,226,1)";
        context.fillRect( 0 , 0 , canvasW , canvasH );  
        context.font="30px impact";   
        context.fillStyle="green";   
        context.textAlign="center";   
        context.fillText(s,500,50); 
        ts.Close(); 
    }
    function drawText(context){
        context.font="22px impact";   
        context.fillStyle="red";   
        context.textAlign="center";   
        context.fillText("Score:"+score,950,30); 
        context.fillText("Time:"+remainTime,50,30);

    }
    function drawBackground(context){
        backImage=new Image();
        backImage.src="image/back.jpg";
        context.drawImage(backImage,0,0,1000,560);  
    }
    var tweenLite=function(obj,endX,endY){  
        obj.x+=(endX-obj.x)*spring
        obj.y+=(endY-obj.y)*spring
    }
    var button=function(text,x,y,size,angle,color){
        this.text=text;
        this.x=x;
        this.y=y;
        this.size=size;
        this.angle=angle;
        this.color=color;
    }
    button.prototype={
        drawButton:function(context){
            var self=this;
            context.font="70px impact";   
            context.fillStyle="cfcfcf";  
            //context.fillRect(self.x, self.y-70, 500, 80);   
            //context.strokeRect(self.x, self.y-70, 500, 80);
            context.fillStyle=self.color;  
            context.strokeStyle="white";
            context.fillText(self.text,self.x,self.y);
            context.font="71px impact";   
            context.strokeText(self.text,self.x,self.y);
        },
        shake:function(context){
            var self=this;
            context.save();
            self.angle-=self.angle*spring;      
            context.rotate(self.angle);
            context.font="70px impact";   
            context.fillStyle="cfcfcf";  
            context.fillStyle="yellow";  
            context.strokeStyle="white";
            context.fillText(self.text,self.x,self.y);
            context.font="71px impact";   
            context.strokeText(self.text,self.x,self.y);
            context.restore();      
        },
        springSports:function(context,y)
        {
            var self=this;
            self.y-=(self.y-y)*spring;
            context.font="70px impact";   
            context.fillStyle="cfcfcf";  
            context.fillStyle="yellow";  
            context.strokeStyle="white";
            context.fillText(self.text,self.x,self.y);
            context.font="71px impact";   
            context.strokeText(self.text,self.x,self.y);
        }           
    }

    var pirateImage=function(x,y,w,h,rotate){
        this.x=x;
        this.y=y;
        this.w=w;
        this.h=h;
        this.rotate=rotate;
    }
    pirateImage.prototype={
        drawPirate:function(){
            var self=this;
            var image=new Image();
            image.src="image/pirate.png";
            ctx.drawImage(image,self.x,self.y,self.w,self.h);
        }
    }
    function run(){
        ctx.fillStyle = "rgba(8,8,12,1)";
        ctx.fillRect( 0 , 0 , canvasW , canvasH );  
        if(gameState==0){//开始菜单状态
            drawBackground(ctx);
            playButton.drawButton(ctx);
            configButton.drawButton(ctx);
            rankingButton.drawButton(ctx);          
            pirate.drawPirate();
            new tweenLite(pirate,150,150);
            new tweenLite(playButton,650,200);
            if(playButton.x<700){
                new tweenLite(configButton,650,320);
            }
            if(configButton.x<700){
                new tweenLite(rankingButton,650,440);
            }
            for(var i=0;i<buttonArray.length;i++){
                if(i==buttonIndex){
                    //buttonArray[i].color="yellow";    
                    buttonArray[i].shake(ctx);
                    //var y=buttonArray[i].y;
                    //buttonArray[i].springSports(ctx,y);
                }
                else{
                    buttonArray[i].angle=20*Math.PI/180;
                    buttonArray[i].color="blue";
                }           
            }
            currentButton=buttonArray[buttonIndex];
            document.onkeydown=function(event){
                var code = event.keyCode 
                switch(code) {  
                    case 38: //向上   
                        buttonIndex--;
                        if(buttonIndex<0){
                            buttonIndex=buttonArray.length-1;
                        }
                        break;   
                    case 40: //向下   
                        buttonIndex++;
                        if(buttonIndex>buttonArray.length-1){
                            buttonIndex=0;
                        }
                        break;  

                    case 13: //回车
                        if(buttonIndex==0){
                            gameState=1;  //进入游戏
                            clearInterval(perform);  
                            speed=99;
                            perform=setInterval( run , speed );
                        }
                        if(buttonIndex==2){
                            //gameState=5;  //查看排名
                        }
                        break;
                }

            }
            if(rankingButton.x<651){
                //buttonArray[buttonIndex].color="yellow";
                //buttonArray[buttonIndex].shake(ctx);
            }
        }
        if(gameState==2){
            ctx.fillStyle = "rgba(102,195,226,1)";
            ctx.fillRect( 0 , 0 , canvasW , canvasH );  
            drawText(ctx);
            _food.drawFood(ctx);
            snake.drawNodes(ctx);
            clearInterval(perform); 
            document.onkeydown = function(event) {      
                var code = event.keyCode;
                switch(code){   
                    case 32: //暂停
                        gameState=1;
                        perform=setInterval( run , speed );
                        break;
                }  
            }
        }
        if(gameState==3){
            snake.die();
        }

        if(gameState==5){
            showRanking(ctx);
        }
        if(gameState==4){
            snake.drawTimeout(ctx);


        }
        if(gameState==1){
            ctx.fillStyle = "rgba(102,195,226,1)";
            ctx.fillRect( 0 , 0 , canvasW , canvasH );  
            var currentSeconds=new Date().getSeconds();
            if(currentSeconds!=beginTime){
                remainTime--;
                if(remainTime<0){
                    remainTime=0;
                    $.messager.prompt('My Title', '请输入你的姓名', function(r){
                        if (r){
                            $.messager.alert('My Title',r+",您的得分信息已经上传到排名","");
                        }
                    });
                    //addNewRanking(str,score);
                    //gameState=4;  
                    clearInterval(perform); 
                }
                beginTime=currentSeconds;
            }
            document.onkeydown = function(event) {      
                var code = event.keyCode   
                var isException = false;   
                switch(code){   
                    case 37: //向左   
                        if(snake.direction!="right"){   
                            snake.direction ="left";
                        } else isException = true;   
                        break;   
                    case 38: //向上   
                        if(snake.direction!="down"){   
                            snake.direction ="up";   
                        } else isException = true;   
                        break;   
                    case 39: //向右   
                        if(snake.direction!="left"){   
                            snake.direction = "right";
                        } else isException = true;   
                        break;   
                    case 40: //向下   
                        if(snake.direction!="up"){   
                            snake.direction = "down";   
                        } else isException = true;   
                        break; 
                    case 32: //暂停
                        gameState=2; 
                        break;
                }  
            }
            drawText(ctx);
            _food.drawFood(ctx);
            snake.drawNodes(ctx);
            snake.go();
        }
    }


    function onDocMouseMove( e ){
        var ev = e ? e : window.event;
        mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
        mouseY = ev.clientY - outerDiv.offsetTop  - canvasDiv.offsetTop;
    }

    function onDocMouseDown( e ){
        isMouseDown = true;
        return false;
    }

    function onDocMouseUp( e ){
        isMouseDown = false;
        return false;
    }

    var AsphyreNode=function(x,y,w,h){
        this.x=x;
        this.y = y;   
        this.w = w;   
        this.h = h;
    }
    AsphyreNode.prototype={
        equals:function(node){
            if(this.x==node.x&&this.y==node.y)
                return true;
            return false;
        }
    }

    function Asphyre(x,y,speed,initNodes){
        var self=this;
        self.speed=speed;
        self.initNodes=initNodes;
        self.speedParam = speed * initNodes; 
        self.nodeSize=20;
        self.nodes=[];
        self.x=x;
        self.y=y;
        self.direction="right";
        document.onkeydown = function(event) {      
            var code = event.keyCode   
            var isException = false;   
            switch(code) {   
                case 37: //向左   
                    if(self.direction!="right"){   
                        self.direction ="left";
                    } else isException = true;   
                    break;   
                case 38: //向上   
                    if(self.direction!="down"){   
                        self.direction ="up";   
                    } else isException = true;   
                    break;   
                case 39: //向右   
                    if(self.direction!="left"){   
                        self.direction = "right";
                    } else isException = true;   
                    break;   
                case 40: //向下   
                    if(self.direction!="up"){   
                        self.direction = "down";   
                    } else isException = true;   
                    break;   
            }   
            if(isException){   
                    alert("方向异常，不能沿反方向后退!");   
            }   
        }
    }
    Asphyre.prototype={
        init:function(){
            var self=this,x=self.x,y=self.y;
            this.nodes=[];
            for(var i=0;i<this.initNodes;i++){
                this.nodes[i]=new AsphyreNode(self.x-i*20,self.y,self.nodeSize,self.nodeSize);
            }
        },  
        drawNodes:function(context){   //绘制设身体   
            var self = this;   
            context.fillStyle = "blue";   
            context.strokeStyle = "#ffffff";   
            for(var i = 0; i < this.nodes.length; i++) {   
                context.fillRect(this.nodes[i].x, this.nodes[i].y, this.nodeSize, this.nodeSize);   
                context.strokeRect(this.nodes[i].x, this.nodes[i].y, this.nodeSize, this.nodeSize);   
            }   
        },
        go:function(){
            var self = this;
            if(self.direction=="left"){
                if(self.nodes[0].equals(new AsphyreNode(_food.x,_food.y,self.nodeSize,self.nodeSize))) {//吃到食物，少走一步   
                    self.eatFood();    
                }  
                self.judgeOut();
                for(var i=self.nodes.length-2;i>=0;i--){
                    self.nodes[i+1].x=self.nodes[i].x;
                    self.nodes[i+1].y=self.nodes[i].y;
                }
                self.nodes[0].x-=self.nodeSize; 
            }
            if(self.direction=="right"){
                if(self.nodes[0].equals(new AsphyreNode(_food.x,_food.y,self.nodeSize,self.nodeSize))) {//吃到食物，少走一步   
                    self.eatFood();    
                } 
                self.judgeOut();
                for(var i=self.nodes.length-2;i>=0;i--){
                    self.nodes[i+1].x=self.nodes[i].x;
                    self.nodes[i+1].y=self.nodes[i].y;
                }
                self.nodes[0].x+=self.nodeSize;
            }
            if(self.direction=="up"){
                if(self.nodes[0].equals(new AsphyreNode(_food.x,_food.y,self.nodeSize,self.nodeSize))) {//吃到食物，少走一步   
                    self.eatFood();   
                } 
                self.judgeOut();
                for(var i=self.nodes.length-2;i>=0;i--){
                    self.nodes[i+1].x=self.nodes[i].x;
                    self.nodes[i+1].y=self.nodes[i].y;
                }
                self.nodes[0].y-=self.nodeSize;
            }
            if(self.direction=="down"){
                if(self.nodes[0].equals(new AsphyreNode(_food.x,_food.y,self.nodeSize,self.nodeSize))) {//吃到食物，少走一步 
                    self.eatFood();  
                } 
                self.judgeOut();
                for(var i=self.nodes.length-2;i>=0;i--){
                    self.nodes[i+1].x=self.nodes[i].x;
                    self.nodes[i+1].y=self.nodes[i].y;
                }
                self.nodes[0].y+=self.nodeSize;
            }
        },
        eatFood:function(){
            var self=this;
            self.nodes.unshift(new AsphyreNode(_food.x,_food.y,self.nodeSize,self.nodeSize));
            score+=10;
            _food=new food(20*Math.floor(Math.random()*50),20*Math.floor(Math.random()*28));
            if((self.nodes.length-self.initNodes)%3==0){
                speed-=11;
            }   
            clearInterval(perform);  
            perform=setInterval( run , speed );
        },
        judgeOut:function(){
            var self=this;
            if(self.nodes[0].y>canvasH-self.nodeSize||self.nodes[0].y<0){
                gameState=3;
            }
            if(self.nodes[0].x>canvasW-self.nodeSize||self.nodes[0].x<0){
                gameState=3;
            }
        },
        die:function(){
            var self=this;  
            self.nodes=[];
            _food=null;     
            self.drawOver(ctx);
        },
        drawOver:function(context){
            context.font="60px impact";   
            context.fillStyle="red";   
            context.textAlign="center";   
            context.fillText("GAME OVER!",500,250); 
        },
        drawTimeout:function(context){
            context.font="60px impact";   
            context.fillStyle="red";   
            context.textAlign="center";   
            context.fillText("TIME OUT! YOUR SCORE IS "+score,500,250);     
        }
    }

    function food(x,y){
        this.x=x;
        this.y=y;
    }

    food.prototype={
        drawFood:function(context){
            var self = this;   
            context.fillStyle = "yellow";   
            context.strokeStyle = "#ffffff"; 
            context.fillRect(self.x, self.y, 20, 20);   
            context.strokeRect(self.x, self.y, 20, 20);
        }
    }
    function rect( context , x , y , w , h ){
        context.beginPath();
        context.rect( x , y , w , h );
        context.closePath();
        context.fill();
    }


    window.onload = initFarm;

})();

</script>   

  </body>
</html>

这里写图片描述

这里写图片描述

【贪吃蛇-----html实现（附源代码）】| 网络工程师面试题：什么是网络隧道？它在网络中的作用和应用场景是什么？
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
12-21 3261
【贪吃蛇-----html实现（附源代码）】网络工程师面试题：什么是网络隧道？它在网络中的作用和应用场景是什么？
JS网页版贪吃蛇游戏代码.zip
07-04
JS网页版贪吃蛇游戏代码是一款原生js制作贪吃蛇游戏V2.0版本。
html5贪吃蛇源码
03-13
html5贪吃蛇源码,代码浅显易懂。
网页版贪吃蛇源码
没刮胡子的程序员专栏
09-04 1959
运行截图 代码 完整代码如下，创建一个snake.html文件 <html> <head> <title>贪吃蛇</title> <style> body{ } table{ border-collapse: collapse; bord...
第一个问题.如何搭建一个H5的页面，做到响应式布局
最新发布
2403_89711566的博客
03-21 1288
响应式布局是一种网页设计方法，它允许网页根据用户的设备（桌面电脑、平板、手机等）自动调整布局和样式。灵活性：页面能够适应不同屏幕尺寸。用户体验：无论在何种设备上，用户都能获得良好的浏览体验。HTML5：提供更语义化的标签，优化页面结构。CSS3：特别是媒体查询（Media Queries）和弹性布局（Flexbox）。在styles.css/* 基本样式 */body {margin: 0;padding: 0;nav ul {
H5 贪吃蛇源码
weixin_30896511的博客
01-20 318
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
HTML5游戏源码《贪吃蛇》
ccnanxi的博客
12-19 3680
贪吃蛇             *{             margin: 0px;             padding: 0px;         }         td,tr{             border:1px solid gray;             width:48px;             height:48px;      
JavaScript 网页版贪吃蛇游戏代码
10-23
JavaScript版贪吃蛇游戏，网页小游戏代码分享，这类小游戏可以很好的用JS来实现，游戏速度由快、中、慢可选，按“空格键” 开始/暂停，方向键控制蛇身运动方向，若要想研究代码原理，可关注代码中的注释，写的非常好，蛇的颜色和食物颜色都可自定义。
Html5小游戏源代码H5小游戏源码JS开发网页小游戏开源源码大合集.zip
12-30
维京战争，一个都不能死，捕鱼达人，植物大战僵尸，3D魔方，青蛙吃苍蝇，蜘蛛纸牌，贪吃蛇，水果削除，2048中文版，大鱼吃小鱼，飞机大战，跑酷小游戏，贪吃蛇2.0,射击鸭子，激流勇进，天天消消乐，别踩白块，线条...
简单的js html5网页贪吃蛇游戏代码下载
11-03
在本资源中，我们得到了一个基于JavaScript和HTML5编写的简单贪吃蛇游戏的源代码。这个项目展示了如何利用这两种技术来创建一个交互式的网页应用。让我们深入探讨一下相关知识点。 1. HTML5：HTML（超文本标记语言...
贪吃蛇双人对战版.zip
04-25
在本项目中，"贪吃蛇双人对战版.zip"是一个包含源代码的压缩包，主要用于展示如何使用JavaScript和jQuery实现一个双人对战的贪吃蛇游戏。这是一个非常适合初学者深入理解这两种技术的实践案例。以下是关于JavaScript...
h5贪吃蛇动画
12-15
【文件列表】：“jquery-tcs”可能是一个包含该插件所有源代码的文件夹，其中可能有以下几部分： 1. `index.html` - 游戏的主页面，包含HTML结构和引入的JavaScript/CSS资源。 2. `css/styles.css` - 游戏的样式表...
原生js网页版贪吃蛇游戏代码
11-07
原生js网页版贪吃蛇游戏代码
html贪吃蛇源码
10-05
html,js缩所写的贪吃蛇，源码简介清晰你可以，根据所写的注释读
基于H5的贪吃蛇
05-16
基于html5的贪吃蛇游戏，文件压缩包含有代码和图片资源，解压压缩包用浏览器打开HTML文件就可以开始游戏。
贪吃蛇游戏网页版
06-08
贪吃蛇游戏网页版源码，双击可直接运行，演示地址http://glklkl.top/snake_game.html
一个网页贪吃蛇代码
m0_57236802的博客
07-08 803
此代码在一个网页上创建了一个400像素宽高的方形画布，并在其上运行一个简单的贪吃蛇游戏。蛇的身体每个部分是一个20像素的正方形，蛇每次移动都会前进一格。你可以用箭头键来控制蛇的移动。蛇每吃掉一个食物，得分就会增加，然后食物就会在一个新的位置再次出现。
HTML5+JavaScript贪吃蛇游戏代码
洛谷小蒟蒻
02-16 491
【代码】HTML5+JavaScript贪吃蛇游戏代码。
贪吃蛇游戏代码html5,html5 贪吃蛇源码(直接可以运行)
weixin_42320061的博客
05-31 959
【实例简介】自定义 蛇的图片和食物的图片大小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...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值