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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
js实现3D图片展示效果
Mar 09 Javascript
在node中如何使用 ES6
Apr 22 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
三种php连接access数据库方法
2013/11/11 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python实现清屏的方法
2015/04/30 Python
python中关于for循环的碎碎念
2017/06/30 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
python批量修改文件名的示例
2020/09/27 Python
基于Python实现粒子滤波效果
2020/12/01 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
人事科岗位职责范本
2014/03/02 职场文书
中介业务员岗位职责
2014/04/09 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
2015年父亲节活动总结
2015/02/12 职场文书