html5实现贪吃蛇源代码_第1页
html5实现贪吃蛇源代码_第2页
html5实现贪吃蛇源代码_第3页
免费预览已结束，剩余4页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">#myCanvasborder:1px solid #f00;</style></head><body><input type="button" value="开始游戏 " onclic

2、k="beginGame();" /><canvasid="myCanvas" width="450" height="450"></canvas></body><script type="text/javascript">var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var w =

3、15;/格子宽、高var snaLen = 6; /初始长度var snake = ; /身体长度for(var i = 0; i < snaLen; i+)snakei = new cell(i , 0 , 39);var head = snakesnaLen - 1; /头部1 / 7/ 初始食物var foodx = Math.ceil(Math.random() * 28 + 1);var foody = Math.ceil(Math.random() * 28 + 1);var food = new Food(foodx , foody);/ 食物function Food(x

4、 , y)this.x = x;this.y = y;return this;/ 身体function cell(x , y , d)this.x = x;this.y = y;this.d = d;return this;/ 动作function draw()ctx.clearRect(0,0,450,450);/ 画布局/for(var i = 0; i < 30; i+)/ctx.strokeStyle = "#ccc"/线条颜色/ctx.beginPath();/ctx.moveTo(0,i*w);/ctx.lineTo(450,i*w);2 / 7/ctx.

5、moveTo(i*w,0);/ctx.lineTo(i*w,450);/ctx.closePath();/ctx.stroke();/ 画蛇身for(var j = 0; j < snake.length; j+)ctx.fillStyle = "black"if(j = snake.length - 1)ctx.fillStyle = "red"ctx.beginPath();ctx.rect(snakej.x*w , snakej.y*w , w , w);ctx.closePath();ctx.fill();ctx.stroke();/ 出现

6、食物drawFood();/ 吃到食物if(head.x = food.x && head.y = food.y)initFood();food = new Food(foodx , foody);/ 重新出现食物drawFood();/ 增加蛇的长度有些小瑕疵，蛇身增长时应该是身体增长，而不是在蛇头上增长3 / 7var newCell = new cell(head.x , head.y , head.d);switch(head.d)case 40: newCell.y+ ; break;/下case 39: newCell.x+ ; break;/右case 38: n

7、ewCell.y- ; break;/上case 37: newCell.x- ; break;/左snakesnake.length = newCell;head = newCell;/head =/ 随机初始化食物function initFood()foodx = Math.ceil(Math.random() * 28 + 1);foody = Math.ceil(Math.random() * 28 + 1);for(var i = 0; i < snake.length; i+)if(snakei.x = foodx && snakei.y = foody)i

8、nitFood();/ 画食物function drawFood()/ 绘制食物ctx.fillStyle = "blue"ctx.beginPath();ctx.rect(food.x * w , food.y * w , w , w);4 / 7ctx.closePath();ctx.fill();draw();/ 监听键盘事件document.onkeydown = function(e)/ 下 40 ， 右边 39，左边 37，上 38 键盘事件var keyCode = e.keyCode;if(head.d - keyCode != 2 && h

9、ead.d - keyCode != -2 && keyCode >=37 && keyCode <=40)moveSnake(keyCode);/ 控制蛇移动方向function moveSnake(keyCode)var newSnake = ;var newCell = new cell(head.x , head.y , head.d);/头/ 身体for(var i = 1; i < snake.length ; i+)newSnakei - 1 = snakei;newSnakesnake.length - 1 = newCell;

10、newCell.d = keyCode;switch(keyCode)case 40: newCell.y+ ; break;/下case 39: newCell.x+ ; break;/右case 38: newCell.y- ; break;/上case 37: newCell.x- ; break;/左5 / 7snake = newSnake;head = snakesnake.length - 1;checkDeath();draw();/ 游戏规则function checkDeath()/ 超出边框if(head.x >= 30 | head.y>= 30 | head.x < 0 | head.y < 0)alert("Game over!");window.location.reload();/ 咬到自己for(var i = 0 ; i < snake.length - 1 ; i+)if(head.x = snakei.x && head.y = snakei.y)alert("Game

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论