位置: IT常识 - 正文

HTML实现简单的贪吃蛇小游戏(附完整源码)(html怎么做)

编辑:rootadmin
HTML实现简单的贪吃蛇小游戏(附完整源码)  基于HTML5技术的贪吃蛇小游戏的设计与实现项目简介:

推荐整理分享HTML实现简单的贪吃蛇小游戏(附完整源码)(html怎么做),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html语言简单,html怎么设计,简易html,html简单制作,简易html,html简单例子,用html,html简单例子,内容如对您有帮助,希望把文章链接给更多的朋友!

        贪吃蛇作为我们儿时经典的游戏之一,它是一款单机而又好玩的小游戏。今天,就让我们用html5技术实现一个简单的贪吃蛇小游戏!

项目核心技术:

        html5的canvas+JS技术

操作步骤:

        游戏玩家通过操作键盘的方向键(上下左右键)来控制小蛇的方向,使小蛇吃到红色的食物,然后促使小蛇长大。并且,如果得到的分数在不断上涨,游戏的难度也会不断的上升(小蛇的移动速度会越来越快)。如果小蛇头部撞到墙壁或小蛇自己的身体,就会判定游戏失败。

实现效果图:(不会动态图,将就着看!)HTML实现简单的贪吃蛇小游戏(附完整源码)(html怎么做)

复制以下全部代码,可直接查看效果!!!实现代码如下:

本项目代码一共分为两个部分:HTML+JS两部分。具体代码如下:

