介绍 <李> <李> <李> <李> <李> <李> & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
& lt; style>
#帆布{
不必:0 5 px 40 px黑色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;帆布id=癱anvas"宽度=?00”;身高=?00“祝辞& lt;/canvas>
& lt;/body>
& lt; script>
画布var=. getelementbyid(& # 39;帆布# 39;);
var=canvas.getContext上下文(& # 39;2 d # 39;);//构造对象方块
函数矩形(x, y, w, h,颜色){
这一点。x=x;
这一点。y=y;
这一点。w=w;
这一点。h=h;
这一点。颜色=颜色;
}//画方块的方法
Rect.prototype。画=function () {
context.beginPath ();
上下文。fillStyle=this.color;
context.rect (this.x this.y、this.w this.h);
context.fill ();
context.stroke ();
}//构造对象蛇
函数蛇(){//定义一个空数组存放组成整蛇的方块对象
var snakeArray=[];//画出4个方块,设置成灰色
(var=0;我& lt;4;我+ +){
var矩形=new矩形(20 * 20 0,20日,“gray");//之所以用拼接(往前加)而不是用推(往后加),是为了让蛇头出现在数组第一个位置
snakeArray.splice(0, 0,矩形);
}//把数组第一个作为蛇的头,蛇头设成红色
var头=snakeArray [0];
头。颜色=皉ed";//此处将两个后面常用的东西定为属性,方便后面调用
这一点。头=snakeArray [0];//蛇头
这一点。snakeArray=snakeArray;//整蛇数组//给定初始位置向右(同键码右箭头)
这一点。方向=39;
}//画蛇的方法
Snake.prototype。画=function () {
(var=0;我& lt;this.snakeArray.length;我+ +){
this.snakeArray[我]却是();
}
}//蛇移动的方法
Snake.prototype。移动=function () {//此处是核心部分,蛇的移动方式//1,画一个灰色的方块,位置与蛇头重叠//2,将这个方块插到数组中蛇头后面一个的位置//3、砍去末尾的方块//4,将蛇头向设定方向移动一格
var矩形=new矩形(this.head.x、this.head.y this.head.w, this.head.h,“gray");
this.snakeArray.splice(1,0,矩形);//判断是否吃到食物,isEat判定函数写在最后了//吃到则食物重新给位置,不砍去最后一节,即蛇变长//没吃到则末尾砍掉一节,即蛇长度不变
如果(isEat ()) {
食物=new getRandomFood ();
其他}{
this.snakeArray.pop ();
}//设置蛇头的运动方向,37左,上,右,40下
开关(this.direction) {
例37:
this.head。x -=this.head.w
打破;
例38:
this.head。y -=this.head.h
打破;
例39:
this.head。x +=this.head.w
打破;
例40:
this.head。y +=this.head.h
打破;
默认值:
打破;
}//游戏结束判定//撞墙
如果(this.head。x比;画布。宽度| | this.head。x & lt;0 | | this.head。y比;画布。高度| | this.head。y & lt;0){
clearInterval(计时器);
}//撞自己,循环从1开始,避开蛇头与蛇头比较的情况
(var i=1;我& lt;this.snakeArray.length;我+ +){
如果(this.snakeArray[我]。x==this.head。x和,this.snakeArray[我]。y==this.head.y) {
clearInterval(计时器);
}
}
}//画出初始的蛇
蛇蛇var=new ()
snake.draw ();//画出初始的食物
var=new getRandomFood食物()//定时器
var计时器=setInterval(函数(){
context.clearRect (0, 0, canvas.width canvas.height);
food.draw ();
snake.move ();
snake.draw ();
},100)//键盘事件,其中的如果判定是为了让蛇不能直接掉头
文档。onkeydown=function (e) {
var ev=e | | window.event;
开关(ev.keyCode) {
例37:{
如果蛇。方向!==39){
蛇。方向=37;
}
打破;
}
例38:{
如果蛇。方向!==40){
蛇。方向=38;
}
打破;
}
例39:{
如果蛇。方向!==37){
蛇。方向=39;
}
打破;
}
例40:{
如果蛇。方向!==38){
蛇。方向=40;
}
打破;
}
}
ev.preventDefault ();
}//随机函数,获得(最小,最大)范围的值
函数getNumberInRange(最小,最大){
var=不等式性质;
var r=math . random ();
返回Math.round (r *范围+分钟)
}//构建食物对象
函数getRandomFood () {//判定食物是否出现在蛇身上,如果是重合,则重新生成一遍
var isOnSnake=true;//设置食物出现的随机位置
而(isOnSnake) {//执行后先将判定条件设置为假,如果判定不重合,则不会再执行下列语句
isOnSnake=false;
var indexX=getNumberInRange (0, canvas.width/20:1);
var indexY=getNumberInRange (0, canvas.height/20:1);
var矩形=new矩形(indexX * 20日indexY * 20日20日20日“green");
(var=0;我& lt;snake.snakeArray.length;我+ +){
如果(snake.snakeArray[我]。x==rect.x,,snake.snakeArray[我]。y==rect.y) {//如果判定重合,将其设置为真,使随机数重给
isOnSnake=true;
打破;
}
}
}//返回矩形,使得实例化对象食物有画的方法
返回矩形;
}//判定吃到食物,即蛇头坐标与食物坐标重合
函数isEat () {
如果(snake.head。x==食物。x和,snake.head。y==food.y) {
返回true;
其他}{
返回错误;
}
}
& lt;/script>
null
这篇文章主要介绍了H5画布中如何实现贪吃蛇小游戏,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
<强>实现思路:
ps:这个只是思路,详细可看代码注释
<强>一,先把蛇画出来
定义一下蛇的结构,用一个数组保存一堆矩形,包含蛇头(红)和蛇身(灰)。
<李>画蛇(初始状态)
<强>二,蛇能动(重点)
蛇移动方式:自始至终都只有蛇头在动
画一个灰色的方块,位置与蛇头重叠
<李>将这个方块插到数组中蛇头后面一个的位置arrar.splice(0, 1,矩形)
<李>砍去末尾的方块array.pop ()
<李>将蛇头向设定方向移动一格
<李>需要一个保存方向的变量(方向)
<李>根据方向进行移动,一次移动一个格
<李>根据按键改方向
<强>三,随机投放食物
需要随机食物的位置
<李>需要判断食物在不在蛇身上。
<强>四、吃食物
判断食物是否与蛇头重叠
<李>数组加一个元素(少删除一个元素就是加一个元素)
<李>生成新的食物
<强>五,败阵
撞墙判定
<李>装自己判定
