企业站官方网站,嘉兴 网站建设,设计师网站 pins,wordpress post_classweb前端项目-贪吃蛇小游戏
【贪吃蛇】是一款经典的小游戏#xff0c;采用HTML、CSS和JavaScript技术进行开发#xff0c;玩家通过控制一条蛇在地图上移动#xff0c;蛇的目的是吃掉地图上的食物#xff0c;并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度采用HTML、CSS和JavaScript技术进行开发玩家通过控制一条蛇在地图上移动蛇的目的是吃掉地图上的食物并且让自己变得更长。游戏的核心玩法是控制蛇的移动方向和长度同时避免蛇头碰到自己的身体或者游戏边界 运行效果上下左右键控制蛇的移动空格为游戏开始/暂停可以在游戏界面设置蛇的移动速度 HTML源码–index.html
!DOCTYPE html
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title贪吃蛇小游戏/title
link relstylesheet hrefcss/snake.css
script typetext/javascript srcjs/snake.js/script
/headbody
div classboxspan分数span idfoodNum/span/spanspan选择速度select idsetSpeedoption value200慢速/optionoption value100中速/optionoption value50快速/option/select/spanspan开始/暂停(空格键)/span
/div
table idmap/table
/body
/htmljs源码–snake.js
function Snake(){this.rows 21;//21行this.cols 21;//21列this.speed 200;//前进速度this.curKey 0;//当前方向按键键码值this.timer 0;this.pos [];//蛇身位置this.foodPos {x:-1,y:-1};this.foodNum 0;//吃掉食物数量this.dom document.getElementById(map);//地图元素this.pause 1;//1表示暂停-1表示开始
}
Snake.prototype.map function(){//创建地图if(this.dom.firstChild){this.dom.removeChild(this.dom.firstChild);//重新开始 删除之前创建的tbody}for( j 0; j this.rows; j ){var tr this.dom.insertRow(-1);//插入一行for( i 0; i this.cols; i ){tr.insertCell(-1);//插入一列}}
}
Snake.prototype.food function(){//生成食物do{this.foodPos.y Math.floor( Math.random()*this.rows );this.foodPos.x Math.floor( Math.random()*this.cols );}while( this.dom.rows[this.foodPos.y].cells[this.foodPos.x].className ! )//防止食物生成在蛇身上this.dom.rows[this.foodPos.y].cells[this.foodPos.x].classNamesnakefood;//设置食物样式document.getElementById(foodNum).innerHTMLthis.foodNum;//设置分数
}
Snake.prototype.init function(){this.map();//创建地图arguments[0] ? this.speedarguments[0] : false;//选择速度this.pos [{x:2,y:0},{x:1,y:0},{x:0,y:0}];//定义蛇身位置for(var j0; jthis.pos.length; j ){//显示蛇身this.dom.rows[this.pos[j].y].cells[this.pos[j].x].classNamesnakebody;}this.dom.rows[this.pos[0].y].cells[this.pos[0].x].classNamesnakehead;//为蛇头设置样式this.curKey 0;//当前方向按键键码值this.foodNum 0;//吃掉食物数量this.food();//生成食物this.pause 1;//1表示暂停-1表示开始
}
Snake.prototype.trigger function(e){var _tthis;var e e || event;var eKey e.keyCode;//获取按键键码值if( eKey37 eKey40 eKey!this.curKey !( (this.curKey 37 eKey 39) || (this.curKey 38 eKey 40) || (this.curKey 39 eKey 37) || (this.curKey 40 eKey 38) ) this.pause-1 ){//如果按下的是方向键并且不是当前方向也不是反方向和暂停状态this.curKey eKey; //设置当前方向按键键码值 }else if( eKey32 ){this.curKey (this.curKey0) ? 39 : this.curKey;this.pause*-1;if(this.pause-1){this.timerwindow.setInterval(function(){_t.move()},this.speed);//蛇身移动}else{window.clearInterval(this.timer);//停止}}
}
Snake.prototype.move function(){//移动switch(this.curKey){case 37: //左方向if( this.pos[0].x 0 ){ //蛇头撞到边界this.over(); return; }else{ this.pos.unshift( {x:this.pos[0].x-1,y:this.pos[0].y}); //添加元素}break;case 38: //上方向if( this.pos[0].y 0 ){ this.over(); return; }else{ this.pos.unshift( {x:this.pos[0].x,y:this.pos[0].y-1}); }break;case 39://右方向if( this.pos[0].x this.cols-1 ){ this.over(); return; }else{ this.pos.unshift( {x:this.pos[0].x1,y:this.pos[0].y}); }break;case 40: //下方向if( this.pos[0].y this.rows-1 ){ this.over(); return; }else{ this.pos.unshift( {x:this.pos[0].x,y:this.pos[0].y1}); }break;}if( this.pos[0].x this.foodPos.x this.pos[0].y this.foodPos.y ){//蛇头位置与食物重叠this.food();//生成食物}else if( this.curKey ! 0 ){this.dom.rows[this.pos[this.pos.length-1].y].cells[this.pos[this.pos.length-1].x].className;this.pos.pop();//删除蛇尾}for(i3;ithis.pos.length;i){//从蛇身的第四节开始判断是否撞到自己if( this.pos[i].x this.pos[0].x this.pos[i].y this.pos[0].y ){ this.over();//游戏结束return;}}this.dom.rows[this.pos[0].y].cells[this.pos[0].x].classNamesnakehead;//画新蛇头this.dom.rows[this.pos[1].y].cells[this.pos[1].x].classNamesnakebody;//原蛇头变为蛇身
}
Snake.prototype.over function(){alert(游戏结束);window.clearInterval(this.timer);//停止this.init();//重置游戏
}
window.onload function(){var snake new Snake();//创建对象实例snake.init();//调用初始化方法document.onkeydown function(e){ snake.trigger(e); //按下按键时调用方法}document.getElementById(setSpeed).onchange function(){ this.blur(); snake.init(this.value); }
}CSS源码–snake.css * { margin:0; padding:0; font-family:Verdana,宋体; font-size:12px;}table#map { width:auto; height:auto; margin:0 auto; border-collapse:collapse; border-spacing:0; background-color:#EAEAEA; clear:both; background:#74AFE0}td { width:10px; height:10px; border:1px solid black;}.snakehead { background-color: orangered;}.snakebody { background-color:#FFCC00;}.snakefood { background-color: orangered;}.box { width:310px; margin:0 auto; padding:3em 0; list-style:none;}.boxspan{ float:left; height:30px; margin-right:1.5em; line-height:30px;}注 以上为本项目的所有源码无图片素材
