js 贪吃蛇游戏
来源:互联网 发布:mac升级flash插件 编辑:程序博客网 时间:2024/03/28 17:30
今天突然想到可以改变背景色来实现动态效果
因为之前用的C#.GUI 绘画过贪吃蛇,所以就试做用js做 了一个
类似的东东,(最近也是在学js......)
好了,我们先来看看运行效果吧:
界面大概就这样了,很难看,我知道 ,我审美都畸形的..呵呵呵 ,这不是关键
再看看js代码:
<script src="../JS/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> //* //背景颜色 BackColor //蛇的颜色 SnakeColor //食物的颜色 FoodColor var BackColor = "#CCF"; var SnakeColor="#000"; var FoodColor = "red"; var speed = 100;//移动速度 var Are_X = 40, Are_Y = 40; var snake = new Array(); var pos_y = 1,pos_x = 7;//Snake的头的位值 x=7,y=1 var snakelength = 5; //Snake的长 var ini_length=5;//蛇的初始长度' var keynum = 39; //记录当前的方向 var timer = null; var food_Exit = false;//食物是否吃掉 吃掉为false var food_pos=null;//记录食物产生的当前位置 $(document).ready(function () { CreateGrid(); ini_snake(); Random_Food(); $("body").bind("keypress", function (event) { if (timer == null) { timer = setInterval("Snake()", speed); } var key = event.keyCode; if (key == 0) { key = event.which; } if (key >= 37 & key <= 40) { //控制方向 if (Math.abs(key - keynum) == 1) { keynum = key; } else { if (keynum == 37 & key != 39) keynum = key; if (keynum == 40 & key != 38) { keynum = key; } } } }); }); //用计时器移动snake function Snake() { switch (keynum) { case 37: Move_left(); paintsnake(); break; case 38: Move_up(); paintsnake(); break; case 39: Move_right(); paintsnake(); break; case 40: Move_down(); paintsnake(); break; } } //初始化一条小蛇 function ini_snake() { $("#mySnaketable tr td").css("background-color", BackColor); for (var i = 0; i < snakelength; i++) { var head = $("#mySnaketable tr td").get(pos_y * 40 + pos_x - i); head.style.background = SnakeColor; snake[i] = pos_y.toString() + "," + (pos_x - i).toString(); } } function paintsnake() { $("#mySnaketable tr td").css("background-color", BackColor); for (var i = 0; i < snakelength; i++) { var y = parseInt(snake[i].split(',')[0]); var x = parseInt(snake[i].split(',')[1]); if (y >= 40 || x >= 40 || y < 0 || x < 0) { alert("Game Over! 您得:" + (snakelength - ini_length).toString()+"分- -!"); Ini_Data(); break; } var tr = $("#mySnaketable tr"); tr[y + 1].cells[x].style.background = SnakeColor; //画出食物来 if (food_Exit == true) { var y = parseInt(food_pos.split(',')[0]); var x = parseInt(food_pos.split(',')[1]); var tr = $("#mySnaketable tr"); tr[y + 1].cells[x].style.background =FoodColor; } } } //初始化数据 function Ini_Data() { clearInterval(timer); snake = new Array(); snakelength = 5; //Snake的长 keynum = 39; //记录当前的方向 ini_snake(); Random_Food(); timer = null; } //改变蛇节点坐标 function Init_AllDot() { for (var i = snakelength - 1; i > 0; i--) { snake[i] = snake[i - 1]; } } //向右移动 function Move_right() { Init_AllDot(); var y = parseInt(snake[0].split(',')[0]); var x = parseInt(snake[1].split(',')[1]); snake[0] = y.toString() + "," + (x + 1).toString(); if (snake[0] == food_pos) { snakelength += 1; food_Exit = false; //吃掉食物,产生下一个食物 food_pos = null; Random_Food(); } } //向下移动 function Move_down() { Init_AllDot(); var y = parseInt(snake[0].split(',')[0]); var x = parseInt(snake[1].split(',')[1]); snake[0] = (y + 1).toString() + "," + (x).toString(); if (snake[0] == food_pos) { snakelength += 1; food_Exit = false; //吃掉食物,产生下一个食物 food_pos = null; Random_Food(); } } //向上移动 function Move_up() { Init_AllDot(); var y = parseInt(snake[0].split(',')[0]); var x = parseInt(snake[1].split(',')[1]); snake[0] = (y - 1).toString() + "," + (x).toString(); if (snake[0] == food_pos) { snakelength += 1; food_Exit = false; //吃掉食物,产生下一个食物 food_pos = null; Random_Food(); } } //向左移动 function Move_left() { Init_AllDot(); var y = parseInt(snake[0].split(',')[0]); var x = parseInt(snake[1].split(',')[1]); snake[0] = (y).toString() + "," + (x - 1).toString(); if (snake[0] == food_pos) { snakelength += 1; food_Exit = false; //吃掉食物,产生下一个食物 food_pos = null; Random_Food(); } } //产生随即食物 function Random_Food() { while (true) { var rx = Math.floor(Math.random() * (Are_X - 1) + 1); var ry = Math.floor(Math.random() * (Are_Y - 1) + 1); var pos = ry.toString() + "," + rx.toString(); if (!isUse(pos)) { var tr = $("#mySnaketable tr"); tr[ry + 1].cells[rx].style.background = FoodColor; food_pos = pos; food_Exit = true; break; } } } function isUse(pos) { for (var i = 0; i < snake.length; i++) { if (snake[i] == pos) { return true; } } return false; } function CreateGrid() { $("body").append("<div id='mySnakediv' align='center' style='padding:50px;'></div>"); $("#mySnakediv").append("<table id='mySnaketable' cellpadding='1' cellspacing='1' border='5' style='border-collapse: collapse;border-color: Gray;border-style:ridge;'></table>"); // $("#mySnaketable").addClass("tb"); $("#mySnaketable").append("<tr><th colspan='40' align='center' style='background-color:Blue'>40*40的格子</th></tr>"); for (var i = 0; i < 40; i++) { $("#mySnaketable").append("<tr id='" + i + "'></tr>"); for (var j = 0; j < 40; j++) { $("#" + i.toString()).append("<td style='width: 10px;height: 10px;border-color:Silver;border-style:ridge;'></td>"); } } } </script>
自己还写了一点点css,小小的控制一下样式:
HTML代码倒没写什么
js中还是少了一样,就是射自己跟自己相交致死,这个我没弄,有兴趣的朋友要可以去搞搞..
- js 贪吃蛇游戏
- JS贪吃蛇游戏
- JS游戏贪吃蛇
- js贪吃蛇游戏代码
- js原生贪吃蛇游戏
- Js实现贪吃蛇游戏
- 用JS实现贪吃蛇游戏
- 贪吃蛇游戏实战学习JS
- 贪吃蛇游戏实战学习JS
- JS 贪吃蛇 游戏开发视频教程
- canvas+js实现贪吃蛇游戏
- 利用Canvas+js编写贪吃蛇游戏
- HTML5 + js 贪吃蛇游戏设计与实现
- [javascript]HTML+CSS+JS实现的贪吃蛇游戏
- 原生js写的贪吃蛇网页版游戏
- Cocos2d-js 贪吃蛇实战项目,H5游戏开发
- 学习1-js开发实现简单贪吃蛇游戏
- html5 js 贪吃蛇游戏(基于面向对象)
- 开学了
- 数学模型——线性规划问题
- 【整理】1、C网和G网双模手机是否可同时支持C网和G网上网?2、上网的同时是否可以打电话?3、呼叫等待和呼叫保持的概念与“双通”手机
- Jquery,Ajax代码
- 串口资料
- js 贪吃蛇游戏
- 英雄联盟 无法登陆
- Sql Server 2008 之 Merge
- 七夕夜、离别,涵情经河岸
- ORA-12514 TNS 监听程序当前无法识别连接描述符中请求的服务
- 如何操作Excel模板,往Excel模板中写入数据
- android 之button 屏幕翻转
- 简易分页类
- About Memory leak