HTML代码:<!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"><html><head><meta charset="utf-8"><title>html5贪吃蛇小游戏</title><script type="text/javascript" src="贪吃蛇.js"></script><script></script></head><body><h1>html5贪吃蛇小游戏</h1><div align="left" class="a">游戏规则:<br>1.初始分数为=0、初始速度为1!<br>2.操作蛇移动,使蛇可以吃到红色的食物!<br>3.每当我的分数每次达到100分时,当前速度就会提高一个等级!<br>4.最高速度为10.相信能力强的人可以达到最高速度!<br>5.当蛇的碰到墙体或者自己的身子的时候,会宣布游戏失败!<br></div><style>body{text-align: center;background-color: aqua;}#snake{margin-top: 20px;}.a{margin-top: 50px;margin-left: 680px;width: 600px;font-size: 20px;}</style><canvas id="snake" width="" height=""></canvas><h3 id="score">我的得分:0</h3><h3 id="speed">当前速度:1</h3><script>var snake = new Snake("snake","score","speed",36,36);snake.init();</script></body>js代码:var Snake = function(ele,scoreele,speedele,x,y){this.cellWidth = 15;//格子的大小this.ele = document.getElementById(ele);this.cxt = this.ele.getContext("2d");this.x=x;this.y=y;this.scoreele = document.getElementById(scoreele);this.speedele = document.getElementById(speedele);//生成canvas大小。边框。this.ele.width = this.cellWidth * this.x;this.ele.height = this.cellWidth * this.y;this.ele.style.border ="2px solid #000";this.changeDiretion();//绑定方向事件。}Snake.prototype = {init:function(){//初始化,重置。恢复js数据以及dom。this.direction = 1;//向右 2下 3左 4 上this.nextDirection = '';this.snakeArr = [[0,parseInt(this.y/2)],[1,parseInt(this.y/2)]];this.speed = 1;this.score = 0;this.cxt.fillStyle ='#fff';this.cxt.fillRect(0,0,this.cellWidth*this.x,this.cellWidth*this.y);this.scoreele.innerHTML="我的得分:0";this.speedele.innerHTML="当前速度:1";this.createCoolPoint();this.drawCell(this.coolPoint,2);this.drawSnake();this.setTimer();},getCellArea:function(pos){//返回一个格子左上角的像素坐标[32,666];return [(pos[0]-1)*this.cellWidth+1,(pos[1]-1)*this.cellWidth+1];},setTimer:function(){var speedArr = [180,160,140,120,100,80,60,40,20];var speed = this.speed;if(speed>8){speed = 8;}(function(theThis){var that = theThis;that.timer = setTimeout(function() {that.moveSnake();}, speedArr[speed]);})(this);},moveSnake:function(){//移动蛇的逻辑。数组处理。this.direction = this.nextDirection == ''?this.direction:this.nextDirection;//当前移动方向,和下一个移动方向。这样处理能避免一个bug.var direction = this.direction;var snakeArr = this.snakeArr;var snakeHead = snakeArr[snakeArr.length-1];switch(direction){case 1 ://向右snakeHead = [snakeHead[0]+1,snakeHead[1]];break;case 2 ://向下snakeHead = [snakeHead[0],snakeHead[1]+1];break;case 3 ://向左snakeHead = [snakeHead[0]-1,snakeHead[1]];break;case 4 ://向上snakeHead = [snakeHead[0],snakeHead[1]-1];break;}//超界,或撞上自己。结束,重置。if(in_array(snakeHead,snakeArr) || snakeHead[0]<0 || snakeHead[0]>this.x || snakeHead[1]<0 || snakeHead[1]>this.y){window.clearInterval(this.timer);alert('虽然失败了,不过没关系,还可以再来一局!本局得分:'+this.score);this.init();return;} snakeArr.push(snakeHead);//将蛇头放入数组 this.drawCell(snakeHead,1); if(snakeHead.toString() != this.coolPoint.toString()){var tail = snakeArr.shift();//移除蛇尾。this.drawCell(tail,0);}else{//撞到coolPointthis.createCoolPoint();this.drawCell(this.coolPoint,2);this.score = this.score + 10;this.scoreele.innerHTML="我的得分:"+this.score;this.speed = Math.ceil((this.score + 1)/100);this.speedele.innerHTML="当前速度:"+this.speed;}this.setTimer();},createCoolPoint:function(){//随机生成coolPoint,不在代表snakeArr的数组中。do{this.coolPoint = [getRandom(this.x),getRandom(this.y)];}while(in_array(this.coolPoint,this.snakeArr));},changeDiretion:function(){//更换移动方向。下一步的移动方向。var that = this;document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];var direction = that.direction;var keyCode = e.keyCode;switch(keyCode){case 39://右if(direction!=1 && direction !=3){that.nextDirection = 1;}break;case 40://下if(direction!=2 && direction !=4){that.nextDirection = 2;}break;case 37://左if(direction!=1 && direction !=3){that.nextDirection = 3;}break;case 38://上if(direction!=2 && direction !=4){that.nextDirection = 4;}break;default:break;}}; },drawSnake:function(){//绘制初始小蛇。var snakeArr = this.snakeArr;for (var i = 0,sLen=snakeArr.length; i < sLen; i++) {this.drawCell(snakeArr[i],1);};},drawCell:function(pos,type){//绘制会用到的几种颜色的图。var colorArr = ['#fff','rgb(0, 0, 0)',"red"];var cxt = this.cxt;var area;cxt.fillStyle = colorArr[type];area = this.getCellArea(pos);cxt.fillRect(area[0],area[1],this.cellWidth-1,this.cellWidth-1);}}function moveClock() { moveSnake(head.d);}var isMove = false;function beginGame() { !isMove && setInterval(moveClock, 300); isMove = true;}//生成随机正整数 1到n之间。function getRandom(n){return Math.floor(Math.random()*n+1)}//判断一个数组是否在另一个数组中。注意toString()function in_array(stringToSearch, arrayToSearch) {for (s = 0; s < arrayToSearch.length; s++) {thisEntry = arrayToSearch[s].toString();if (thisEntry == stringToSearch.toString()) {return true;}}return false;}

想直接下载代码的,请点击以下链接进入下载:

不会内卷/贪吃蛇小游戏 - 码云 - 开源中国 (gitee.com)

点击贪吃蛇项目代码即可看到相关的所有文件代码!

