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;
 width: 500px;
 text-align: center;
}
header h1 {
 font-family: Arial;
 font-weight: bold;
}
header #newGameButton {
 display: block;
 margin: 20px auto;
 width: 100px;
 padding: 10px 10px;
 background-color: #8f7a66;
 font-family: Arial;
 color: white;
 border-radius: 10px;
 text-decoration: none;
}
header #newGameButton:hover {
 background-color: #9f8b77;
}
header p {
 font-family: Arial;
 font-size: 25px;
 margin: 20px auto;
}
canvas{
 display:block;
 border:medium double black;
 margin:4px auto;
}
 </style>
</head>
<body>
 <header>
 <h1>贪吃蛇小游戏</h1>
 <a href="javascript:newgame();" id="newGameButton">New Game</a>
 <p>score:<span id="score">0</span></p>
 </header>
 <canvas id="canvas">
 Your browser doesn't support the <code>canvas</code> element.
 </canvas>
 <script>
 var CANVAS = document.getElementById("canvas");
var CTX = CANVAS.getContext("2d");
var SNAKE = new Array(); //用队列模拟蛇身
var DIR = "right";  //用来控制蛇头的方向
var SIZE = 20;  //蛇身的宽度
var FOODX = 0;  //食物的x坐标
var FOODY = 0;  //食物的y坐标
var HEADX = 0; //蛇头的x坐标
var HEADY = 0; //蛇头的y坐标
var MAXWIDTH = 200; //画布的高度
var MAXHEIGHT = 200; //画布的宽度
var TIME = 400;  //蛇的速度
var SCORE = 0;  //计算玩家分数
var interval = null;

CANVAS.width = MAXWIDTH;
CANVAS.height = MAXHEIGHT;

window.onload = function(){
 newgame();
};
document.getElementById("newGameButton").click(function(){
 newgame();
});
function newgame(){
 SNAKE = []; //用队列模拟蛇身
 DIR = "right"; //用来控制蛇头的方向
 HEADX = 0; //蛇头的x坐标
 HEADY = 0; //蛇头的y坐标
 SCORE = 0;
 window.clearInterval(interval);
 interval = null;
 //初始化画布
 CTX.clearRect(0, 0, MAXWIDTH, MAXHEIGHT);
 //画一条蛇
 drawSnake();
 //放置食物
 setFood();
 //移动蛇
 interval = window.setInterval(move, TIME);

}
function move(){
 switch(DIR){
 case "up":HEADY = HEADY-SIZE;break;
 case "right":HEADX = HEADX+SIZE;break;
 case "down":HEADY = HEADY+SIZE;break;
 case "left":HEADX = HEADX-SIZE;break;
 }
 if(HEADX>MAXWIDTH-SIZE || HEADY>MAXHEIGHT-SIZE || HEADX<0 || HEADY<0){
 alert("你的分数为："+SCORE+"分，继续努力吧!失败原因：碰壁了.....");
 window.location.reload();
 }
 for(var i=1;i<SNAKE.length;i++){
 if(SNAKE[i][0] == SNAKE[0][0] && SNAKE[i][1] == SNAKE[0][1]){
  alert("你的分数为："+SCORE+"分，继续努力吧！失败原因：撞到自己了.....");
  window.location.reload();
 }
 }
 if(SNAKE.length == MAXWIDTH *MAXHEIGHT){
 alert("好厉害!么么哒~");
 window.location.reload();
 }
 moveIn(HEADX, HEADY);//移动一格
}
document.onkeydown = function(e) { //改变蛇方向
 var code = e.keyCode - 37;
 switch(code){
 case 1 : DIR = "up";break;//上
 case 2 : DIR = "right";break;//右
 case 3 : DIR = "down";break;//下
 case 0 : DIR = "left";break;//左
 }
}
//=============================画一条蛇=======================================================
function drawSnake(){
 CTX.fillStyle = "black";
 //画蛇头
 CTX.fillRect (HEADX, HEADY, SIZE, SIZE);
 SNAKE.push([HEADX, HEADY]);

 //画蛇身
 switch(DIR){
 case "up":
  drawBody(HEADX, HEADY + SIZE, HEADX, HEADY + 2 * SIZE);
  break;
 case "right":
  drawBody(HEADX - SIZE, HEADY, HEADX - 2 * SIZE, HEADY);
  break;
 case "down":
  drawBody(HEADX, HEADY - SIZE, HEADX, HEADY - 2 * SIZE);
  break;
 case "left":
  drawBody(HEADX + SIZE, HEADY, HEADX + 2 * SIZE, HEADY);
  break;
 }
}
function drawBody(x1, y1, x2, y2){
 CTX.fillRect (x1, y1, SIZE, SIZE);
 CTX.fillRect (x2, y2, SIZE, SIZE);
 SNAKE.push([x1, y1]);
 SNAKE.push([x2, y2]);
}
//===========================放置食物==============================
function setFood(){
 do{
 FOODX = SIZE * Math.floor(Math.random() * MAXWIDTH / SIZE);
 FOODY = SIZE * Math.floor(Math.random() * MAXHEIGHT / SIZE);
 }while(foodInSnake());
 CTX.fillStyle = "red";
 CTX.fillRect (FOODX, FOODY, SIZE, SIZE);
}
function foodInSnake(){
 for (var i = 0; i < SNAKE.length; i++) {
 if(FOODX == SNAKE[i][0] && FOODY == SNAKE[i][1]){
  return true;
 }
 }
 return false;
}
//========================================移动一格===========================
function moveIn(x, y){
 CTX.fillStyle = "black";
 CTX.fillRect(x, y, SIZE, SIZE);//重画蛇头
 //把新蛇头添加到 SNAKE 数组
 var newSnake = [[x, y]];
 SNAKE = newSnake.concat(SNAKE);

 if(false == eatFood()){//如果没吃到食物，减少一格蛇尾
 var snakeTail = SNAKE.pop();//获得蛇尾位置
 CTX.clearRect(snakeTail[0], snakeTail[1], SIZE, SIZE);//去掉蛇尾
 }
}
function eatFood(){
 if(HEADX == FOODX && HEADY == FOODY){
 CTX.fillStyle = "block";
 CTX.fillRect (FOODX, FOODY, SIZE, SIZE);

 setFood();
 SCORE++;
 //$("#score").text(SCORE);
 document.getElementById("score").innerHTML = SCORE;
 return true;
 }
 return false;
}

 </script>
