html5实现贪吃蛇小游戏
2017-08-29 10:11
537 查看
实现技术:h5的canvas+原生js
可直接复制,查看效果
效果图:
可直接复制,查看效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title>html5实现贪吃蛇小游戏</title> <style> #myCanvas { box-shadow: 0 0 6px #000; } </style> </head> <body> <br/><br/><br/> <input type="button" value="开始游戏" onclick="beginGame();"><br/><br/><br/> <canvas id="myCanvas" width="450" height="450"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var w = 15; //格子宽、高 var snaLen = 6; //初始长度 var snake = []; //身体长度 for (var i = 0; i < snaLen; i++) { snake[i] = new cell(i, 0, 39); } var head = snake[snaLen - 1]; //头部 //初始食物 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, 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); // ctx.moveTo(i*w,0); // ctx.lineTo(i*w,450); // ctx.closePath(); // ctx.stroke(); // } //画蛇身 for (var j = 0; j < snake.length; j++) { ctx.fillStyle = "green"; if (j == snake.length - 1) { ctx.fillStyle = "red"; } ctx.beginPath(); ctx.rect(snake[j].x * w, snake[j].y * w, w, w); ctx.closePath(); ctx.fill(); ctx.stroke(); } //出现食物 drawFood(); //吃到食物 if (head.x == food.x && head.y == food.y) { initFood(); food = new Food(foodx, foody); //重新出现食物 drawFood(); //增加蛇的长度 有些小瑕疵,蛇身增长时应该是身体增长,而不是在蛇头上增长 var newCell = new cell(head.x, head.y, head.d); switch (head.d) { case 40: newCell.y++; break; //下 case 39: newCell.x++; break; //右 case 38: newCell.y--; break; //上 case 37: newCell.x--; break; //左 } snake[snake.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 (snake[i].x == foodx && snake[i].y == foody) { initFood(); } } } //画食物 function drawFood() { //绘制食物 ctx.fillStyle = "orange"; ctx.beginPath(); ctx.rect(food.x * w, food.y * w, w, w); ctx.closePath(); ctx.fill(); } draw(); //监听键盘事件 document.onkeydown = function(e) { //下40 , 右边39,左边37,上38 键盘事件 var keyCode = e.keyCode; if (head.d - keyCode != 2 && head.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++) { newSnake[i - 1] = snake[i]; } newSnake[snake.length - 1] = newCell; 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; //左 } snake = newSnake; head = snake[snake.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 == snake[i].x && head.y == snake[i].y) { alert("Game over!"); window.location.reload(); } } } //蛇自动走 function moveClock() { moveSnake(head.d); } var isMove = false; function beginGame() { !isMove && setInterval(moveClock, 300); isMove = true; } </script> </body> </html>
效果图:
相关文章推荐
- 基于HTML5的WebGL实现的2D3D迷宫小游戏
- C++基于控制台实现的贪吃蛇小游戏
- jQuery实现贪吃蛇小游戏(附源码下载)
- 使用C++语言模拟实现贪吃蛇小游戏
- JavaScript+HTML5 实现打地鼠小游戏
- html5之小游戏2048的实现
- [原] html5 canvas 贪吃蛇小游戏~~
- WebGL实现HTML5贪吃蛇3D游戏
- 零基础HTML5游戏制作教程 第6章 贪吃蛇的实现及代码
- 【C】链表实现贪吃蛇小游戏
- 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
- js实现贪吃蛇小游戏(容易理解)
- JavaScript, 实现贪吃蛇小游戏
- Excel下实现贪吃蛇小游戏
- 贪吃蛇小游戏—C++、Opencv编写实现
- 『HTML5实现人工智能』小游戏《井字棋》发布,据说IQ上200才能赢【算法&代码讲解+资源打包下载】
- 用OC语言实现贪吃蛇小游戏
- js实现贪吃蛇小游戏
- C语言程序简单实现贪吃蛇小游戏—不需要graphics.h头文件
- [HTML5实现人工智能]小游戏《井字棋》发布,据说IQ上200才能赢