js实现贪吃蛇小游戏（加墙）

2024-09-29 14:36:44

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下

1.贪吃蛇的规则

作为一款经典游戏，很多人玩他其实就是一种怀念。但是他不应该那么单一，应该有更多新的元素出现。然后我是个新手，希望我以后继续学习的途中能够再次回头重写一遍贪吃蛇。他的规则是;a.超出边界会死 b.碰到自身会死 c.吃食物会变长。

值得注意的是：1.在函数里所调用的函数的顺序很重要。2.<script src="mygame2.js"></script>必须在<canvas>的下面。

2.实现图：

3.HTML的代码：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>贪吃蛇第二版</title>
 <link rel="stylesheet" href="mygame2.css" rel="external nofollow" type="text/css">
</head>

<body >
<div class="container">
 <div class="center">
  <h1>snake</h1>
  <canvas id="myCanvas"></canvas>
  <script src="mygame2.js"></script>
 </div>
</div>
</body>
</html>

4.CSS的代码（mygame2.css）:

*{
 padding: 0;
 margin: 0;
}
.container
{
 text-align:center;
}
.center
{
 margin-left:auto;
 margin-right:auto;
 width:70%;
}
#myCanvas
{
 border-style:solid;
 border-color:#A9A9A9;
 background-color: #E0FFFF;
}

5.js的代码（mygame2.js）

/**
 * Created by Administrator on 2017/6/30.
 */
//画布
var cvs=document.getElementById("myCanvas");
var cxt=cvs.getContext("2d");
cvs.height=600;
cvs.width=800;

var Snakesize=20;
var cvsCridx=cvs.width/Snakesize;//格子化
var cvsCridy=cvs.height/Snakesize;
var length=0;
var wall_length=0;
var Snakebady=[];
var dre =2;
var food = {};
var direFlag = 0;//程序存在的bug，按上左会刷新界面，用标记解决
var speed=0;
var wall=[];
//初始化
function init()
{
 Snakebady=[];
 length=0;
 dre =2;
 for(var i= 0;i<3;i++)
 {
  CreateSnakeNode(parseInt(cvsCridx/2)+i,parseInt(cvsCridy/2));
 }
 drawSnake();
 putfood();
}
//放蛇身
function CreateSnakeNode(x,y)
{
 Snakebady.push({x:x , y:y, color:length===0 ? "#000000" : "#778899" });
 length ++;
}
//绘制蛇身（连续的蛇点）
function drawSnake()
{
 cxt.clearRect(0, 0, cvs.width, cvs.height);
 for( i=0; i<Snakebady.length; i++)
 {
  drawRect(Snakebady[i]);
 }
 drawRect(food);
 wall_location();
}
//绘制单个蛇点
function drawRect(Snakenode)
{
 cxt.beginPath();
 Snakesize = 20;
 cxt.fillStyle = Snakenode.color;
 cxt.fillRect(Snakenode.x * Snakesize, Snakenode.y * Snakesize, Snakesize, Snakesize);//蛇的形状为方形
 //cxt.arc(Snakenode.x * Snakesize,Snakenode.y * Snakesize,12,0,Math.PI*2,true);//蛇的形状为圆形
 cxt.strokeStyle="#484848";
 cxt.lineWidth = 4;
 cxt.stroke();
 cxt.closePath();
 cxt.fill();
}
//绘制墙
function drawwall (x,y)
{
 wall.push({x:x, y:y, color:"#FFFF00"});
 wall_length++;
 cxt.beginPath();
 cxt.fillRect(Snakesize *x,Snakesize *y,Snakesize,Snakesize);
 cxt.fillStyle = wall.color;
 cxt.strokeStyle="#484848";
 cxt.lineWidth = 2;
 cxt.stroke();
 cxt.closePath();
 cxt.fill();
}
//墙的位置
function wall_location()
{
 var i,j;
 for( i= 2,j= 5;i<15;i++)
 {drawwall(i,j);}
 for( i=25,j=5;i<38;i++)
 {drawwall(i,j);}
 for( j= 6,i=14;j<15;j++)
 {drawwall(i,j);}
 for( j= 6,i=25;j<15;j++)
 {drawwall(i,j);}
 for( i= 9,j=17;j<26;j++)
 {drawwall(i,j);}
 for(i=29,j=17;j<26;j++)
 {drawwall(i,j);}
 for(i=10,j=25;i<29;i++)
 {drawwall(i,j);}
}
//放置食物，不超过画布，不放在蛇身上,不能放在墙上
function putfood()
{
 var flog=1;
 while(1)
 {
  flog=1;
  var foodx = parseInt(Math.random()*cvsCridx);
  var foody = parseInt(Math.random()*cvsCridy);
  for(var i = 0; i < Snakebady.length; i ++)
  {if(Snakebady[i].x === foodx && Snakebady[i].y === foody) flog = 0;}
  for(var j=0; j<wall_length ; j++)
  {
   if(wall[j].x === foodx && wall[j].y === foody)
    flog = 0;
  }
  if(flog) break;
 }
 food = {x: foodx, y: foody, color: '#B00000'};
}
//先用alert读出位置的ASCLL的值，然后再重新赋值进行定义
document.onkeydown = function(e){
 if(direFlag) return;
 e.preventDefault();//清除页面的滑动带来的上下键的操作
 if(e.keyCode===38|| e.keyCode===87) setDirection(1);//上
 if(e.keyCode===40|| e.keyCode===83) setDirection(-1);//下
 if(e.keyCode===37|| e.keyCode===65) setDirection(2);//左
 if(e.keyCode===39|| e.keyCode===68) setDirection(-2);//右
 if(e.keyCode ===32) speed=100;//****
}
//蛇的移动
function SnakeMove()
{
 var newSnakebady={x:Snakebady[0].x,y:Snakebady[0].y,color:Snakebady[0].color};//改变后蛇头的坐标，不能直接赋值
 if(dre === 1)newSnakebady.y -=1;//蛇头根据键盘事件上下左右移动
 if(dre === -1) newSnakebady.y +=1;
 if(dre === 2) newSnakebady.x -=1;
 if(dre === -2) newSnakebady.x +=1;
 for(var i=Snakebady.length-1;i>0;i--)//蛇身的更替，用后一个位置等于前一个位置的坐标
 {
  Snakebady[i].x=Snakebady[i-1].x;
  Snakebady[i].y=Snakebady[i-1].y;
  if(Snakebady[i].x===newSnakebady.x&&Snakebady[i].y===newSnakebady.y)//判断撞自己
   return goend();
 }
 Snakebady[0]=newSnakebady;
 direFlag = 0;
 boundary(Snakebady[0]);
 isgetfood(Snakebady[0]);
 strike_wall();
}
//得到食物后的蛇身在最后面加上一个蛇点
function isgetfood(nood)
{
 if(nood.x===food.x&&nood.y===food.y)
 {
  putfood();
  Snakebady.push({x:Snakebady[Snakebady.length-1].x, y:Snakebady[Snakebady.length-1].y,color:"#778899"});//增加蛇身
 }
}
//判断墙
function strike_wall()
{
 for(var i=0;i<wall_length;i++)
 {
  for(var j=0;j<length;j++)
  {
   if(Snakebady[j].x === wall[i].x && Snakebady[j].y === wall[i].y)
    return goend();
  }
 }
}
//判断边界
function boundary(node)
{
 if(node.x < 0 || node.x > cvsCridx - 1 || node.y < 0 || node.y > cvsCridy - 1) goend();
}
//进行键位判断
function setDirection(dir){
 direFlag = 1;
 if(Math.abs(dir)===Math.abs(dre)) return;//往上不能往下
 dre=dir;
}
//*******
function goend()
{
 init();
}
init();
speed=200-speed;//****
setInterval(function(){
 SnakeMove();drawSnake();},150);//定时器，让蛇移动起来，可以设置他的速度。

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

