纯js和css完成贪吃蛇小游戏demo

2024-09-26 15:42:00

本文实例为大家分享了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>

还在不断完善中，希望对大家的学习有所帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

纯原生js实现贪吃蛇游戏

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</title> <style type="text/css"> * { margin: 0; padding: 0;
JavaScript实现Fly Bird小游戏

本教程为大家分享了Fly Bird小游戏的制作流程,供大家参考,具体内容如下 1.分析页面结构,理清需求和功能游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面. 1.1 开始界面 start.gif 游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟 start 按钮,点击进入游戏界面一直移动的地面 1.2 游戏界面 play.gif 显示越过障碍数量的计分器移动的障碍物,分别是上管道和下管道点击游戏界面,小鸟向上飞起,然后在重力作用下下坠, 当小鸟和管道碰撞后,结束界面弹出,同时小
js贪吃蛇游戏实现思路和源码

本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
纯JS单页面赛车游戏制作代码分享

分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>Best Fly Car</title> <style> input { border: 1px solid yellow; margin-l
JavaScript仿微信打飞机游戏

首先实现微信打飞机游戏,首先会有自己和敌机,采用canvas绘图来生成自己和敌人. 1.生成自己,且可以通过左右键来进行左右移动. //生成自己,且可以左右移动 //控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png";
JavaScript 打地鼠游戏代码说明

演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码代码如下: <style> #panel{height:300px;width:300px;background:#cc
javascript HTML5 canvas实现打砖块游戏

本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
js实现打地鼠小游戏

话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {
JavaScript实现打地鼠小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu
JS写的贪吃蛇游戏(个人练习)

JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

纯js和css完成贪吃蛇小游戏demo

相关推荐

随机推荐