开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 3092|回复: 12
收起左侧

[易源码分享] 简单网页小游戏 贪吃滑稽

[复制链接]
结帖率:85% (35/41)
发表于 2021-1-22 09:36:17 | 显示全部楼层 |阅读模式   山东省枣庄市
分享源码
界面截图:
是否带模块: 纯源码
备注说明: -
开局会有一个从左向右移动的 称为玩家,通过键盘的上下左右可以控制方向,每3秒会出现一个新的称为食物,当两个相遇的时候玩家会吃掉食物变大自己,如果碰到墙壁会重新开始恢复初始大小,很简单的一个小游戏,代码也比较少 对于新手来说有研究价值,通过超文本浏览框也可以嵌入到易语言中使用


有兴趣的可以继续完善




简单的介绍一下项目结构
00.png

img/0.jpg中是表情的图片  大家可以替换为自己喜欢的头像 名字和格式相同可以直接替换 否则需要改一下代码的引用

js/jquery.min.js   常用的js类库
index.html   主要页面和代码都在这

主要js代码如下  初始值大家可以根据需要更改

  1. var interval = null//定时器
  2.         var direction = 4;//上下左右/1234
  3.         var maxWidth = 500;//墙壁宽度
  4.         var maxHeight = 500;//墙壁高度
  5.         var width = 30;//初始宽度
  6.         var height = 30;//初始高度
  7.         var user = {width: 30,height: 30};//当前大小
  8.         var point = {left: 20,top: 20};//当前位置
  9.         var foodList = []//食物集合
  10.         var c = 0;//食物数量计数
  11.         $(function(){
  12.                 $(".top").css(user);//设置初始大小
  13.                 $(".top").css(point);//设置初始位置
  14.                 interval = setInterval(function(){
  15.                         controlDirection();
  16.                 },20);
  17.                 //3秒新增1个食物
  18.                 var interval2 = setInterval(function(){
  19.                         if(foodList.length < 10){//超过10个食物暂停
  20.                                 //取随机位置
  21.                                 var left = Math.floor(Math.random()*500);
  22.                                 if(left > 470){
  23.                                         left = 470;
  24.                                 }
  25.                                 var top = Math.floor(Math.random()*500);
  26.                                 if(top > 470){
  27.                                         top = 470;
  28.                                 }
  29.                                 c++;
  30.                                 $(".wall").append('<img src="img/0.jpg" class="top'+c+' food" style="left: '+left+'px;top: '+top+'px;" />');
  31.                                 foodList.push({left:left,top:top,n: c});
  32.                         }
  33.                 },500)
  34.         })
  35.        
  36.         //控制方向
  37.         function controlDirection(){
  38.                 if(direction == 1){//上
  39.                         point.top--;
  40.                         if(point.top >= maxHeight || point.top < 1){
  41.                                 gameOver();
  42.                         }
  43.                 }else if(direction == 2){//下
  44.                         point.top++;
  45.                         if(point.top >= maxHeight - 30 || point.top < 1){
  46.                                 gameOver();
  47.                         }
  48.                 }else if(direction == 3){//左
  49.                         point.left--;
  50.                         if(point.left >= maxHeight || point.left < 1){
  51.                                 gameOver();
  52.                         }
  53.                 }else if(direction == 4){//右
  54.                         point.left++;
  55.                         if(point.left >= maxHeight - 30 || point.left < 1){
  56.                                 gameOver();
  57.                         }
  58.                 }
  59.                 //判断食物位置
  60.                 for(var i=0;i<foodList.length;i++){
  61.                         var topn = 31;//自身范围
  62.                         if(foodList[i].top > point.top){
  63.                                 topn = foodList[i].top - point.top;
  64.                         }else{
  65.                                 topn = point.top - foodList[i].top;
  66.                         }
  67.                         var leftn = 31;//自身范围
  68.                         if(foodList[i].left > point.left){
  69.                                 leftn = foodList[i].left - point.left;
  70.                         }else{
  71.                                 leftn = point.left - foodList[i].left;
  72.                         }
  73.                         if(topn < 30 && leftn < 30){//相遇后吃掉食物
  74.                                 console.log("相遇");
  75.                                 $(".top" + foodList[i].n).remove();
  76.                                 foodList.splice(i, 1);
  77.                                 user.width += 5;
  78.                                 user.height += 5;
  79.                                 $(".top0").css(user)
  80.                         }
  81.                 }
  82.                 $(".top0").css(point);//更改位置
  83.         }
  84.        
  85.         function gameOver(){
  86.                 console.log("碰到墙壁");
  87.                 /* clearInterval(interval);//碰到墙以后结束游戏
  88.                 alert("Game over"); */
  89.                 //碰到墙以后重新开始
  90.                 user = {width: 30,height: 30};
  91.                 $(".top0").css(user);//回复初始大小
  92.                 direction = 4;//往右走
  93.                 point = {left: 20,top: 20};//当前位置=初始位置
  94.                
  95.         }
  96.        
  97.         //监控按键
  98.         $(document).keydown(function(event){
  99.                 console.log(event.keyCode);
  100.                 if(event.keyCode == 38){
  101.                         direction = 1;
  102.                 }else if(event.keyCode == 40){
  103.                         direction = 2;
  104.                 }else if(event.keyCode == 37){
  105.                         direction = 3;
  106.                 }else if(event.keyCode == 39){
  107.                         direction = 4;
  108.                 }
  109.         });
