基于HTML5+bootstrap实现类似贪吃蛇游戏

最新推荐文章于 2023-04-02 23:29:43 发布
最新推荐文章于 2023-04-02 23:29:43 发布
阅读量1.3k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengzixiang666/article/details/56671451
版权

直接看源码吧：




<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<!-- bootStrap CSS -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css"/>
<!-- JS -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div style="margin-left: 140px;">
 <button type="button" class="btn btn-primary"
     data-toggle="button" οnclick="start();"> 开始
 </button>
 <button type="button" class="btn btn-primary"
     data-toggle="button" οnclick="startEnd();"> 暂停
 </button>
</div>
<div>
<canvas id="myCanvas" width="400" height="600" style="border:5px solid red;">
</canvas>
</div> 
<script type="text/javascript">
//获得画布的对象
var c=document.getElementById("myCanvas");
//表示2维空间
var ctx=c.getContext("2d");
//格子的宽度初始化为10像素
var gridWidth=20;
//定义食物，将多个食物存放在数组中
var foots=new Array();
//定义蛇，多条蛇
var snacks=new Array();
//定义是否移动
var sfmove=true;
//定义初始化方法
function Init(x,y,w){
 var t=this;
 t.x=x;
 t.y=y;
 t.w=w;
 //初始化食物的方法
 t.footInit=function(){
   ctx.fillStyle='red';
   ctx.strokeStyle='white';
   ctx.fillRect(x,y,w,w);
   ctx.strokeRect(x,y,w,w);
 };
 //初始化蛇
 t.snackInit=function(){
  ctx.fillStyle='black';
  ctx.strokeStyle='white';
  ctx.fillRect(x,y,w,w);
  ctx.strokeRect(x,y,w,w);
 };
 //清除蛇尾
 t.clear=function(){
  ctx.fillStyle='white';
  ctx.strokeStyle='white';
  ctx.fillRect(x,y,w,w);
  ctx.strokeRect(x,y,w,w);
 };
 //检查碰撞
 t.check=function(note){
  if(this.x==note.x && this.y==note.y){
   //碰撞了返回true;
   return true;
  }else{
   return false;
  }
 };
 //清除食物
 t.clearFoot=function(){
  ctx.fillStyle='black';
  ctx.strokeStyle='white';
  ctx.fillRect(x,y,w,w);
  ctx.strokeRect(x,y,w,w);
  
 };
 //画游戏结束
 t.gameOver=function(){
  ctx.font="30px Arial";
  ctx.strokeText("GameOver!",x,y);
 };
}
//产生食物的方法
function createFoot(){
 var t=this;
 //设置画布
 
 //随机产生事物
 t.addFont=function(x,y){
  var x=(parseInt(c.width*Math.random())%10)*(c.width/gridWidth)*2;
  var y=(parseInt(c.height*Math.random())%10)*(c.height/gridWidth)*2;
  var foot=new Init(x,y,gridWidth);
  foot.footInit();
  foots.push(foot);
 };
}
//画蛇的方法
function createSnack(){
 var t=this;
 //初始化方法
 t.dir='R';
 //随机产生一条蛇的方法
 t.addSnack=function(){
  var x=(parseInt(c.width*Math.random())%10)*(c.width/gridWidth)*2;
  var y=(parseInt(c.height*Math.random())%10)*(c.height/gridWidth)*2;
  var snack=new Init(x,y,gridWidth);
  snack.snackInit();
  snacks.push(snack);
  
 };
 
//  键盘监听
 document.οnkeydοwn=function(e){
  var code=e.keyCode;
  t.odir=t.dir;
  switch(code){
   case 37:
    t.dir='L';
    break;
   case 38:
    t.dir='U';
    break;
   case 39:
    t.dir='R';
    break;
   case 40:
    t.dir='D';
    break;
  }
  if(sfmove){
   t.move();
  }
  
 };
 var fals=true;
 //移动蛇
 t.move=function(){
//   t.snackSnack(t.dir);
//   var l=snacks.length;
//   alert(l);
  var newHead='';
  if(!fals){
   return;
  }
  //不能让蛇头超越框中
  if(t.dir=='R'){
   if(snacks[0].x+2*snacks[0].w>c.width){
    end();
    fals=false;
   }
   newHead=new Init(snacks[0].x+gridWidth,snacks[0].y,gridWidth);
   
  }
  if(t.dir=='U'){
   if(snacks[0].y-snacks[0].w<0){
    end();
    fals=false;
   }
   newHead=new Init(snacks[0].x,snacks[0].y-gridWidth,gridWidth);
   
  }
  if(t.dir=='L'){
   if(snacks[0].x-snacks[0].w<0){
    end();
    fals=false;
   }
   newHead=new Init(snacks[0].x-gridWidth,snacks[0].y,gridWidth);
  }
  if(t.dir=='D'){
   if(snacks[0].y+2*snacks[0].w>c.height){
    end();
    fals=false;
   }
   newHead=new Init(snacks[0].x,snacks[0].y+gridWidth,gridWidth);
  }
  
  //画蛇头
  newHead.snackInit();
  //将蛇头追加到数组中
  snacks.unshift(newHead);
  //静止反向跑
  if(newHead.x==snacks[1].x && newHead.y==snacks[1].y){
   t.dir=t.odir;
   return;
  }
  //清除掉蛇尾
  snacks[snacks.length-1].clear();
  snacks.pop();
  t.addSnackFoot(t.dir);
  
  
 };
 //增加蛇尾的方法
 t.addSnackFoot=function(dir){
  var fork=false;
  var fal=false;
  for(var j=0;j<snacks.length;j++){
   for(var i=0;i<foots.length;i++){
    if(foots[i]!=null){
     fal= foots[i].check(snacks[0]);
      if(fal){
       var snackfoot='';
       //如何蛇与食物碰撞了则增加蛇的长度
       if(snacks.length<2){
        if(dir=='R'){
         snackfoot=new Init(snacks[j].x-snacks.length*gridWidth,snacks[0].y,gridWidth);
        }
        if(dir=='L'){
         snackfoot=new Init(snacks[j].x+snacks.length*gridWidth,snacks[0].y,gridWidth);
        }
        if(dir=='U'){
         snackfoot=new Init(snacks[j].x,snacks[0].y+snacks.length*gridWidth,gridWidth);
        }
        if(dir=='D'){
         snackfoot=new Init(snacks[j].x,snacks[0].y-snacks.length*gridWidth,gridWidth);
        }
       }else{
        if(snacks[snacks.length-1].x<snacks[0].x){
         if(snacks[snacks.length-2].y==snacks[snacks.length-1].y){
          if(snacks[snacks.length-2].x>snacks[snacks.length-1].x){
           snackfoot=new Init(snacks[snacks.length-1].x-gridWidth,snacks[snacks.length-1].y,gridWidth);
          }
          if(snacks[snacks.length-2].x<snacks[snacks.length-1].x){
           snackfoot=new Init(snacks[snacks.length-1].x+gridWidth,snacks[snacks.length-1].y,gridWidth);
          }
         }
         if(snacks[snacks.length-2].y>snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[snacks.length-1].x,snacks[snacks.length-1].y-gridWidth,gridWidth);
         }
         if(snacks[snacks.length-2].y<snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[snacks.length-1].x,snacks[snacks.length-1].y+gridWidth,gridWidth);
         }
         
        }
        if(snacks[snacks.length-1].x>snacks[0].x){
         if(snacks[snacks.length-2].y==snacks[snacks.length-1].y){
          if(snacks[snacks.length-2].x>snacks[snacks.length-1].x){
           snackfoot=new Init(snacks[snacks.length-1].x-gridWidth,snacks[snacks.length-1].y,gridWidth);
          }
          if(snacks[snacks.length-2].x<snacks[snacks.length-1].x){
           snackfoot=new Init(snacks[snacks.length-1].x+gridWidth,snacks[snacks.length-1].y,gridWidth);
          }
         }
         if(snacks[snacks.length-2].y>snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[snacks.length-1].x,snacks[snacks.length-1].y-gridWidth,gridWidth);
         }
         if(snacks[snacks.length-2].y<snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[snacks.length-1].x,snacks[snacks.length-1].y+gridWidth,gridWidth);
         }
        }
        if(snacks[snacks.length-1].x==snacks[0].x && snacks[snacks.length-1].y>snacks[0].y){
         if(snacks[snacks.length-2].y>snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[0].x,snacks[snacks.length-1].y-gridWidth,gridWidth);
         }
         if(snacks[snacks.length-2].y<snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[0].x,snacks[snacks.length-1].y+gridWidth,gridWidth);
         }
         if(snacks[snacks.length-2].y==snacks[snacks.length-1].y ){
          snackfoot=new Init(snacks[0].x,snacks[snacks.length-1].y+gridWidth,gridWidth);
//           if(snacks[snacks.length-2].x>snacks[snacks.length-1].x){
//            snackfoot=new Init(snacks[0].x-gridWidth,snacks[snacks.length-1].y,gridWidth);
//           }
//           if(snacks[snacks.length-2].x<snacks[snacks.length-1].x){
//            snackfoot=new Init(snacks[0].x+gridWidth,snacks[snacks.length-1].y,gridWidth);
//           }
         }
         
        }
        if(snacks[snacks.length-1].x==snacks[0].x && snacks[snacks.length-1].y<snacks[0].y){
         if(snacks[snacks.length-2].y>snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[0].x,snacks[snacks.length-1].y-gridWidth,gridWidth);
         }
         if(snacks[snacks.length-2].y<snacks[snacks.length-1].y){
          snackfoot=new Init(snacks[0].x,snacks[snacks.length-1].y+gridWidth,gridWidth);
         }
         if(snacks[snacks.length-2].y==snacks[snacks.length-1].y ){
          snackfoot=new Init(snacks[0].x,snacks[snacks.length-1].y-gridWidth,gridWidth);
//           if(snacks[snacks.length-2].x>snacks[snacks.length-1].x){
//            snackfoot=new Init(snacks[0].x-gridWidth,snacks[snacks.length-1].y,gridWidth);
//           }
//           if(snacks[snacks.length-2].x<snacks[snacks.length-1].x){
//            snackfoot=new Init(snacks[0].x+gridWidth,snacks[snacks.length-1].y,gridWidth);
//           }
         }
        }
       }
       snackfoot.snackInit();
       snacks.push(snackfoot);
       fork=true;
       fal=false;
       
      }
    }
    if(fork){
     break;
    }
   }
   if(fork){
    break;
   }
  }
 };
 var dirs='';
 //如何蛇自己与自己碰撞了则减少一个长度
 t.snackSnack=function(dir){
  var xdir=dir;
  var ydir=dirs;
  dirs=dir;
  if((xdir=='R' && ydir=='L')||(xdir=='L' && ydir=='R')){
   end();
  }
  if((xdir=='U' && ydir=='D')||(xdir=='D' && ydir=='U')){
   end();
  }
 };
}
var time="";
//游戏开始的方法
function start(){
 //初始画布
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
  ctx.fillStyle='white';
  ctx.strokeStyle='red';
  ctx.fillRect(0,0,c.width,c.height);
  ctx.fillRect(0,0,c.width,c.height);
 
  sfmove=true;
  if(foots.length>=1){
   for(var i=0;i<foots.length;i++){
    foots[i].footInit();
   }
  }
   if(snacks.length>=1){
    for(var i=0;i<snacks.length;i++){
     snacks[i].snackInit();
    }
    
   }
  if(snacks.length<1){
   var snack=new createSnack();
   snack.addSnack();
  }
  
  
 var create=new createFoot();
//  create.addFont();
 time=window.setInterval(create.addFont, 5000);
 
}
//游戏结束的方法
function end(){
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.font='bold 50px arial';
 ctx.fillStyle='red';
 ctx.fillText('GameOver!',50,200);
 foots=[];
 snacks=[];
 window.clearInterval(time);
}
//游戏暂停
function startEnd(){
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.font='bold 50px arial';
 ctx.fillStyle='red';
 ctx.fillText('游戏暂停!',50,200);
 window.clearInterval(time);
 sfmove=false;
//  snacks.clear();
}
</script>
</body>
</html>