观看完了,麻烦给个点赞+收藏!!!

谢谢!!!

如果有更好的建议,可以私信或者在评论区留言一起讨论!!!

本文链接地址:https://www.jiuchutong.com/zhishi/290183.html 转载请保留说明!

上一篇:第十四届蓝桥杯第三期模拟赛 C/C++ B组 原题与详解(第十四届蓝桥杯大赛官网)

下一篇:古罗马广场,意大利 (© Peter Zelei Images/Getty Images)(古罗马广场意大利)

  • vivox50是双卡双待的吗(vivo双卡双待吗)

    vivox50是双卡双待的吗(vivo双卡双待吗)

  • hdm2没信号是什么意思(hdm1无信号)

    hdm2没信号是什么意思(hdm1无信号)

  • 手机视频看不到对方是怎么回事(手机视频看不到自己的头像怎么办)

    手机视频看不到对方是怎么回事(手机视频看不到自己的头像怎么办)

  • 快手7天无理由退货规则(快手7天无理由退货运费谁出)

    快手7天无理由退货规则(快手7天无理由退货运费谁出)

  • 京东历史订单保存多久(京东历史订单能保存几年)

    京东历史订单保存多久(京东历史订单能保存几年)

  • 苹果nn开头是什么版本(苹果机n开头)

    苹果nn开头是什么版本(苹果机n开头)

  • 电脑激活与不激活区别(电脑激活与不激活有啥区别)

    电脑激活与不激活区别(电脑激活与不激活有啥区别)

  • 苹果x插上耳机不能用(苹果X插上耳机没声音)

    苹果x插上耳机不能用(苹果X插上耳机没声音)

  • 淘宝是什么模式(淘宝是什么模式电商平台)

    淘宝是什么模式(淘宝是什么模式电商平台)

  • 腾讯视频qq会员怎么共用(腾讯视频qq会员怎么分享给别人用)

    腾讯视频qq会员怎么共用(腾讯视频qq会员怎么分享给别人用)

  • 耳机模式在哪里设置(苹果手机耳机模式在哪里)

    耳机模式在哪里设置(苹果手机耳机模式在哪里)

  • qq回执消息有什么用(qq回执成功后就能登qq了吗)

    qq回执消息有什么用(qq回执成功后就能登qq了吗)

  • 安卓手机充电口类型(安卓手机充电口修一下多少钱)

    安卓手机充电口类型(安卓手机充电口修一下多少钱)

  • 苹果密码输入多次被锁怎么办(苹果密码输入多次停用时间)

    苹果密码输入多次被锁怎么办(苹果密码输入多次停用时间)

  • ipada1822是air2吗(ipada1822是ipad5吗)

    ipada1822是air2吗(ipada1822是ipad5吗)

  • word怎么取消标记底色(word怎么取消标题设置)

    word怎么取消标记底色(word怎么取消标题设置)

  • oppoa11x怎么恢复微信聊天记录(oppoa11x怎么恢复出厂设置)

    oppoa11x怎么恢复微信聊天记录(oppoa11x怎么恢复出厂设置)

  • 手机位置信息有什么用(搜索手机位置)

    手机位置信息有什么用(搜索手机位置)

  • 不是黄钻怎么看被挡访客(不是黄钻怎么看隐身)

    不是黄钻怎么看被挡访客(不是黄钻怎么看隐身)

  • 荣耀play游戏助手卸载了怎么办(荣耀play的游戏助手是自动开启的吗)

    荣耀play游戏助手卸载了怎么办(荣耀play的游戏助手是自动开启的吗)

  • 全民k歌怎么创建歌房(全民k歌怎么创建合唱歌房)

    全民k歌怎么创建歌房(全民k歌怎么创建合唱歌房)

  • 荣耀8x屏幕上小圆圈怎么消掉(荣耀8x有个小圆圈怎么去掉)

    荣耀8x屏幕上小圆圈怎么消掉(荣耀8x有个小圆圈怎么去掉)

  • 嘀嗒出行如何邀请车主(嘀嗒出行如何邀请新乘客)

    嘀嗒出行如何邀请车主(嘀嗒出行如何邀请新乘客)

  • win10右键显示设置打不开怎么办解决教程(win10右键显示设置打不开怎么办)

    win10右键显示设置打不开怎么办解决教程(win10右键显示设置打不开怎么办)

  • Win11如何选择播放声音的位置 Win11选择播放声音位置的方法(win11自带的播放器)

    Win11如何选择播放声音的位置 Win11选择播放声音位置的方法(win11自带的播放器)

  • phpcms采集不到网址怎么办(php采集器)

    phpcms采集不到网址怎么办(php采集器)

  • 进口商品需要缴纳VAT税吗
  • 安装服务费税率是多少
  • 企业所得税报税日期
  • 研发费用长期是否可控
  • 合伙企业个人所得税怎么申报
  • 外商投资企业清算审计报告
  • 行政单位办公室主任必须是党员吗
  • 计提固定资产减值准备属于什么支出
  • 发放年终奖计提需要调减利润吗
  • 劳务分包有执照没资质能开票吗?
  • 科技研发政策
  • 装饰工程收入属于劳务收入吗
  • 小规模升一般纳税人开票超过500万
  • 购买材料未付款怎么做账
  • 对方开增值税普通发票,我方需要做什么呢?
  • 收到不开票的返利如何记账?
  • 外包的人力费用包括哪些
  • 敏感资产额怎么算
  • 现金为负数时怎么做账
  • 广告公司怎么结转成本
  • 应付职工薪酬科目的应用
  • 公司收到银行存款利息收入会计分录
  • 代理报关的报关单发货人
  • 贷款利息不能抵扣进项税
  • PHP:rawurlencode()的用法_url函数
  • 如何计算旧城拆迁面积
  • 低值易耗品的三级科目有哪些
  • 购销合同印花税计算方法
  • 将资本公积转为实收资本什么变了
  • php设计网页
  • 前端es6是什么意思
  • 其他应付款转入管理费用
  • 文心一言 VS ChatGPT
  • session用处
  • jedis命令
  • 计提支付公积金
  • 收入少收钱账务处理
  • sqlserver2008分页查询
  • python文件可分为哪几类
  • 企业股东变更流程及费用
  • 存货的计税基础公式
  • 发票的类型分为哪几类
  • 所得税汇算清缴退税会计分录怎么做
  • 实际购入成本包括增值税吗
  • 商誉的会计核算怎么核算
  • 高新技术企业亏损弥补的年限为十年
  • 税前减免
  • 资产减值损失怎么计提
  • 代扣和代缴的区别
  • 一般纳税人销售旧货可以开专票吗
  • 预算收入包括增值税吗
  • 应收票据和应付票据可以对冲吗
  • 公司暂估成本分录
  • 预付押金是否可以退回
  • 应收账款转让会计分录 未实际收到对价
  • windows命令行修改密码
  • ubuntu安装kdevelop
  • 图片缩略图是什么意思
  • 在win7系统中如何用快捷键复制文件或文件夹
  • SFC无需光盘出马,硬盘搞定
  • jquery ajaxfileupload异步上传插件
  • css查找元素
  • c#openxml
  • js深拷贝的三种实现方式
  • 安卓安装两个不同版本软件
  • vue cli mock
  • js获取浏览器类型和版本信息
  • Unity3D Vuforia Android 相机调焦
  • unity gettype
  • Android使用HttpURLConnection和HttpClient请求服务器数据
  • python jose
  • 刮刮奖软件下载
  • 对于python程序,对代码缩进的要求非常严格
  • 广西国家税务局官网
  • 四川国税局普通发票查询?
  • 被标记为广告推销的电话能接吗
  • 限售股转让如何交税
  • 辛嵨静志
  • 江西省国税局全称
  • 领完发票后 怎么读取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设