计算机科学导论课结课的时候写的HTML贪吃蛇

最新推荐文章于 2024-07-11 16:52:21 发布
最新推荐文章于 2024-07-11 16:52:21 发布
阅读量103 收藏
点赞数
文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fcb_x/article/details/120688337
版权

徐老师搭的那个小图床不稳定。

<html>
    <head>
        <meta charset="utf-8">
        <title>贪吃蛇</title>
        <style>
            #canvas{border: 4px blue}
        </style>
    </head>
    <body>
        <div align='center'>
            <h1>贪吃蛇</h1>
            <canvas id="canvas" width="400" height="400"></canvas>   
            <img id="apple" src="1.jpg" hidden="true">     
            <img id="banana" src="2.jpg" hidden="true">
            <img id="watermelon" src="3.jpg" hidden="true">
            <img id="boom" src="4.webp" hidden="true">
            <Audio id="music"src="1.flac" hidden="true" loop="true" autostart="true" ></Audio>
            <script>
                var IMG1=document.getElementById("apple");
                var IMG2=document.getElementById("banana");
                var IMG3=document.getElementById("watermelon")
                var canvas=document.getElementById("canvas");
                var picture=canvas.getContext("2d")
                var SNAKE= new Array();
                var FOOD= new Array();
                var NEED_FOOD= new Array();
                var Basiclen=20,Score=0,ret;
                var NEED_INTERVAL,FOOD_INTERVAL,SNAKE_INTERVAL,GG_Timeout;
                function BasicNode(x,y,len){
                    var t=this;
                    t.x=x;
                    t.y=y;
                    t.len=len;
                    t.sum=1;
                    t.FOOD=function(){
                        if(Math.random()<0.5)
                            picture.drawImage(IMG1,x,y,len,len);
                        else{
                            t.sum=2;
                            picture.drawImage(IMG2,x,y,len,len);    
                        } 
                    }
                    t.NEED_FOOD=function(){
                        picture.drawImage(IMG3,x,y,len,len);
                    }
                    t.SNAKE_IN=function(){
                        picture.fillStyle='white';
                        picture.fillRect(x,y,len,len);
                        picture.beginPath();
                        picture.strokeStyle='black';
                        picture.arc(x+10,y+10,9,0,Math.PI*2,false);
                        picture.stroke();   
                    }
                    t.SNAKE_HEAD_IN=function(){
                        picture.fillStyle='white';
                        picture.fillRect(x,y,len,len);
                        picture.beginPath();
                        picture.strokeStyle='red';
                        picture.arc(x+10,y+10,9,0,Math.PI*2,false);
                        picture.stroke();                     
                    }
                    t.SNAKE_OUT=function(){
                        picture.fillStyle='white';
                        picture.strokeStyle='white';
                        picture.fillRect(x,y,len,len);
                        picture.strokeRect(x,y,len,len);
                        picture.strokeStyle='red';
                        picture.strokeRect(0,0,400,400);                    
                    }
                    t.equal=function(tmp){return (this.x==tmp.x)&&(this.y==tmp.y);}
                }
                //            
                function DX(x){return ((x>-20)&&(x<400))?x:((x==-20)?380:0)}
                function DY(y){return ((y>-20)&&(y<400))?y:((y==-20)?380:0)}
                //
                function GGcheck(){if(NEED_FOOD.length)gameover();}
                function GGreport(){
                    ret--;
                    var pos=document.getElementById("Limit");
                    pos.innerHTML="请在"+ret+"s内吃掉西瓜";
                    GG_Timeout=setTimeout(GGreport,1000);
                }
                function CanvasNode(){//for a 400*400 canvas with 20*20 Nodes on it
                    var t=this;
                    picture.fillStyle='white';
                    picture.strokeStyle='red';
                    picture.fillRect(0,0,400,400);
                    picture.strokeRect(0,0,400,400);
                    t.ADDFOOD=function(){
                        var dx=Math.floor(20*Math.random())*20;
                        var dy=Math.floor(20*Math.random())*20;
                        var now=new BasicNode(dx,dy,Basiclen);
                        //console.log(dx,dy);
                        for(var i=0;i<SNAKE.length;i++){if(SNAKE[i].equal(now))return false;}
                        now.FOOD();
                        FOOD.push(now);
                        return true;
                    }
                    t.ADD_NEED_FOOD=function(){
                        var dx=Math.floor(20*Math.random())*20;
                        var dy=Math.floor(20*Math.random())*20;
                        var now=new BasicNode(dx,dy,Basiclen);
                        //console.log(dx,dy);
                        for(var i=0;i<SNAKE.length;i++){if(SNAKE[i].equal(now))return false;}
                        now.NEED_FOOD();
                        NEED_FOOD.push(now);
                        ret=20;
                        GGreport();
                        setTimeout(GGcheck,20000);
                        return true;                    
                    }
                }

                function SnakeNode(x,y,INTERNAL_SPEEED){
                    var t=this;
                    t.x=x;
                    t.y=y;
                    t.Direction='R';
                    t.OriginalDirection='R';//Avoid a turn back order
                    //Get a len 5 snake at the very beginning
                    t.init=function(){
                        var dx=x,dy=y;
                        for(var i=1;i<=5;i++){
                            var nowNode=new BasicNode(dx,dy,Basiclen);
                            dx-=Basiclen;
                            (i==1)?nowNode.SNAKE_HEAD_IN():nowNode.SNAKE_IN();
                            SNAKE.push(nowNode);
                        }
                        SNAKE_INTERVAL=setInterval(t.move,INTERNAL_SPEEED);
                    }    
                    //keyboard                
                    document.onkeydown=function(now){
                        var type=now.keyCode;
                        t.OriginalDirection=t.Direction;
                        switch(type){
                            case 37:
                                t.Direction='L';
                            break;
                            case 38:
                                t.Direction='U';
                            break;
                            case 39:
                                t.Direction='R';
                            break;
                            case 40:
                                t.Direction='D';
                            break;
                        }
                    }
                    //SIGNIFICANT, the move of SNAKE
                    t.move=function(){
                        var NewNode;
                        switch(t.Direction){
                            case 'R':
                                NewNode=new BasicNode(DX(SNAKE[0].x+Basiclen),DY(SNAKE[0].y),Basiclen);
                            break;
                            case 'L':
                                NewNode=new BasicNode(DX(SNAKE[0].x-Basiclen),DY(SNAKE[0].y),Basiclen);
                            break;
                            case 'U':
                                NewNode=new BasicNode(DX(SNAKE[0].x),DY(SNAKE[0].y-Basiclen),Basiclen);
                            break;
                            case 'D':
                                NewNode=new BasicNode(DX(SNAKE[0].x),DY(SNAKE[0].y+Basiclen),Basiclen);
                            break;
                        }
                        if(SNAKE[1].equal(NewNode)){//a turn back order
                            t.Direction=t.OriginalDirection;
                            return;
                        }
                        NewNode.SNAKE_HEAD_IN();
                        SNAKE.unshift(NewNode);
                        SNAKE[1].SNAKE_IN();
                        SNAKE[SNAKE.length-1].SNAKE_OUT();
                        console.log(SNAKE[SNAKE.length-1].x,SNAKE[SNAKE.length-1].y);
                        SNAKE.pop();
                        //FOODEAT
                        for(var i=0;i<FOOD.length;i++){
                            if(FOOD[i].equal(NewNode)){
                                t.ADD();
                                clearInterval(SNAKE_INTERVAL);
                                SNAKE_INTERVAL=setInterval(t.move,Math.floor(INTERNAL_SPEEED/2));
                                Score+=FOOD[i].sum*10;
                                Score_PRINT();
                            }
                        }
                        for(var i=0;i<NEED_FOOD.length;i++){
                            if(NEED_FOOD[i].equal(NewNode)){
                                NEED_FOOD.splice(i,1);
                                Score+=50;
                                Score_PRINT();
                                clearTimeout(GG_Timeout);
                                var pos=document.getElementById("Limit");
                                pos.innerHTML="";
                            }
                        }
                        //DIE
                        for(var i=1;i<SNAKE.length;i++){
                            if(SNAKE[i].equal(NewNode)){
                                gameover();
                                return;
                            }
                        }
                        t.ADD=function(){
                            var tailNode1=SNAKE[SNAKE.length-1];
                            var tailNode2=SNAKE[SNAKE.length-2];
                            var ADDtail;
                            if(tailNode1.x==tailNode2.x){
                                if(tailNode1.y<tailNode2.y){
                                    ADDtail=new BasicNode(DX(tailNode1.x),DY(tailNode1.y-Basiclen));
                                }
                                else{
                                    ADDtail=new BasicNode(DX(tailNode1.x),DY(tailNode1.y+Basiclen));
                                }
                            }
                            else{
                                if(tailNode1.x<tailNode2.x){
                                    ADDtail=new BasicNode(DX(tailNode1.x-Basiclen),DY(tailNode1.y));
                                }
                                else{
                                    ADDtail=new BasicNode(DX(tailNode1.x+Basiclen),DY(tailNode1.y));
                                }
                            }
                            ADDtail.SNAKE_IN();
                            SNAKE.push(ADDtail);
                        }
                    }
                }                
                function gameover(){
                    clearInterval(SNAKE_INTERVAL);
                    clearInterval(FOOD_INTERVAL);//FOOD
                    clearInterval(NEED_INTERVAL);
                    clearTimeout(GG_Timeout);
                    alert("您的得分是 "+Score);
                }
                function Clear(){
                    clearInterval(SNAKE_INTERVAL);
                    clearInterval(FOOD_INTERVAL);//FOOD
                    clearInterval(NEED_INTERVAL);  
                    clearTimeout(GG_Timeout);
                    var pos=document.getElementById("Limit");
                    pos.innerHTML="";
                    SNAKE=[];
                    FOOD=[];
                    NEED_FOOD=[];
                    Score=0;
                    Restart();
                }
                function Start(){
                    playmusic();
                    Clear();           
                    var S=new SnakeNode(200,200,1000);
                    var C=new CanvasNode();
                    S.init();
                    FOOD_INTERVAL=setInterval(C.ADDFOOD,5000);
                    NEED_INTERVAL=setInterval(C.ADD_NEED_FOOD,40000);
                    Score_PRINT();
                }
                function Restart(){
                    picture.fillStyle='white';
                    picture.strokeStyle='red';
                    picture.fillRect(0,0,400,400);
                    picture.strokeRect(0,0,400,400);
                }
                function Score_PRINT(){
                    var pos=document.getElementById("Score");
                    pos.innerHTML="Score="+Score; 
                }
                function playmusic(){
                     var myAudio=document.getElementById("music");
                     myAudio.play();
                }
                Restart();
            </script>            
            <br>
            <input type="button" value="开始" onclick="Start()">
            <input type='button' value="结束" onclick="Clear()">
            <br> 
            <h3 id='Score'>Score</h3>
            <h3 id='Limit'></h3>
        </div>
    </body>    