zhengzixiang666
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript
专注于dreamweaver网页设计制作
08-08 407
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
关于bootstrap之类好用的框架。
weixin_30521649的博客
10-13 94
朋友们都知道，有了框架码起代码来很是迅速，只要导入css和js之后的事情就很简单了。 新学的时候也是很喜欢，经常用框架来搭建网站，不得不说很迅速。 时间一久便发现，我连简单的导航栏都不知道写了，不是说静态而是说效果。 我连切换都不知道如何写了，比起之前真的是差太多了。 都说代码越写越上手，而我正好相反。 毕竟js，jq两支用的都不是很溜。 框架虽好，建议在熟练的情况下（这里的熟练是指精...
前端除了bootstrap还有和它类似的几个推荐
gztrljh
11-29 1723
首先要明白bootstrap，你可以只用它的css来进行开发， js部分是赠送的。因为依赖于jquery(bootstrap5已经移除，这是因为现在浏览器的发展，ie已经渐渐被淘汰，api越来越统一) 除了bootstrap 我个人还非常喜欢的几个 非常受欢迎的几个强大css库 https://materializecss.com/ https://get.foundation/sites/docs/ https://www.purecss.cn/ 其它推荐 https://www.mockplus.
bootstrap项目实例_Vue.js 项目实践——创建记忆卡片游戏
weixin_39744240的博客
10-27 562
作者：Jiawei Pan转发链接：https://mp.weixin.qq.com/s/VXPD2p7q2S3yR9I7lzAkfw前言如果你刚开始学习 Vue，想巩固基础知识，那么你可以试试通过这个有趣的练习来创建一个好玩的游戏。在这篇文章中，我将逐步教你用 Vue.js 创建一个记忆卡片游戏。这篇文章会介绍以下知识点：- 使用 v-for 命令循环遍历一个数组对象- 使用 v-bind 指令...
基于Bootstrap贪吃蛇游戏代码
06-24
基于Bootstrap贪吃蛇游戏代码是一款简单的原生js面向对象的贪吃蛇小游戏源代码下载。
基于springboot+Bootstrap实现的会员管理系统源码.zip
最新发布
03-04
基于springboot+Bootstrap实现的会员管理系统源码.zip基于springboot+Bootstrap实现的会员管理系统源码.zip基于springboot+Bootstrap实现的会员管理系统源码.zip基于springboot+Bootstrap实现的会员管理系统源码.zip...
基于html5+css3+bootstrap框架.zip
02-12
html5开发
基于SpringMVC+html5+BootStrap的图书销售智能推荐系统.zip
06-29
(5)销量统计模块 此模块主要是针对卖家统计图书的销量信息，入账金额统计，使得交易数字化，从而更好地管理图书，尽可能的为买家提供服务的同时自我更新。 (6)公告/优惠信息模块 卖家：主要通过系统发布两种信息，第...
基于 HTML5 + CSS3 + JavaScript + jQuery + Bootstrap.zip
02-12
html5开发
一个基于HTML5+css+bootstrap的前端设计实例
06-01
内含多个页面，BGM，登录界面和链接跳转等等，每个按钮都有内容
bootstrap实现的界面，很美观其中自带bootstrap的开发文档
08-16
很好的html模板，用到了国外大火的bootstrap技术，适合初学者去增进您的技术，特别是他自带的开发文档是很优雅的
Bootstrap贪吃蛇游戏代码
05-01
Bootstrap贪吃蛇游戏代码基于Bootstrap3.3.4制作，有慢速、中速、快速模式，开始游戏、暂停游戏、继续游戏。
基于Bootstrap支持移动端的响应式轮播图效果
07-06
基于Bootstrap支持移动端的响应式轮播图效果
贪吃蛇大作战demo实现和代码
11-23
基于cocos2dx 和c++实现的类似贪吃蛇大作战的游戏demo
bootstrap/HTML5
12-31
Bootstrap做的后台管理界面
web课程设计网页规划与设计 html+css+javascript+jquery+bootstarp响应式游戏网站Bootstrap模板(24页)
qq_38518191的博客
04-02 382
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
html游戏是什么意思,HTML5究竟是个什么鬼？
weixin_29304713的博客
06-03 2063
导语：即使他们只做了一张很廉价的“活动邀请函”页面，用户也觉得好棒好厉害。当我还在南方小岛上玩儿的时候，一个朋友给我发了条语音信息(早上发的，我晚上才听，我让你发语音)大概是说，能不能帮忙联系一个会HTML5的团队，领导要求做一个HTML5的活动页面。看来HTML5的浪潮又要让我们的广告客户浑身湿透了。他们想要华丽的页面，想要让用户觉得他们很酷。事实上，即使他们只做了一张很廉价的“活动邀请函”页面...
10个可以替代Bootstrap的前端框架
盏茶作酒的博客
04-14 6203
10个可以替代Bootstrap的前端框架 2015.09.21 15:1012846浏览 Bootstrap是最受前端开发者欢迎的框架之一，虽然它的功能很强大，但是如果是做一些小型网站的话，会有很多用不到的功能，这时可以用一些其他框架来替代Bootstrap。现在有很多的前段框架，这里为你整理了10个最佳的可以替代Bootstrap的框架，你在建立简单的、小规模的网站的时候可以考虑使用这些框架。 1.Pure 一个小型的、你可以在任何WEB项目中使用的响应式前段框架。 2.Mueller...
jquery+bootstrap+html5 源码
09-03
HTML5是最新的HTML标准，引入了许多新的特性和功能，使得在网页上实现丰富多样的内容和交互效果变得更加容易。HTML5提供了新的标签和API，例如video和audio标签可以直接在网页上播放视频和音频，canvas标签可以实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值