</html>

效果图：

思路：

function newgame(){
 重置蛇和分数的数据；
 清除interval；
 初始化画布；
 画一条蛇；
 放置食物；
 使用定时器（setInterval）使蛇移动（move函数）；
}
function move(){
 根据方向改变蛇头下一格将要到达的位置；
 判断游戏是否结束，以及显示结束的原因（包含输赢）；
 蛇移动一格（moveIn函数）；
}
对键盘的方向键作监控，当改变方向时，修改全局变量DIR的值（用于存储方向）；
function moveIn(){
 在蛇头的前一格增加一格作为新的蛇头，并将蛇头的坐标作为第一个元素加入到代表蛇的数组中；
 if(没吃到食物){
 删除一格蛇尾，在画布中做相应改变；
 }
}

需要注意的是，如果需要在JS中设定canvas中的宽度和高度，和设置其他CSS属性略有不同。

CANVAS.width = MAXWIDTH;CANVAS.height = MAXHEIGHT;

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript 贪吃蛇(详细注释版)

    贪吃蛇 Snake v1.0 body{ } table{ border-collapse: collapse; border:solid #333 1px; } td{ height: 10px; width: 10px; font-size: 0px; } .filled{ background-color:blue; } function $(id){return document.getElementById(id);} /** * javascript贪吃蛇 v1.0 * author

  • JS写的贪吃蛇游戏(个人练习)

    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

  • javascript 实现的多浏览器支持的贪吃蛇webgame

    写的太累了 ,写了3个小时!大家可以玩玩看 界面不美,尽管批 www.jb51.net 我们 贪吃蛇 //获取新生元素位置 var bucunzai=true;//记录新元素是不是移动 var xinkx; var xinky; //页面载入后k元素定位 function lo(){ var objectp=document.getElementById("k") objectp.style.left="250px" objectp.style.top="

  • 原生js实现的贪吃蛇网页版游戏完整实例

    本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc

  • javascript 贪吃蛇实现代码

    在习作的过程中尝试着贪吃蛇游戏用JS实现了.竟然成功了. 思路:使用10px*10px的div层担当"像素",然后使用40*40矩阵160个"像素"构成了游戏的界面. 下面是代码: 复制代码 代码如下: // JavaScript Document alert("键盘的方向键控制方向,空格键暂停.\nLIFE制作\nhttp://blog.csdn.net/anhulife"); // 添加基本的图形块,即160个10 * 10的层组成的二维矩阵

  • javascript实现简单的贪吃蛇游戏

    javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;

  • javascript贪吃蛇完整版(源码)

    javascript贪吃蛇完整版 注释完整,面向对象 复制代码 代码如下: <html><head>    <title>贪吃蛇 Snake v2.4</title><style>    body{        font-size:9pt;    }    table{        border-collapse: collapse;        border:solid #333 1px;    }    td{        heigh

  • javascript编写贪吃蛇游戏

    代码很简单,这里就不多BB了,小伙伴们直接看示例吧 <!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> <meta

  • js编写“贪吃蛇”的小游戏

    贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 1.JS函数的熟练掌握, 2.JS数组的应用, 3.JS小部分AJAX的学习 4.JS中的splice.shift等一些函数的应用, 基本上就这些吧,下面提重点部分: 前端的页面,这里可自行布局,我这边提供一个我自己的布局: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • 20行js代码实现的贪吃蛇小游戏

    前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

随机推荐