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è)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 美能达分光测色仪_爱色丽分光测色仪-苏州方特电子科技有限公司 | 深圳VI设计-画册设计-LOGO设计-包装设计-品牌策划公司-[智睿画册设计公司] | 电磁辐射仪-电磁辐射检测仪-pm2.5检测仪-多功能射线检测仪-上海何亦仪器仪表有限公司 | 西宁装修_西宁装修公司-西宁业之峰装饰-青海业之峰墅级装饰设计公司【官网】 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 土壤检测仪器_行星式球磨仪_土壤团粒分析仪厂家_山东莱恩德智能科技有限公司 | bng防爆挠性连接管-定做金属防爆挠性管-依客思防爆科技 | 咖啡加盟,咖啡店加盟连锁品牌-卡小逗| 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 量子管通环-自清洗过滤器-全自动反冲洗过滤器-北京罗伦过滤技术集团有限公司 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 铸铁平台,大理石平台专业生产厂家_河北-北重机械 | 国产离子色谱仪,红外分光测油仪,自动烟尘烟气测试仪-青岛埃仑通用科技有限公司 | 高压无油空压机_无油水润滑空压机_水润滑无油螺杆空压机_无油空压机厂家-科普柯超滤(广东)节能科技有限公司 | 缠膜机|缠绕包装机|无纺布包装机-济南达伦特机械设备有限公司 | 运动木地板_体育木地板_篮球馆木地板_舞台木地板-实木运动地板厂家 | 上海洗地机-洗地机厂家-全自动洗地机-手推式洗地机-上海滢皓洗地机 | 济南货架定做_仓储货架生产厂_重型货架厂_仓库货架批发_济南启力仓储设备有限公司 | 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 水厂污泥地磅|污泥处理地磅厂家|地磅无人值守称重系统升级改造|地磅自动称重系统维修-河南成辉电子科技有限公司 | 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 低粘度纤维素|混凝土灌浆料|有机硅憎水粉|聚羧酸减水剂-南京斯泰宝 | 挖掘机挖斗和铲斗生产厂家选择徐州崛起机械制造有限公司 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 科威信洗净科技,碳氢清洗机,超声波清洗机,真空碳氢清洗机 | 土壤肥料养分速测仪_测土配方施肥仪_土壤养分检测仪-杭州鸣辉科技有限公司 | 合肥通道闸-安徽车牌识别-人脸识别系统厂家-安徽熵控智能技术有限公司 | 电动垃圾车,垃圾清运车-江苏速利达机车有限公司 | 【ph计】|在线ph计|工业ph计|ph计厂家|ph计价格|酸度计生产厂家_武汉吉尔德科技有限公司 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 开锐教育-学历提升-职称评定-职业资格培训-积分入户 | 高尔夫球杆_高尔夫果岭_高尔夫用品-深圳市新高品体育用品有限公司 | 聚丙烯酰胺_阴离子_阳离子「用量少」巩义亿腾厂家直销,售后无忧 聚合甘油__盐城市飞龙油脂有限公司 | 安全,主动,被动,柔性,山体滑坡,sns,钢丝绳,边坡,防护网,护栏网,围栏,栏杆,栅栏,厂家 - 护栏网防护网生产厂家 | 上海办公室装修,写字楼装修—启鸣装饰设计工程有限公司 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 阜阳在线-阜阳综合门户|