贪吃蛇(js小游戏)
来源:互联网 发布:课时统计软件app 编辑:程序博客网 时间:2024/03/28 16:48
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贪吃蛇重构</title> <style> body { display: flex; height: 100vh; margin: 0; padding: 0; justify-content: center; align-items: center; } </style></head><body> <canvas id="can" width="400" height="400" style="background-color: black">对不起,您的浏览器不支持canvas</canvas> <script> var snake = [41, 40], //snake队列表示蛇身,初始节点存在但不显示 direction = 1, //1表示向右,-1表示向左,20表示向下,-20表示向上 food = 43, //食物的位置 n, //与下次移动的位置有关 box = document.getElementById('can').getContext('2d'); //从0到399表示box里[0~19]*[0~19]的所有节点,每20px一个节点 function draw(seat, color) { box.fillStyle = color; box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18); //用color填充一个矩形,以前两个参数为x,y坐标,后两个参数为宽和高。 } document.onkeydown = function(evt) { //当键盘上下左右键摁下的时候改变direction direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n; }; !function() { snake.unshift(n = snake[0] + direction); //此时的n为下次蛇头出现的位置,n进入队列 if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) { //if语句判断贪吃蛇是否撞到自己或者墙壁,碰到时返回,结束程序 return alert("GAME OVER!"); } draw(n, "lime"); //画出蛇头下次出现的位置 if(n == food) { //如果吃到食物时,产生一个蛇身以外的随机的点,不会去掉蛇尾 while (snake.indexOf(food = ~~(Math.random() * 400)) > 0); draw(food, "yellow"); } else { //没有吃到食物时正常移动,蛇尾出队列 draw(snake.pop(),"black"); } setTimeout(arguments.callee, 150); //每隔0.15秒执行函数一次,可以调节蛇的速度 }(); </script></body></html>
阅读全文
0 0
- JS-贪吃蛇小游戏
- js贪吃蛇小游戏
- 贪吃蛇(js小游戏)
- js小游戏----贪吃蛇
- js实现贪吃蛇小游戏
- js jq 贪吃蛇小游戏
- JS实现贪吃蛇小游戏
- js实现贪吃蛇小游戏
- JS小游戏贪吃蛇+详细注释
- JS小游戏贪吃蛇+细致注释
- js实现的贪吃蛇的小游戏
- js写的贪吃蛇小游戏
- JS小游戏贪吃蛇+详细注释
- 原生JS实现传统贪吃蛇小游戏
- JS实现简单的贪吃蛇小游戏
- js--贪吃蛇小游戏(加墙)
- JS事件初试-贪吃蛇小游戏
- 基于JS、canvas的小游戏--贪吃蛇
- SSD: Single Shot MultiBox Detector
- tf.transpose函数的用法
- 安卓反编译入门(二)
- Ubuntu安装Anaconda
- java7新特性(转载)
- 贪吃蛇(js小游戏)
- 2017.05.27【提高组】模拟赛B组
- 浏览器加载网络图片
- 关于jQuery的小项目
- 人民币冠字号码识别
- 题目1012:畅通工程(浙大)
- |BZOJ 1649|二维背包|[Usaco2006 Dec]Cow Roller Coaster
- request中getParameter和getAttribute的区别
- gridview绑定linqdatasource后获取gridview中的字段