</html>
LauZiyang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html实现贪吃蛇游戏思路,贪吃蛇游戏
weixin_28706541的博客
06-09 855
贪吃蛇作为一款经典游戏，获得了很多人的青睐，之所以能经久不衰，是因为贪吃蛇从游戏设计之始，就进行了全方位的考虑。不仅要做到有趣，更要做到设计美观，简洁大方。游戏设计要从布局，框架结构，按钮，贪吃蛇的行走方向，编程语言几个方面进行全面的考虑贪吃蛇，最主要的功能点：1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的，具体实现如下，简单实用就60行，感兴趣的朋友可以参考下哈，希望对大家有所...
[源码和报告分享]基于HTML5实现的贪吃蛇小游戏
11-29 492
1 游戏介绍 贪吃蛇的经典玩法有两种： 积分闯关 一吃到底 第一种是笔者小时候在掌上游戏机最先体验到的（不小心暴露了年龄），具体玩法是蛇吃完一定数量的食物后就通关，通关后速度会加快；第二种是诺基亚在1997年在其自家手机上安装的游戏，它的玩法是吃到没食物为止。笔者要实现的就是第二种玩法。 2 MVC设计模式 基于贪吃蛇的经典，笔者在实现它时也使用一种经...
html版贪吃蛇的项目计划书,html版贪吃蛇
weixin_34261380的博客
06-28 191
'; if(arr.indexOf(j)>=0) s+='\u25a0'; else if(j==food) s+='\u2605'; else s+=' '; } document.getElementById("box").innerHT...
贪吃蛇html课设报告,【java贪吃蛇实验报告】_java课程设计贪吃蛇源代码 报告
weixin_29663061的博客
06-30 613
评价(2) 举报(0) 添加专题已被下载116次简介: javase课程设计,贪吃蛇源代码,有实验报告.上学期自己写的课设感觉还不错,拿出来分享一下.游戏通过设置固定障碍物和随机障碍物来控制中级和高级,无障碍物为低级,另外可选是否允许穿墙,是否显示网格,是否极速模式.蛇身、蛇头及背景颜色都是可调的,但是没有保存功能,有需要的同学可以自己再加. [展开]javase课程设计,贪吃蛇源代码,有...
java 结课作业 贪吃蛇小程序
12-27
【标题解析】：“java 结课作业 贪吃蛇小程序”这一标题表明这是一个基于Java编程语言的结课作业，主题是实现一个贪吃蛇小游戏。贪吃蛇游戏是一款经典的计算机程序，通常要求开发者掌握基本的控制逻辑、图形界面设计...
html实现贪吃蛇游戏(源码)
11-01
html+js+css实现贪吃蛇游戏，酷炫的界面效果，点击开始游戏后，通过键盘的上下左右按键，操作移动方向，代码备注详细，一看就明白。 效果说明地址：...
用 js + html 实现贪吃蛇小游戏
05-31
使用 js + html 实现的贪吃蛇小游戏，使用canvas绘制图形，在一般的贪吃蛇游戏的规则基础上增加了障碍物，游戏可以选择简单、一般、困难三种模式，随着分数的增加可以提升等级，增加了游戏的趣味性，并且提供了游戏...
用html写的贪吃蛇游戏
03-02
用html写的贪吃蛇游戏
vc课运行的贪吃蛇程序，c写的
06-14
vc可以运行，如果你还在找vc能运行的c代码程序，那他是i最好的选择
HTML5小游戏贪吃蛇分析与实现
热门推荐
liusaint1992的专栏
01-13 1万+
HTML5小游戏贪吃蛇分析与实现。
贪吃蛇游戏html代码分析,科技常识：HTML5 贪吃蛇游戏实现思路及源代码
weixin_39928940的博客
05-31 556
科技常识：HTML5 贪吃蛇游戏实现思路及源代码2021-05-12 07:05:31•互联网今天小编跟大家讲解下有关HTML5 贪吃蛇游戏实现思路及源代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML5 贪吃蛇游戏实现思路及源代码 的相关资料，希望小伙伴们看了有所帮助。游戏操作说明 通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。 游戏具体实现 游戏难点...
HTML之贪吃蛇！！！
Z723731337的博客
10-15 115
闲了做的，没有暂停功能，后续可以加 <!doctype html> <head> <meta charset="utf-8"> <title>Test1</title> <style> #myCanvas { box-shadow: 0 0 6px #000; } #myCanvas{ border: 2px; } </style> </head> <body> <br/
HTML贪吃蛇怎么判断碰到蛇身,JavaScript实现的贪吃蛇算法及其研究(一)
weixin_29824417的博客
07-01 566
贪吃蛇游戏相信各位读者都玩过,本系列文章将解析贪吃蛇游戏的算法及其在JavaScript语言中的实现. 首先回忆一下我们玩过的贪吃蛇游戏,它是由三个部分组成的:蛇,食物,背景.其中背景在实际的算法中只起装饰性的作用,所以我将背景替代为另一个词”场景”,下面将这三个部分拆分开来讲解,逐个完成我们的贪吃蛇算法.场景要完成贪吃蛇游戏,首先要给贪吃蛇一个活动的空间,这个活动的空间,就是”场景”.贪吃蛇游戏...
html贪吃蛇游戏复杂,HTML贪吃蛇游戏，附重玩，加速，暂停，排行榜功能
weixin_35577004的博客
05-31 597
【实例简介】实训时做的个答辩网页游戏本项目是基于html、javascript、css而开发的一款上手简单的贪吃蛇游戏。【实例截图】【核心代码】var score = document.getElementById('score');var map = document.getElementById('map');// 获取地图路径var hangNumber = 20;var lieNumber...
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 547
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html5——列表、表格
jiuyuexixi的博客
07-10 726
html5——列表、表格
html5——表单
jiuyuexixi的博客
07-10 1109
html5——表单
html5——CSS基础选择器
最新发布
jiuyuexixi的博客
07-11 382
html5——CSS基础选择器
用htmljs写贪吃蛇
12-25
贪吃蛇是一个经典的小游戏，我们可以使用HTML和JavaScript来编写这个游戏。首先，我们需要创建一个空白的HTML页面，并在页面中添加一个Canvas元素用于绘制游戏画面。然后，我们可以使用JavaScript来编写游戏的逻辑...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值