复制代码

源码在此

Snake.zip (143.66 KB, 下载次数: 15)

评分

参与人数 1好评 +1 精币 +3 收起 理由
易语言资源网 + 1 + 3 支持开源~!感谢分享

查看全部评分


结帖率:84% (26/31)

签到天数: 3 天

发表于 2022-5-9 23:00:29 | 显示全部楼层   上海市上海市
感谢发布原创作品,一定好好学习,天天向上
回复 支持 反对

使用道具 举报

结帖率:100% (16/16)

签到天数: 10 天

发表于 2021-2-4 22:32:48 | 显示全部楼层   湖北省武汉市
滑稽越吃越大,嘿嘿
回复 支持 反对

使用道具 举报

结帖率:100% (5/5)

签到天数: 8 天

发表于 2021-1-29 17:06:40 | 显示全部楼层   陕西省咸阳市
没有易语言的?用来消遣一下时间
回复 支持 反对

使用道具 举报

签到天数: 6 天

发表于 2021-1-23 01:55:15 | 显示全部楼层   浙江省绍兴市
瞅瞅看
回复 支持 反对

使用道具 举报

签到天数: 25 天

发表于 2021-1-22 19:13:21 | 显示全部楼层   广东省广州市
支持一下~~~~~~
回复 支持 反对

使用道具 举报

结帖率:100% (6/6)

签到天数: 28 天

发表于 2021-1-22 15:43:57 | 显示全部楼层   新疆维吾尔自治区昌吉回族自治州
感谢分享。
回复 支持 反对

使用道具 举报

发表于 2021-1-22 15:03:11 | 显示全部楼层   广东省东莞市
滑稽
回复 支持 反对

使用道具 举报

结帖率:85% (35/41)

签到天数: 5 天

 楼主| 发表于 2021-1-22 13:53:19 | 显示全部楼层   山东省枣庄市

虽然变大了但是默认的吃掉范围还是30  所以得用中间去吃
回复 支持 反对

使用道具 举报

结帖率:85% (17/20)
发表于 2021-1-22 11:55:29 | 显示全部楼层   江西省吉安市
感谢分享~~~~~~~~~~
回复 支持 反对

使用道具 举报

结帖率:92% (190/207)

签到天数: 11 天

发表于 2021-1-22 11:25:30 | 显示全部楼层   广东省汕头市
QQ截图20210122112446.jpg 有bug  吃不了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 诚聘英才| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 800073686,邮箱:800073686@b.qq.com
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表