js实现贪吃蛇小游戏(加墙)


Posted in Javascript onJuly 31, 2020

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

1.贪吃蛇的规则

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

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

2.实现图:

js实现贪吃蛇小游戏(加墙)

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);//定时器,让蛇移动起来,可以设置他的速度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
原生js的数组除重复简单实例
May 24 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
详解js的视频和音频采集
Aug 09 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 #Javascript
vue实现给div绑定keyup的enter事件
Jul 31 #Javascript
简单了解JavaScript作用域
Jul 31 #Javascript
基于vue--key值的特殊用处详解
Jul 31 #Javascript
javascript开发实现贪吃蛇游戏
Jul 31 #Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 #Javascript
vscode中Vue别名路径提示的实现
Jul 31 #Javascript
You might like
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
详解python的数字类型变量与其方法
2016/11/20 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
python opencv如何实现图片绘制
2020/01/19 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
中软Java笔试题
2012/11/11 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
《观察物体》教学反思
2016/02/17 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP