HTML5_实现贪吃蛇

最新推荐文章于 2023-06-29 15:11:52 发布

一路走_1212

最新推荐文章于 2023-06-29 15:11:52 发布

阅读量1.2k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/javald/article/details/45619657

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>Luis_HTML5 贪吃蛇</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<meta name="luis" content="HTML5 贪吃蛇">

<style type="text/css">
body{
background-color: #BDDAD9;
}

.ha{
font-size: 30px; color:#E55179; text-align:center;
text-shadow: 5px 5px 5px rgba(0,0,0,1)
}

.canvasLuisS{

background-color: #FFF;
}

</style>

</head>
<body>

<h1 class="ha">贪吃蛇_Luis</h1>
<canvas id="canvasLuis" width="450" height="450" class="canvasLuisS" > </canvas>



<script type="text/javascript">

var canL= document.getElementById("canvasLuis");
//画笔
var huabi=canL.getContext("2d");

var sheLength=6;//蛇的长度
var width=15;//单元格大小
//蛇的速度
var sudu=200;

var snake=[];// 不断吃. 身体越大

//初始食物出现的 x y
//var foodX=0;
//var foodY=0;
//食物初始位置
//javascript 相关知识点：
//Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
//Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
//Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。
//math.random取0到1 之间的随机数
//Math.floor() 取整数如 Math.floor(39.2783) --> 39
var foodX=Math.ceil(Math.random() * 28+1);
var foodY=Math.ceil(Math.random() * 28+1);
var food=new Food(foodX,foodY);

/* 定义蛇数组的xy 方向： -1右初始化蛇位置。 y 是0 */
for ( var i = 0; i < sheLength; i++) {
snake[i]=new Cell(i,0,-1);
}

//定义蛇头部的位置
var head=snake[sheLength-1];

//蛇身体的元素 x y d方向： 1左边 -1:右边 2：上 -2:下
function Cell(x,y,d){
//蛇身体的对象
this.x=x;
this.y=y;
this.d=d;
return this;
}

//蛇食物 x y
function Food(x,y){
this.x=x;
this.y=y;
return this;
}

//绘制游戏基本元素
function draw(){
//清空画布
huabi.clearRect(0,0,450,450);

for ( var i = 0; i < 30; i++) {
//画笔的颜色线条颜色
huabi.strokeStyle="#ccc";
//画笔开始画
huabi.beginPath();

//绘制线条的宽度
huabi.lineWidth="X";
//画壁画横线 x y
huabi.moveTo(0, i*width);
//横线滑到什么结束. 画到y为450 时
huabi.lineTo(450,i*width);

//绘制竖线
huabi.moveTo(i*width,0);
//竖线画到什么时候.结束. 画到横下你最大
huabi.lineTo(i*width,450);

//结束画笔工作 --创建从当前点回到起始点的路径
huabi.closePath();
//进行绘制
huabi.stroke();
}
//绘制蛇的身体获取蛇的长度. 蛇吃一个食物.就长一节. 所以这里不是.用我们定义的蛇本身长的变量用数组
/* */
for ( var i = 0; i <snake.length; i++) {
huabi.fillStyle="black";//填充颜色
//蛇的头部. 变个颜色
if(i ==snake.length-1){
huabi.fillStyle="red";
}
//循环是要对蛇身体重新绘制一遍
//开始画
huabi.beginPath();
//画一个区域蛇的x：蛇的长度乘以width 单元格的长度 y也是后面的高宽 rect 创建矩形
huabi.rect(snake[i].x * width, snake[i].y*width,width,width);
//
huabi.closePath();
//填充
huabi.fill();
//开始绘制
huabi.stroke();

}

//绘制食物
drawFood();

//判断是否吃到食物头是否和食物xy 重合 food 随机初始位置
if(head.x==food.x && head.y==food.y){
//食物的坐标
LuisshiWu();
//Food 食物
food=new Food(foodX,foodY);
//调用绘制食物的方法
//drawFood();

//Cell 蛇身体元素
var newCell=new Cell(head.x, head.y,head.d);

switch(head.d){
case 2:newCell.y--; break;//上
case -1:newCell.x++; break;//右
case -2:newCell.y++; break;//下
case 1:newCell.x--; break;//左
}
//把方向给蛇数组和头
snake[snake.length]=newCell;
head=newCell;
}
}

//初始化食物的坐标。随机产生
function LuisshiWu(){
//条件:食物出现的位置不能喝蛇的位置相重叠
// math 返回一个 0到1之间的数.
//maht.ceil(0.1) 0到1之前都返回1 如0.1 或者0.99
foodX=Math.ceil(Math.random() * 28+1);
foodY=Math.ceil(Math.random() * 28+1);

//循环蛇本身的身体的数组 for
for ( var i = 0; i < snake.length; i++) {
//判断 x y 是否重复
//每循环数组的一个数 i 的x y 不重复
if(snake[i].x == foodX && snake[i].y==foodY){
LuisshiWu();//相等继续生成食物递归
}
}
}
//食物
var sw;

//画出食物
function drawFood(){
//调用食物坐标
LuisshiWu();
//food食物
sw=new Food(foodX,foodY);
huabi.fillStyle="green";
huabi.beginPath();

huabi.rect(sw.x *width,sw.y*width,width,width);
huabi.closePath();
huabi.fill();
}
draw();

//监听键盘传一个事件e
/*
onkeypress 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
onkeyup 这个事件在用户放开任何先前按下的键盘键时发生。
onkeydown 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
*/
document.οnkeydοwn=function(e){
//右:39 下:40 左:37 上:38 -37?
var keyCode=e.keyCode -37;
var direction;

switch(keyCode){
case 1:direction=2; break;//上上:38
case 2:direction=-1; break;//右 39
case 3:direction=-2; break;//下 40
case 0:direction=1; break;//左 37
}
//不让蛇往反方向走例如:蛇本身是往上走2 我按了下-2 这样就不等于0 if判断一下不等于0 就控制蛇的方向 38-37 走下再减-2
if(head.d + direction !=0 && keyCode <=3 && keyCode >=0){
//控制蛇的移动方向
moveSnake(direction);
};
};

//移动蛇的方法
function moveSnake(direction){
//临时蛇的数组
var xingShe=[];
var newCell=new Cell(head.x, head.y,head.d);

//循环除头以外的部分
for ( var i = 1; i < snake.length; i++) {
//？
xingShe[i-1]=snake[i];
}
xingShe[snake.length-1]=newCell;
newCell.d=direction;

switch(direction){
case 2:newCell.y--; break; //上
case -1:newCell.x++; break; //右
case -2:newCell.y++; break; //下
case 1:newCell.x--; break; //左
}
snake=xingShe;
head=snake[snake.length-1];
//蛇移动规则
checkDeath();

//当蛇大于50 不减蛇的运行速度
if(sudu>50){
//每吃到一个食物. 速度就减10
sudu=sudu-10;
}
//从新绘制一遍
draw();
}

//蛇自动走
setInterval(moveClock,sudu);//毫秒单位毫秒 1000毫秒=1s

//获取蛇头方向
function moveClock(){
moveSnake(head.d);
}

//判断游戏是否结束
function checkDeath(){
//判断是否出边界
if(head.x>=30||head.y>=30 ||head.x<0 || head.y<0){
alert('Luis_游戏结束 Game Over');
window.location.reload();
}
//判断不能撞到自己的身体
for ( var i = 0; i < snake.length-1; i++) {
if(head.x==snake[i].x && head.y==snake[i].y){
alert('撞到自己的身体了. Game Over');
window.location.reload();
};
};

};

</script>

</body>
</html>

一路走_1212

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5_实现贪吃蛇

Luis_HTML5 贪吃蛇 -->body{background-color: #BDDAD9;}.ha{font-size: 30px; color:#E55179; text-align:center;text-shadow: 5px 5px 5px rgba(0,0,0,1)
复制链接

扫一扫

专栏目录