听说最近HTML5很火~~!---贪吃蛇小游戏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style type="text/css"> *{margin:0;padding: 0;font-family: "Microsoft YaHei";} #page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; } #yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;} #mark{font-weight: 800;} #mark_con{ color: red; } button{width: 50px; } a{text-decoration:none;} </style> <script type="text/javascript"> //伪常量 var BLOCK_SIZE = 20; //格子大小 var COLS = 40; //列数 var ROWS =30; //行数 //变量 var snakes = []; //保存蛇坐标 var c = null; //绘图对象 var toGo = 3; //行进方向 var snakecount = 4; //蛇身数量 var interval = null; //计时器 var foodX = 0; //食物X轴坐标 var foodY = 0; //食物Y轴坐标 var oMark = null; //分数显示框 var isPause = false; //是否暂停 // 绘图函数 function draw(){ c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS); //画出横线 for( var i = 1; i <= ROWS; i++ ) { c.beginPath(); c.moveTo(0, i * BLOCK_SIZE); c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE); c.strokeStyle = "gray"; c.stroke(); } //画出竖线 for(var i = 1; i <= COLS; i++){ c.beginPath(); c.moveTo(i * BLOCK_SIZE, 0); c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS); c.stroke(); } //画出蛇 for (var i = 0; i < snakes.length; i++){ c.beginPath(); c.fillStyle = "green"; c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE); c.moveTo(snakes[i].x, snakes[i].y); c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y); c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE); c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE); c.closePath(); c.strokeStyle = "white"; c.stroke(); } //画出食物 c.beginPath(); c.fillStyle = "yellow"; c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE); c.moveTo(foodX, foodY); c.lineTo(foodX + BLOCK_SIZE, foodY); c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE); c.lineTo(foodX, foodY + BLOCK_SIZE); c.closePath(); c.strokeStyle = "red"; c.stroke(); } //游戏初始化 function start(){ for( var i = 0; i < snakecount; i++){ snakes[i] = {x: i * BLOCK_SIZE, y: 0}; } addFood(); draw(); oMark.innerHTML = 0; } //移动函数 function move(){ switch(toGo){ case 1: //左边 snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y}); break; case 2: //上边 snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE}); break; case 3: //右边 snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y}); break; case 4: //下边 snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE}); break; default:; } snakes.shift(); isEat(); isDie(); draw(); } //吃到食物判断 function isEat(){ if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) { oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString(); addFood(); addSnake(); } } //添加蛇身 function addSnake(){ snakecount++; snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS}); } //交互响应函数 function keydown(keyCode){ switch(keyCode){ case 37: //左边 if(toGo != 1 && toGo != 3) toGo = 1;break; case 38: //上边 if(toGo != 2 && toGo != 4) toGo = 2;break; case 39: //右边 if(toGo != 3 && toGo != 1) toGo = 3;break; case 40: //下的 if(toGo != 4 && toGo != 2) toGo = 4;break; case 80: //开始/暂停 if(isPause){ interval = setInterval(move,100); isPause = false; document.getElementById('pause').innerHTML = "Pause"; }else{ clearInterval(interval); isPause = true; document.getElementById('pause').innerHTML = "Start"; } break; } } //制造食物 function addFood(){ foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE; foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE; // console.log(foodX + " -- " + foodY); } //死亡判断 function isDie(){ if(snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS || snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS){ alert("Game Over!"); clearInterval(interval); } for(var i = 0; i < snakecount - 1; i++){ if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){ clearInterval(interval); alert("Game Over!"); } } } // 启动函数 window.onload = function(){ c = document.getElementById('canvas').getContext('2d'); oMark = document.getElementById('mark_con'); start(); interval = setInterval(move,100); document.onkeydown = function(event){ var event = event || window.event; keydown(event.keyCode); } } </script> </head> <body> <div id="page"> <div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div> <div id="help"> <div id="mark">得分:<span id="mark_con"></span></div> <div id="helper"> <table> <tr> <td></td> <td><button onclick="keydown(38);">上</button></td> <td></td> </tr> <tr> <td><button onclick="keydown(37);">左</button></td> <td><button onclick="keydown(80);" id="pause">暂停</button></td> <td><button onclick="keydown(39);">右</button></td> </tr> <tr> <td></td> <td><button onclick="keydown(40);">下</button></td> <td></td> </tr> </table><a href="index.html">再玩一次</a> </div> </div> </div> <div style="text-align:center;"> </div> </body> </html>

原文发布于微信公众号 - 数据库SQL(SQLdba)

原文发表时间:2015-06-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏智能算法

身份证号码验证算法

来自:旭东的博客 - 博客园 链接:http://www.cnblogs.com/xudong-bupt/p/3293838.html(点击尾部阅读原文前往) ...

3345
来自专栏尾尾部落

[LeetCode] Maximum Depth of Binary Tree

链接:https://leetcode.com/submissions/detail/136407355/ 难度:Easy 题目:104. Maximum ...

634
来自专栏乐沙弥的世界

CASE语句与CASE表达式

case语句与case表达式是plsql流程控制的重要组成部分,尽管其使用方法较为简单,但容易混淆。本文将描述case语句与case表达式并给出演示...

592
来自专栏练小习的专栏

搞来两端模拟自由落体与抛物运动的JS玩

这里有更详细的讲解呵呵 http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 自由...

1858
来自专栏owent

PKU POJ 1141 Brackets Sequence 解题报告

链接: http://acm.pku.edu.cn/JudgeOnline/problem?id=1141 题目意思是输入一些括号,补充括号使之成为没有错误的...

522
来自专栏owent

GCD Determinant 解题报告

http://www.cn210.com/onlinejudge/problemshow.php?pro_id=98

642
来自专栏有趣的Python

py编程技巧-1.5-如何快速找到多个字典的公共键(key)

实际案例: 足球联赛,对于每轮球员的进球进行统计: 第一轮:{'梅西':2,'本泽马':1,'C罗':3} 第二轮:{'梅西':4,'格里兹曼':1,'...

2608
来自专栏菩提树下的杨过

Flash/Flex学习笔记(50):3D线条与填充

3D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个小球连接起来即可。 var balls:Array; var numBalls:uint=30; v...

1918
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

654
来自专栏Small Code

MATLAB绘制平行六面体

如果给出一个平行六面体(甚至其他多面体)的各个顶点坐标,如何画出这个平行六面体。 在网上找了找方法,可以参考这篇博客 matlab中patch函数详解。然后我具...

1898

扫描关注云+社区