UDN-企业互联网技术人气社区

板块导航

浏览  : 6607
回复  : 37

[求助] 【Canvas + JavaScript】200行代码贪吃蛇游戏

[复制链接]
Cano12358的头像 楼主
以前没有任何的游戏开发经验,这次也是自己摸索着做出来的,肯定有很多地方做的不合适,希望大家指点一下。
展示地址:http://www.tianliantian.com/game/snake/index.htm
把CSS压缩了之后正好200行代码。
HTML:


       
        贪吃蛇


       
               
               
                        Mark:
                       
                               
Up
LeftPauseRight
Down
Restart
                       
               
       


CSS(压缩后):
        *{margin:0;padding: 0;font-family: "Microsoft YaHei";}
        #page{margin-right: auto;margin-left: auto;        margin-top: 20px;height: 600px;        width: 980px;        }
        #yard{        width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black;        float: right;}
        #mark{font-weight: 800;}
        #mark_con{ color: red;        }
        button{width: 50px;        }
       
JS:

相关帖子

发表于 2014-8-23 07:46:34 | 显示全部楼层
你想让我给你推荐吗
        
使用道具 举报

回复

发表于 2014-8-23 07:48:05 | 显示全部楼层
多分享源代码,多做些好东西,我都给你推荐了
        
使用道具 举报

回复

Cano12358的头像 楼主
发表于 2014-8-23 07:48:26 | 显示全部楼层
推荐了,送你88积分
        
使用道具 举报

回复

Cano12358的头像 楼主
发表于 2014-8-23 08:37:17 | 显示全部楼层

                该回复于2014-08-23 09:17:25被管理员删除
            
        
使用道具 举报

回复

发表于 2014-8-23 09:29:34 | 显示全部楼层
如果把
                        c.moveTo(snakes[i].x, snakes[i].y);
                        c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
                        c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
                        c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
改成
                        c.strokeRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
因此少了 3 行,不会很难过吧?

        
使用道具 举报

回复

发表于 2014-8-23 09:30:16 | 显示全部楼层
谢谢楼主分享!
        
使用道具 举报

回复

Cano12358的头像 楼主
发表于 2014-8-23 09:41:04 | 显示全部楼层
引用 5 楼 xuzuning 的回复:如果把
                        c.moveTo(snakes.x, snakes.y);
                        c.lineTo(snakes.x + BLOCK_SIZE, snakes.y);
                        c.lineTo(snakes.x + BLOCK_SIZE, snakes.y + BLOCK_SIZE);
                        c.lineTo(snakes.x, snakes.y + BLOCK_SIZE);
改成
                        c.strokeRect(snakes.x, snakes.y, BLOCK_SIZE, BLOCK_SIZE);
因此少了 3 行,不会很难过吧?


这样确实精简了很多,之前没想到用这个函数,谢谢指点!
        
使用道具 举报

回复

发表于 2014-8-23 09:46:21 | 显示全部楼层
引用 2 楼 xmt1139057136 的回复:多分享源代码,多做些好东西,我都给你推荐了
谢谢,如果最近有时间,会做一个坦克大战,不过应该不容易。
        
使用道具 举报

回复

Cano12358的头像 楼主
发表于 2014-8-23 10:37:36 | 显示全部楼层
引用 8 楼 Cano12358 的回复:Quote: 引用 2 楼 xmt1139057136 的回复:
多分享源代码,多做些好东西,我都给你推荐了

谢谢,如果最近有时间,会做一个坦克大战,不过应该不容易。
我给你推荐,鼓励你继续努力!!!
        
使用道具 举报

回复

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

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部