pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

html5貪吃蛇游戲使用63行代碼完美實(shí)現(xiàn)

以前也很少關(guān)注html5,感覺選擇html已經(jīng)慢慢成為趨勢(shì),想了解下。就找了個(gè)游戲?qū)W習(xí)了,寫完這個(gè)游戲感覺html5和js結(jié)合很緊密,如果js不 是特別好。估計(jì)需要先補(bǔ)習(xí)下js,這個(gè)只是個(gè)人的建議,不一定準(zhǔn)確。還有一個(gè)就是,思維和邏輯要特別清楚,不然寫游戲可能很痛苦。

貪吃蛇,最主要的功能點(diǎn): 1,蛇的移動(dòng) 2,改變蛇的方向 3,放置食物 4,增加舍身 5,怎么掛的。

第一次寫游戲,第一次寫html5 感覺還是很吃力的。寫完了,給大家分享下。互相交流.............不懂的或者有建議的,可以留言給我。。。代碼很短,就60行。

不過這個(gè)是個(gè)半成品,等寫完成了。再更新下
 

復(fù)制代碼 代碼如下:


<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var time = 160 ; //蛇的速度
var cxt=c.getContext("2d");
var x = y = 8;
var a = 0; //食物坐標(biāo)
var t = 20; //舍身長
var map = []; //記錄蛇運(yùn)行路徑
var size = 8; //蛇身單元大小
var direction = 2; // 1 向上 2 向右 0 左 3下
interval = window.setInterval(set_game_speed, time); // 移動(dòng)蛇
function set_game_speed(){ // 移動(dòng)蛇
switch(direction){
case 1:y = y-size;break;
case 2:x = x+size;break;
case 0:x = x-size;break;
case 3:y = y+size;break;
}
if(x>400 || y>400 || x<0 || y<0){
alert("你掛了,繼續(xù)努力吧!失敗原因:碰壁了.....");window.location.reload();
}
for(var i=0;i<map.length;i++){
if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){
alert("你掛了,繼續(xù)努力吧!失敗原因:撞到自己了.....");window.location.reload();
}
}
if (map.length>t) { //保持舍身長度
var cl = map.shift(); //刪除數(shù)組第一項(xiàng),并且返回原元素
cxt.clearRect(cl['x'], cl['y'], size, size);
};
map.push({'x':x,'y':y}); //將數(shù)據(jù)添加到原數(shù)組尾部
cxt.fillStyle = "#006699";//內(nèi)部填充顏色
cxt.strokeStyle = "#006699";//邊框顏色
cxt.fillRect(x, y, size, size);//繪制矩形
if((a*8)==x && (a*8)==y){ //吃食物
rand_frog();t++;
}
}
document.onkeydown = function(e) { //改變蛇方向
var code = e.keyCode - 37;
switch(code){
case 1 : direction = 1;break;//上
case 2 : direction = 2;break;//右
case 3 : direction = 3;break;//下
case 0 : direction = 0;break;//左
}
}
// 隨機(jī)放置食物
function rand_frog(){
a = Math.ceil(Math.random()*50);
cxt.fillStyle = "#000000";//內(nèi)部填充顏色
cxt.strokeStyle = "#000000";//邊框顏色
cxt.fillRect(a*8, a*8, 8, 8);//繪制矩形
}
// 隨機(jī)放置食物
rand_frog();
</script>
</body>
</html>

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實(shí)現(xiàn)柱狀圖的示例,本文使用canvas來實(shí)現(xiàn)一個(gè)圖表,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計(jì)、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗(yàn)圖文教程,非常不錯(cuò),需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機(jī)房漫游動(dòng)畫,需要的朋友可以參考下
這篇文章主要介紹了手機(jī)端用rem+scss做適配的詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
本篇文章主要介紹了canvas 實(shí)現(xiàn) github404動(dòng)態(tài)效果的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | HEYL硬度计量泵-荧光法在线溶解氧仪-净时测控技术(上海)有限公司 | 三轴曲线机-端子插拔力试验机|华杰仪器 | 北京浩云律师事务所-企业法律顾问_破产清算等公司法律服务 | 昆明网络公司|云南网络公司|昆明网站建设公司|昆明网页设计|云南网站制作|新媒体运营公司|APP开发|小程序研发|尽在昆明奥远科技有限公司 | 自进式锚杆-自钻式中空注浆锚杆-洛阳恒诺锚固锚杆生产厂家 | 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 防火门|抗爆门|超大门|医疗门|隔声门-上海加汇门业生产厂家 | 杭州中策电线|中策电缆|中策电线|杭州中策电缆|杭州中策电缆永通集团有限公司 | 口臭的治疗方法,口臭怎么办,怎么除口臭,口臭的原因-口臭治疗网 | 北京成考网-北京成人高考网| 河南彩印编织袋,郑州饲料编织袋定制,肥料编织袋加工厂-盛军塑业 河南凯邦机械制造有限公司 | 制氮设备_PSA制氮机_激光切割制氮机_氮气机生产厂家-苏州西斯气体设备有限公司 | 铸钢件厂家-铸钢齿轮-减速机厂家-淄博凯振机械有限公司 | 博医通医疗器械互联网供应链服务平台_博医通 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 小型手持气象站-空气负氧离子监测站-多要素微气象传感器-山东天合环境科技有限公司 | 东莞猎头公司_深圳猎头公司_广州猎头公司-广东万诚猎头提供企业中高端人才招聘服务 | 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | 化工ERP软件_化工新材料ERP系统_化工新材料MES软件_MES系统-广东顺景软件科技有限公司 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 专业广州网站建设,微信小程序开发,一物一码和NFC应用开发、物联网、外贸商城、定制系统和APP开发【致茂网络】 | 广州中央空调回收,二手中央空调回收,旧空调回收,制冷设备回收,冷气机组回收公司-广州益夫制冷设备回收公司 | 合肥角钢_合肥槽钢_安徽镀锌管厂家-昆瑟商贸有限公司 | 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 志高装潢官网-苏州老房旧房装修改造-二手房装修翻新 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 广东燎了网络科技有限公司官网-网站建设-珠海网络推广-高端营销型外贸网站建设-珠海专业h5建站公司「了了网」 | 美缝剂_美缝剂厂家_美缝剂加盟-地老板高端瓷砖美缝剂 | 工业雾炮机_超细雾炮_远程抑尘射雾器-世纪润德环保设备 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 山东聚盛新型材料有限公司-纳米防腐隔热彩铝板和纳米防腐隔热板以及钛锡板、PVDF氟膜板供应商 | 南京技嘉环保科技有限公司-杀菌除臭剂|污水|垃圾|厕所|橡胶厂|化工厂|铸造厂除臭剂 | 桐城新闻网—桐城市融媒体中心主办 | 粘度计,数显粘度计,指针旋转粘度计| 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 |