时间:2021-07-01 10:21:17 帮助过:24人阅读
本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下
- <!doctype html>
- <html>
- <meta charset="utf-8">
- <head>
- <style>
- *{
- margin: 0;
- padding:0;
- }
- .content{
- position: absolute;
- width: 500px;
- height: 500px;
- background-color: #212121;
- }
- .colo{
- width: 48px;
- height: 48px;
- background-color: #E6E6E6;
- border: 1px solid #466F85;
- float: left;
- }
- .head{
- /*background-color: #49DF85;*/
- background-image: url(./img/22.jpg);
- border-radius: 10px;
- background-size: 100%;
- position: absolute;
- height: 48px;
- width: 48px;
- }
- .fruit{
- /*background-color: #49DF85;*/
- background-image: url(./img/fruit.jpg);
- background-size: 100%;
- position: absolute;
- height: 48px;
- width: 48px;
- }
- .score{
- font-family: '黑体';
- left:600px;
- position: absolute;
- height: 50px;
- width: 200px;
- background-color: #212121;
- color: #FFF;
- }
- .newbody{
- position: absolute;
- width: 48px;
- height: 48px;
- background-image: url(./img/33.jpg);
- background-size: 100%;
- }
- .btn{
- font-family: '黑体';
- left:600px;
- top: 100px;
- position: absolute;
- height: 50px;
- width: 100px;
- background-color: #1193FF;
- color: #FFF;
- text-align: center;
- line-height: 50px;
- font-size: 20px;
- cursor: pointer;
- border-radius: 15px;
- }
- </style>
- </head>
- <body>
- <div class="content" id="content">
- </div>
- <div class="btn" id="stop">停止游戏</div>
- <div class="btn" style="top:180px" id="start">开启游戏</div>
- <div class="btn" style="top:380px" id="gameWay">游戏状态:</div>
- <div class="score" id="score" >分数:<p></p></div>
- <script type="text/javascript" >
- //添加状态
- var stop=document.getElementById('stop');
- var start=document.getElementById("start");
- var gameWay=document.getElementById('gameWay');
- start.onclick=function(){
- head.value='2';
- incident=setInterval(move,200);
- }
- stop.onclick=function(){
- clearInterval(incident);
- }
- //
- var content=document.getElementById("content");
- for(var i=0;i<100;i++){
- var div=document.createElement("div");
- div.className="colo";
- content.appendChild(div);
- }
- var scoreId=document.getElementById("score");
- var scoreNum=0;
- var scoreCon=document.createElement("p");
- // var scoreText=document.createTextNode(scoreNum);
- // scoreCon.appendChild(scoreText);
- scoreId.appendChild(scoreCon);
- var head=null; //保存蛇头
- var fruit=null; //保存果实
- var dir=null; //保存蛇的方向
- var body=new Array(); //保存蛇身体增加的部分
- var bodyNum=0; //记录创建了多少个body
- //随机创建head和fruit到content里面
- function createType(type){
- if(type==1){
- //创建随机数
- var row = parseInt(Math.random() * 6 +2);
- var col = parseInt(Math.random() * 6 +2);
- head=document.createElement("div");
- head.className="head";
- head.style.top=row*50+"px";
- head.style.left=col*50+"px";
- content.appendChild(head);
- // head.style.top=;
- // head.style.left=;
- }
- if(type==2){
- //创建随机数
- var row = parseInt(Math.random() * 6 +2);
- var col = parseInt(Math.random() * 6 +2);
- fruit=document.createElement("div");
- fruit.className="fruit";
- fruit.style.width="50";
- fruit.style.height="50";
- fruit.style.backgroundColor="#EA2000";
- fruit.style.top=row*50+"px";
- fruit.style.left=col*50+"px";
- content.appendChild(fruit);
- }
- }
- //调用创建的道具方法
- createType(1);
- createType(2);
- //蛇头移动函数
- var direction=new Array; //存每个新建Body的方向
- //转换数
- var numss=0;
- //自动滑动事件
- function move(){
- if(head.value!=""){
- switch(head.value){
- case '1':
- head.style.top=head.offsetTop-50+"px";
- break;
- case '2':
- head.style.top=head.offsetTop+50+"px";
- break;
- case '3':
- head.style.left=head.offsetLeft-50+"px";
- break;
- case '4':
- head.style.left=head.offsetLeft+50+"px";
- break;
- }
- }
- console.log(head.offsetTop);
- if(head.offsetTop>500){
- alert("超出边界!请重新游戏");
- }
- // if(head==null){
- // if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){
- // alert("超出边界!请重新游戏");
- // }
- if(body.length!=0){
- for(var i=body.length-1;i>=0;i--){
- if(i==0){
- body[0].value=head.value;
- }else{
- body[i].value=body[i-1].value;
- }
- }
- }
- //转换方向
- //如果成功吃掉果实后事件
- if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){
- var row = parseInt(Math.random() * 6 +2);
- var col = parseInt(Math.random() * 6 +2);
- fruit.style.top=row*50+"px";
- fruit.style.left=col*50+"px";
- //记录分数
- scoreNum=scoreNum+1;
- document.getElementsByTagName('p')[0].innerText="";
- document.getElementsByTagName('p')[0].innerText=scoreNum;
- //创建body部分
- bodyAdd(head.style.top,head.style.left,head.value);
- }
- //控制body跟随head运动部分
- //有身体的时候要动态改变body的值
- if(body.length>0){
- var body01=document.getElementById('body01');
- body01.style.top=head.offsetTop+"px";
- body01.style.left=head.offsetLeft+"px";
- switch(head.value){
- case '1':
- body01.style.top=head.offsetTop+50+"px";
- body01.style.left=head.offsetLeft+"px";
- break;
- case '2':
- body01.style.top=head.offsetTop-50+"px";
- body01.style.left=head.offsetLeft+"px";
- break;
- case '3':
- body01.style.left=head.offsetLeft+50+"px";
- body01.style.top=head.offsetTop+"px";
- break;
- case '4':
- body01.style.left=head.offsetLeft-50+"px";
- body01.style.top=head.offsetTop+"px";
- break;
- }
- }
- if(body.length>1){
- body[bodyNum-1].value=body[bodyNum-2].value;
- for(var i=1;i<body.length;i++){
- var nu=i+1;
- var bodyId=document.getElementById('body0'+nu);
- var body_Id=document.getElementById('body0'+i);
- bodyId.style.top=body_Id.offsetTop+"px";
- bodyId.style.left=body_Id.offsetLeft+"px";
- switch(body[bodyNum-(body.length-i)].value){
- case '1':
- bodyId.style.top=body_Id.offsetTop+50+"px";
- bodyId.style.left=body_Id.offsetLeft+"px";
- break;
- case '2':
- bodyId.style.top=body_Id.offsetTop-50+"px";
- bodyId.style.left=body_Id.offsetLeft+"px";
- break;
- case '3':
- bodyId.style.left=body_Id.offsetLeft+50+"px";
- bodyId.style.top=body_Id.offsetTop+"px";
- break;
- case '4':
- bodyId.style.left=body_Id.offsetLeft-50+"px";
- bodyId.style.top=body_Id.offsetTop+"px";
- break;
- }
- }
- }
- }
- //创建按钮时间
- document.onkeydown=function(){
- var code=event.keyCode;
- switch (code){
- //向上
- case 38:
- head.value='1';
- break;
- //向下
- case 40:
- head.value='2';
- break;
- //向左
- case 37:
- head.value='3';
- break;
- //向右
- case 39:
- head.value='4';
- break;
- console.log(head.value);
- }
- }
- //身体增加事件
- function bodyAdd(top,left,dir){
- if(dir!=""){
- dir=dir;
- }
- else{
- dir=head.value;
- }
- //首次创建body
- if(bodyNum==0){
- var newbody=document.createElement('div');
- newbody.className="newbody";
- newbody.id="body01";
- switch (dir){
- case '1':
- newbody.style.top=head.offsetTop-50+'px';
- newbody.style.left=head.offsetLeft+"px";
- break;
- case '2':
- newbody.style.top=head.offsetTop+50+'px';
- newbody.style.left=head.offsetLeft+"px";
- break;
- case '3':
- newbody.style.left=head.offsetLeft-50+'px';
- newbody.style.top=head.offsetTop+"px";
- break;
- case '4':
- newbody.style.left=head.offsetLeft+50+'px';
- newbody.style.top=head.offsetTop+"px";
- break;
- }
- content.appendChild(newbody);
- bodyNum=bodyNum+1;
- body.push(newbody);
- }else{
- //第二次及多次创建
- var newbody=document.createElement('div');
- newbody.className="newbody";
- newbody.id="body0"+(body.length+1);
- switch (dir){
- case '1':
- newbody.style.top=body[body.length-1].offsetTop-50+'px';
- newbody.style.left=body[body.length-1].offsetLeft+"px";
- break;
- case '2':
- newbody.style.top=body[body.length-1].offsetTop+50+'px';
- newbody.style.left=body[body.length-1].offsetLeft+"px";
- break;
- case '3':
- newbody.style.left=body[body.length-1].offsetLeft-50+'px';
- newbody.style.top=body[body.length-1].offsetTop+"px";
- break;
- case '4':
- newbody.style.left=body[body.length-1].offsetLeft+50+'px';
- newbody.style.top=body[body.length-1].offsetTop+"px";
- break;
- }
- content.appendChild(newbody);
- bodyNum=bodyNum+1;
- body.push(newbody);
- }
- // body.push(content);
- }
- //超出边界,重置信息事件
- function initialize(){
- //重置果实
- var row = parseInt(Math.random() * 6 +2);
- var col = parseInt(Math.random() * 6 +2);
- fruit.style.top=row*50+"px";
- fruit.style.left=col*50+"px";
- //记录分数
- document.getElementsByTagName('p')[0].innerText="";
- //重置贪食蛇
- }
- var incident;
- incident=setInterval(move,200);
- //附加操作
- // var btn=document.getElementById('btn');
- // btn.onclick=function(){
- // clearInterval(incident);
- // }
- //
- </script>
- </body>
- </html>
还在不断完善中,希望对大家的学习有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。