贪食蛇 - 自己动手小游戏

最新推荐文章于 2024-07-07 23:10:31 发布
最新推荐文章于 2024-07-07 23:10:31 发布
阅读量561 收藏
点赞数
分类专栏： JS 文章标签： function timer float button null xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_ljk/article/details/5099489
版权

既然有了俄罗斯方块，那趁兴也来一个贪食蛇吧，虽然有人说是入门级代码必写的小东西，但是也花费了不少时间，没有用到过多的复杂处理。

 

 

源代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Snake</title>
<style type="text/css">
body{margin:0;padding:0;font-family:Verdana;}
.container{border:2px solid #ccc;overflow:hidden;zoom:1;padding:10px;}
#game-area{float:left;width:375px;height:300px;border:4px solid #999;padding:0;margin:0;font-size:0;line-height:0;overflow:hidden;}
#game-area ul{overflow:hidden;zoom:1;padding:0;margin:0;}
#game-area ul li{float:left;width:15px;height:15px;overflow:hidden;font-size:0;line-height:0;}
.black{background-color:#ccc;}
.blue{background-color:#1E87F0;}
.yellow{background-color:#F77117;}
.green{background-color:#91C846;}
.violet{background-color:#E727CF;}
#game-oper{float:left;display:inline;margin-left:20px;font-size:14px;}
#info{font-size:16px;}
#sn-stage{color:#1E87F0;font-weight:bold;}
#sn-score{color:#F77117;font-weight:bold;}
#oper{margin:10px 0;}
#oper button{font-size:14px;margin-right:5px;padding:2px 5px;font-family:Verdana;}
#debug{color:#ff0000;font-weight:bold;}
</style>
</head>
<body>
<div class="container">
 <div id="game-area"></div>
 <div id="game-oper">
  <h3>Snake Game</h3>
  <div id="info">
   Stage : <span id="sn-stage">1</span>,
   Score : <span id="sn-score">0</span>
  </div>
  <div id="oper">
   <button id="begin">Begin</button>
   <button id="restart">Again</button>
  </div>
  <div id="debug"></div>
 </div>
</div>
<script type="text/javascript">
var Snake = (function(){
 var $ = function(s){return document.getElementById(s)};
 var timer = null;
 var iSnake = null; // 蛇
 var speed = 600; // 移动速度
 var dir = "left"; // 移动方向
 var isPause = false; // 暂停
 var isOver = false;
 var createSnake = function(){
  iSnake = [];
  for(var i = 0; i < 4; i++){
   iSnake.push([9,(i + 10)]);
   if(0 == i){
    $("item-" + 9 + "-" + (i + 10)).className = "yellow";
    $("item-" + 9 + "-" + (i + 10)).title = "head";
   }else{
    $("item-" + 9 + "-" + (i + 10)).className = "blue";
    $("item-" + 9 + "-" + (i + 10)).title = "body";
   }
  }
 };
 var createWall = function(level){
  switch(level){
   case 1 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 6) + "-" + i).className = "black";
      $("item-" + (j + 6) + "-" + i).title = "block";
     }
    }
    break;
   case 2 :
    for(var i = 1; i < 15; i++){
     $("item-4-" + i).className = "black";
     $("item-4-" + i).title = "block";
     $("item-"+ i +"-20").className = "black";
     $("item-"+ i +"-20").title = "block";
    }
    break
   case 3 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 11) + "-" + i).className = "black";
      $("item-" + (j + 11) + "-" + i).title = "block";
     }
    }
    for(var i = 10; i < 25; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 4) + "-" + i).className = "black";
      $("item-" + (j + 4) + "-" + i).title = "block";
     }
    }
    break;
   case 4 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 6) + "-" + i).className = "black";
      $("item-" + (j + 6) + "-" + i).title = "block";
     }
    }
    break;
   case 5 :
    for(var i = 1; i < 15; i++){
     $("item-4-" + i).className = "black";
     $("item-4-" + i).title = "block";
     $("item-"+ i +"-20").className = "black";
     $("item-"+ i +"-20").title = "block";
    }
    break
   case 6 :
    for(var i = 1; i < 12; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 11) + "-" + i).className = "black";
      $("item-" + (j + 11) + "-" + i).title = "block";
     }
    }
    for(var i = 10; i < 25; i++){
     for(j = 0; j < 2; j++){
      $("item-" + (j + 4) + "-" + i).className = "black";
      $("item-" + (j + 4) + "-" + i).title = "block";
     }
    }
    break;
   case 7 :
    for(var i = 1; i < 15; i++){
     $("item-4-" + i).className = "black";
     $("item-4-" + i).title = "block";
     $("item-"+ i +"-20").className = "black";
     $("item-"+ i +"-20").title = "block";
    }
    break
  };
 };
 var resetSnake = function(level){
  dir = "left";
  initBoard();
  createWall(level);
  createSnake();
  createFood();
 };
 var createFood = function(){
  pauseSnake();
  var y = Math.ceil(Math.random() * 22) + 1;
  var x = Math.ceil(Math.random() * 16) + 1;
  if("head" == $("item-" + x + "-" + y).title || "body" == $("item-" + x + "-" + y).title || "block" == $("item-" + x + "-" + y).title){
   createFood();
   return false;
  }
  $("item-" + x + "-" + y).className = "green";
  $("item-" + x + "-" + y).title = "food";
  startSnake();
 };
 var moveSnake = function(){
  if(isOver){pauseSnake();return false;}
  $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).className = "";
  $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).title = "";
  for(var i = iSnake.length - 1; i > 0; i--){
   iSnake[i][0] = iSnake[i - 1][0];
   iSnake[i][1] = iSnake[i - 1][1];
   $("item-" + iSnake[i][0] + "-" + iSnake[i][1]).className = "blue";
   $("item-" + iSnake[i][0] + "-" + iSnake[i][1]).title = "body";
  }
  switch(dir){
   case "left" :
    moveLeft();
    break;
   case "right" :
    moveRight();
    break;
   case "top" :
    moveTop();
    break;
   case "bottom" :
    moveBottom();
    break;
  }
  chkSnake();
  if(chkFood()){
   iSnake.push([iSnake[iSnake.length - 1][0],iSnake[iSnake.length - 1][1]]);
   $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).className = "blue";
   $("item-" + iSnake[iSnake.length - 1][0] + "-" + iSnake[iSnake.length - 1][1]).title = "body";
   setStage();
  }
  $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).className = "yellow";
  $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title = "head";

 };
 var chkSnake = function(){
  if("block" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title || "body" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title){
   pauseSnake();
   isOver = true;
   $("debug").innerHTML = "Game Over";
   $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).style.backgroundColor = "red";
  }
 };
 var chkFood = function(){
  if("food" == $("item-" + iSnake[0][0] + "-" + iSnake[0][1]).title){
   $("sn-score").innerHTML = parseInt($("sn-score").innerHTML,10) + 10;
   createFood();
   return true;
  }
  return false;
 };
 var setStage = function(){
  var _score = parseInt($("sn-score").innerHTML,10);
  var _stage = 1;
  if(_score >= 100 && _score < 200){
   speed = 500;
   _stage = 2;
  }else if(_score >= 200 && _score < 300){
   speed = 400;
   _stage = 3;
  }else if(_score >= 300 && _score < 400){
   speed = 300;
   _stage = 4;
  }else if(_score >= 400 && _score < 500){
   speed = 200;
   _stage = 5;
  }else if(_score >= 500 && _score < 600){
   speed = 100;
   _stage = 6;
  }else if(_score >= 600){
   speed = 80;
   _stage = 7;
  }
  0 == _score % 100 ? resetSnake(_score / 100) : "";
  $("sn-stage").innerHTML = _stage;
 };
 var moveLeft = function(){
  iSnake[0][1] = iSnake[0][1] - 1;
 };
 var moveRight = function(){
  iSnake[0][1] = iSnake[0][1] + 1;
 };
 var moveTop = function(){
  iSnake[0][0] = iSnake[0][0] - 1;
 };
 var moveBottom = function(){
  iSnake[0][0] = iSnake[0][0] + 1;
 };
 var pauseSnake = function(){
  if(null != timer){
   clearInterval(timer);
   timer = null;
   isPause = true;
  }
 };
 var startSnake = function(){
  if(null == timer){
   timer = setInterval(function(){moveSnake()},speed);
   isPause = false;
  }
 }
 var initBoard = function(){
  var _arr = [];
  _arr.push("<ul>");
  for(var i = 0,j = 0,k = 0; i < 500; i++){
   _arr.push("<li id='item-"+ k + "-" + j +"'"+ (0 == k || 19 == k || 0 == j || 24 ==j ? " class='black' title='block'" : "") +"></li>");
   j++;
   if(j > 24){j = 0;k++};
  }
  _arr.push("</ul>");
  $("game-area").innerHTML = _arr.join("");

  document.onkeydown = function(e){
   switch(keyCode(e)){
    case 37 :
     if("right" == dir || isPause){return false};
     //pauseSnake();
     dir = "left";
     moveSnake();
     //startSnake();
     break;
    case 39 :
     if("left" == dir || isPause){return false};
     //pauseSnake();
     dir = "right";
     moveSnake();
     //startSnake();
     break;
    case 38 :
     if("bottom" == dir || isPause){return false};
     //pauseSnake();
     dir = "top";
     moveSnake();
     //startSnake();
     break;
    case 40 :
     if("top" == dir || isPause){return false};
     //pauseSnake();
     dir = "bottom";
     moveSnake();
     //startSnake();
     break;
   }
  }
  $("begin").onclick = function(){
   if("Begin" == this.innerHTML){
    if(null == iSnake){
     createSnake();
     createFood();
     startSnake();
    }else{
     startSnake();
     isPause = false;
    }
    this.innerHTML = "Pause";
   }else if("Pause" == this.innerHTML){
    pauseSnake();
    isPause = true;
    this.innerHTML = "Begin";
   }
  }
  $("restart").onclick = function(){
   clearInterval(timer);
   timer = null;
   dir = "left";
   iSnake = null;
   isOver = false;
   initBoard();
   speed = 600;
   $("sn-score").innerHTML = "0";
   $("sn-stage").innerHTML = "1";
   $("begin").innerHTML = "Begin";
   $("debug").innerHTML = "";
  }
 };
 var keyCode = function(evt){
  evt = (evt) ? evt : ((window.event) ? window.event : "");
  return evt.keyCode ? evt.keyCode : evt.which;
 };
 return {
  init : initBoard
 };
})();
Snake.init();
</script>
</body>
</html>