从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了JavaScript编写贪吃蛇游戏的具体代码,供大家参考,具体内容如下游戏截图 1.画出游戏界面 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");//获取地图 2.给小蛇设置参数 var time = 160 ; //蛇的速度 var x = y = 8; var t = 20; //蛇身长 var map = []; //记录蛇运行路径 var siz
javascript实现贪吃蛇小练习

本文实例为大家分享了js实现贪吃蛇的具体代码,供大家参考,具体内容如下游戏思路: 创建方块.控制按钮(showBlock) 方块移动(点击开始,不断创建并移除前面的方块,用到队列先进先出) 控制移动(doUp\doDown\doLeft\doRight,加入用键盘控制) 产生食物方块(generateFood) 吃到食物变长(当方块位置相同时,吃食物) 判断撞墙.撞到自己游戏结束设置积分 <!DOCTYPE html> <html lang="en"> &l
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开发实现贪吃蛇游戏

贪吃蛇的例子: 在此例子中,利用snake数组的第0个元素和direction对象中的x值和y值做加法,算出蛇的下一个位置.利用间隔函数,不停的修改类名来进行渲染操作,感觉是一个很灵活的例子. style.css *{ margin: 0; padding: 0; box-sizing: border-box; } .page{ width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; } body{ font-size:
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实现贪吃蛇小游戏（容易理解）

话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
20行js代码实现的贪吃蛇小游戏

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

贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 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
javascript实现贪吃蛇小游戏

本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> <script> // 贪吃蛇: // 键盘的方向键,控制蛇的方向,碰撞食物,实现增加长度的

js实现贪吃蛇小游戏（加墙）

相关推荐

随机推荐