html5 canvas+js贪吃蛇网页小游戏代码

注解都在代码里了,自己理解吧

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html5 canvas+js贪吃蛇网页小游戏代码</title><style>canvas{ border: 1px solid #000000;}
</style></head>
<body><canvas width="980" height="600" id="canvas"></canvas><script>//初始化变量var foods = new Array();    //存放食物坐标var gameover = false; //游戏结束var gridWidth = 10;  //正方形长度var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");  //构建画布//食物定时器、蛇定时器、场景、蛇对象var food_interval,snake_interval,Farm,Snake;//方格对象function node(x,y,w){var self = this;self.x = x;self.y = y;self.w = w;//食物初始化self.foodInit = function(){ctx.fillStyle = "#FF0000";ctx.fillRect(self.x,self.y,self.w,self.w);}//蛇的初始化self.snakeInit = function(){ctx.fillStyle = "#000000";ctx.strokeStyle = "#FFFFFF";ctx.fillRect(x,y,w,w);ctx.strokeRect(x,y,w,w);}//判断两个方块是否重合self.equals = function(node){if(self.x == node.x && self.y == node.y){return true;}else{return false;}}//清除格子  让格子跟背景颜色一样self.clear = function(){ctx.fillStyle = "#E8FFFF";ctx.strokeStyle = "#E8FFFF";ctx.fillRect(x,y,w,w);ctx.strokeRect(x,y,w,w);}}  //创建场景对象function farm(){//保存作用域var self = this;ctx.fillStyle = "#E8FFFF"; //填充的场景颜色ctx.fillRect(0,0,canvas.width,canvas.height);//增加食物的方法self.addFood = function(){if(gameover){return gameOver(); //游戏结束方法}else{//计算随机位置var x = parseInt(canvas.width/gridWidth*Math.random())*gridWidth;var y = parseInt(canvas.height/gridWidth*Math.random())*gridWidth;//实例化一个方格对象var food = new node(x,y,gridWidth);//得到对象之后，要把食物画到界面上面food.foodInit();//追加到数组里面foods.push(food);}}}//蛇对象function snake(x,y,len,speed){var self = this;self.init = function(){self.len = len; //身体长度self.nodes = new Array(); //蛇的身体数组self.dir = "R"; //方向self.speed = speed; //速度//从右往左，逐格把蛇画出来var nx =x ,ny=y; //蛇的坐标点for(var i=0;i<len;i++){//创建一个方格对象var tmpNode = new node(nx,ny,gridWidth);//把蛇的身体存放起来self.nodes[i] = tmpNode;//存放完了之后，把蛇画出来tmpNode.snakeInit();nx -= gridWidth; //往左边画 }//让蛇动起来定时器snake_interval = setInterval(self.move,self.speed);//给蛇绑定方向按键document.onkeydown = function(e){//按键的值var code = e.keyCode;//记录一下旧的方向self.odir = self.dir;switch(code){//一组方向键 一组字母 WASDcase 65:self.dir = "L";break;case 87:self.dir = "U";break;case 68:self.dir = "R";break;case 83:self.dir = "D";break;case 37:self.dir = "L";break;case 38:self.dir = "U";break;case 39:self.dir = "R";break;case 40:self.dir = "D";break;}}}//蛇移动方法self.move = function(){var len = self.len; //获取蛇的身体长度var head = self.nodes[0];//头部switch(self.dir){//右边case "R":if(head.x + head.w >=canvas.width){//撞墙return gameOver();}else{//新的头部var newHead = new node(head.x+head.w,head.y,head.w);}break;//左边case "L":if(head.x - head.w < 0){//撞墙return gameOver();}else{//新的头部var newHead = new node(head.x-head.w,head.y,head.w);}break;case "U":if(head.y -head.w < 0){//撞墙return gameOver();}else{//新的头部var newHead = new node(head.x,head.y-head.w,head.w);}break;case "D":if(head.y + head.w >= canvas.height){//撞墙return gameOver();}else{//新的头部var newHead = new node(head.x,head.y+head.w,head.w);}}//禁止运行反方向if(self.nodes[1].equals(newHead)){self.dir = self.odir;return false;}///禁止穿过自身，否则gameoverfor(var i=0;i<self.len;i++){if(self.nodes[i].equals(newHead)){return gameOver();}}//初始化为蛇头newHead.snakeInit();//同时把蛇尾去掉self.nodes[self.len-1].clear();//将数组中的最后一个元素删除self.nodes.pop();//蛇身向前走for(var i=len-1;i>0;i--){self.nodes[i] = self.nodes[i-1];}//干掉蛇的尾部 其余部分往后篡位 把头部空出来 让newHead塞进去self.nodes[0] = newHead;//判断是否吃到食物for(var i=0;i<foods.length;i++){//让数组中的每个食物跟头部判断是否重合if(foods[i].equals(newHead)){//给蛇增加身体长度self.addNode();foods.pop(newHead); //foods[i]//调整速度 越来越快self.speed = self.speed>20?self.speed-10:self.speed;//调完速度要重新设置定时器clearInterval(snake_interval);snake_interval = setInterval(Snake.move,self.speed);break;}}}//给蛇身体添加长度self.addNode = function(){var tail1 = self.nodes[self.len-1]; //倒数第一个var tail2 = self.nodes[self.len-2]; //倒数第二个if(tail1.x == tail2.x){//上下方向var addNode;if(tail1.y > tail2.y){//往上addNode = new node(tail1.x,tail1.y+gridWidth,gridWidth);}else{//往下addNode = new node(tail1.x,tail1.y-gridWidth,gridWidth)}}else{//左右方向if(tail1.x > tail2.x){//往左addNode = new node(tail1.x+gridWidth,tail1.y,gridWidth)}else{//往右addNode = new node(tail1.x-gridWidth,tail1.y,gridWidth)}}//新的身体画出来addNode.snakeInit();//将新的身体放到蛇的数组里面self.nodes[self.len] = addNode;self.len +=1; //把身体长度加一}}//游戏结束function gameOver(){gameover = true; //停止添加食物和蛇的跑动clearInterval(snake_interval);clearInterval(food_interval);var res = confirm("游戏结束，是否重新开始");if(res){gameStart();}}//游戏开始function gameStart(){foods = new Array();    //清空存放食物坐标gameover = false;//初始化场地Farm = new farm();//添加定时器，定时增加食物 每隔3秒钟出一个食物food_interval = setInterval(Farm.addFood,50);//初始化一条蛇出来Snake = new snake(200,200,5,150);Snake.init();}gameStart();
</script></body>
</html>

html5 canvas+js贪吃蛇网页小游戏代码相关推荐

贪食蛇php,贪吃蛇网页小游戏的代码
贪吃蛇网页小游戏的代码 ::selection { color:#FFFFFF; background:transparent; } ::-moz-selection { color:#FFFFFF; ...
用前端技术实现贪吃蛇的小游戏
用前端技术实现贪吃蛇的小游戏前言游戏功能游戏设计游戏主页代码游戏中的js代码(snake.js) 游戏运行界面前言周末大热天窝在家里无聊,想温习一下前端开发,所以用javascript ...
php 教师批改作业代码,html5 canvas做批改作业的小插件代码示例
本篇文章小编给大家分享一下html5 canvas做批改作业的小插件代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 需求分析能进行批改,就是相当 ...
贪吃蛇c语言游戏中会出现障碍物,贪吃蛇C语言游戏代码.doc
贪吃蛇C语言游戏代码 //开始编写游戏需要的类 #include //EasyX_2011惊蛰版(绘图库) #include #include #include #define UP1 #define ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...
html5 接东西游戏,html5手机触屏接红包小游戏代码
特效描述:html5手机触屏接红包小游戏.canvas 红包下落点击接住红包,结束计算金额及红包个数.请用手机扫码打开正常演示. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 fu ...
C语言跳过障碍物小游戏,html5飞翔的小鸟越过障碍物小游戏代码
一款简单好玩的html5 canvas飞翔的小鸟越过障碍物小游戏代码,玩法:点击鼠标控制小鸟飞行. 查看演示下载资源: 11 次下载资源下载积分: 30 积分 js代码 var cvs = do ...
基于html5贪吃蛇小游戏,使用HTML5 Canvas制作贪吃蛇小游戏
近重要在研究OAuth2,等demo完成了,会给大家来一个专题分享. 看到我身边的一个同事在玩蛇蛇争霸感觉蛮有意思的,这里找了一个贪吃蛇的游戏分享给大家. 按理说canvas与其应用是老生常谈 ...
隐藏窗口 java swing_Java简单实现贪吃蛇经典小游戏（附源代码）
在我们学习java的时候,为了提高我们的兴趣,我们经常会使用所学到的知识去做一些小游戏,这篇blog就介绍了一个经典而且好理解的小游戏-贪吃蛇. 一.使用知识 Jframe GUI 双向链表线程二 ...
在家用c++实现贪吃蛇——c++小游戏
伪代码: 地图为二位数组 int main(){ 死循环刷新地图生成水果获取键盘移动头部判定死亡.吃到水果 if(没有吃到水果) {移动尾部 } 等待指定秒数清屏 } 首先,我们因该可以把 ...

html5 canvas+js贪吃蛇网页小游戏代码

html5 canvas+js贪吃蛇网页小游戏代码相关推荐

最新文章

热门文章