Jack_ljk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
贪吃蛇小游戏
qq_45016145的博客
03-24 1441
新手上路可能比较嫩，写的代码不简洁也不太好看，敬请谅解。以后学习中有什么不会的都会做好笔记的。。 源代码如下： #include<stdio.h> #include<stdlib.h> #include<windows.h> #include<time.h> //函数声明区 void welcome();//欢迎界面 void Pos(int x...
贪食蛇小项目记录
zhangkai__的博客
05-22 224
一小时学贪食蛇系列，我遇到的问题，可能就是大家的问题，嘿嘿
C++实现不闪屏的字符游戏--贪吃蛇
Jundesky的博客
04-30 3029
一.写在前面的废话 贪吃蛇游戏早在大一刚学编程的时候就写过了，虽然那时候有各种bug…最近有个同学问我不闪屏的贪吃蛇怎么写，我学习了一位大佬的博客，动手做了一个不闪屏的版本。 二.实现方法 首先我们要弄清楚闪屏的原因。因为贪吃蛇是一直在动的，我们就需要不停地输出。当然我们不能一幅图一幅图的输出，也就是说我们要让贪吃蛇看起来在一个框框内移动。普遍的实现方法是，用清屏(system(“cls”))和输...
c++ 贪食蛇控制台游戏代码，不闪屏功能强大资源占用小
03-04
《C++贪食蛇控制台游戏的编程实践与解析》 贪食蛇游戏，作为一款经典的游戏，其简单易懂的规则和丰富的游戏性深受玩家喜爱。...如果你对此有兴趣，不妨动手一试，也许你会创造出属于自己的独特版本的贪食蛇游戏。
mfc版 贪食蛇小游戏 代码
12-01
《MFC实现贪食蛇小游戏详解》 贪食蛇是一款深受玩家喜爱的经典小游戏，它简单易上手，却又富有挑战性。在这个项目中，我们将深入探讨如何使用Microsoft Foundation Classes (MFC) 框架来实现这个趣味盎然的小游戏。...
C++贪食鱼小游戏
10-17
《C++贪食鱼小游戏详解》 在编程学习的道路上，动手实践是提升技能的关键步骤。C++作为一款强大的编程语言，被广泛应用于游戏开发、系统编程等多个领域。本篇文章将详细探讨如何利用C++编写一个贪食鱼小游戏，以此...
mfc 贪食蛇
11-18
贪食蛇，这款经典的小游戏，自诞生以来就深受玩家喜爱。而在Windows平台上，利用Microsoft Foundation Classes (MFC)库来开发它，是一个很好的实践项目，对于初学者来说，既能巩固C++基础知识，又能学习MFC框架的...
C# 编写的贪食蛇小游戏
12-28
《C# 编写的贪食蛇小游戏：深入解析与实现》 贪食蛇游戏作为一款经典的小游戏，深受玩家喜爱，同时也是编程初学者学习游戏开发的绝佳案例。本项目使用C#语言进行编写，旨在帮助大学生理解编程基础，掌握C#编程技能...
第二章-在HTML中使用JavaScript
2301_79858637的博客
07-07 1213
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
NC57供应商管理.pdf
07-11
NC57供应商管理
古典花纹毕业答辩PPT模板
07-11
【作品名称】：古典花纹毕业答辩PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
高性能电动摩托车全球前10强生产商排名及市场份额（by QYResearch）.docx
07-11
高性能电动摩托车全球前10强生产商排名及市场份额（by QYResearch）.docx
毕业答辩计划总结工作汇报PPT模板
07-11
【作品名称】：毕业答辩计划总结工作汇报PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：毕业答辩计划总结工作汇报PPT模板
毕业论文答辩开题报告PPT模板
07-11
【作品名称】：毕业论文答辩开题报告PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：毕业论文答辩开题报告PPT模板
思林杰电子-物料分类及属性定义参考.xlsx
最新发布
07-11
思林杰电子-物料分类及属性定义参考
cxl1.1协议的中文翻译版
07-11
cxl1.1协议的中文翻译版
简洁大学毕业答辨PPT模板
07-11
【作品名称】：简洁大学毕业答辨PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
详细设计-贪食蛇游戏软件
03-11
贪食蛇游戏是一款经典的游戏，玩家通过控制一条蛇在一个有边界的区域内移动，吃掉食物来增长身体长度，同时要避免撞到自己的身体或者撞到边界。下面是贪食蛇游戏软件的详细设计： 1. 游戏界面设计： - 游戏区域：一个矩形区域，用于显示游戏的进行，包括蛇和食物的位置。 - 分数显示：显示玩家当前的得分。 - 游戏状态显示：显示游戏的状态，如开始、暂停、结束等。 2. 蛇的设计： - 蛇的身体：由一系列相连的方块组成，每个方块代表蛇的一个身体部分。 - 蛇的移动：根据玩家的输入控制蛇的移动方向，蛇每次移动一个方块的距离。 - 蛇的生长：当蛇吃到食物时，蛇的身体长度增加一个方块。 3. 食物的设计： - 食物的位置：随机生成在游戏区域内的一个空白位置。 - 食物的消失与生成：当蛇吃到食物后，食物消失并重新生成在另一个位置。 4. 碰撞检测： - 蛇与自身的碰撞：当蛇的头部与身体的其他部分重叠时，游戏结束。 - 蛇与边界的碰撞：当蛇的头部碰到游戏区域的边界时，游戏结束。 - 蛇与食物的碰撞：当蛇的头部与食物重叠时，蛇的身体增长，并生成新的食物。 5. 游戏控制： - 开始游戏：玩家点击开始按钮或者按下空格键开始游戏。 - 暂停游戏：玩家点击暂停按钮或者按下空格键暂停游戏。 - 结束游戏：当蛇与自身或边界碰撞时，游戏结束。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值