juery实现贪吃蛇的游戏
今天用juery做了一个贪吃蛇的游戏，代码比较简陋，不过作为这些天学习juery的成果，非常有成就感。另外关于代码内容如有雷同不胜荣幸。
更改了下 让头和身子的颜色不一样 这样好区分些，虽然还是不怎么好看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
#all_show{
text-align: center;
margin:0 auto;
width: 1200px;
height: 100%;
}
#top{
width:100%
}
.c_blue{
background-color: blue;
}
.c_red{
background-color: red;
}
.c_black{
background-color: #000000;
}
#content td{
width:5px;
height: 5px;
}
#content{
margin-top: 50px;;
borderr-color:green;
width:100%;
}
</style>
<script type="text/javascript">
var r_tr=$("<tr>");
var r_td = $("<td>");
var all_ele = new Array();
var start_ele;
var last_key_val=3;
var key_val=3;
var cols = 0;
var tcs_time=1000;
var tcs_mov_con;
//正常前进事件 nele 为新的元素
function normal_t(nele ,flag){
if(!flag){
$(all_ele[all_ele.length-1]).removeClass();
all_ele.pop();
}
nele.removeClass()
all_ele.reverse()
all_ele.push(nele)
nele.addClass("c_red")
//nele.addClass("c_blue")
//为开始的元素赋值
start_ele =nele
all_ele.reverse();
if(all_ele.length > 1){
all_ele[1].removeClass();
all_ele[1].addClass("c_blue");
}
if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){
build_tag($("#tcs>tbody td").not("td[class*=c_]")).addClass("c_black");
} }
//放入一个juery对象随机返回一个juery对象
function build_tag(source){
return $(source).eq(parseInt(Math.random()*($(source).size())));
}
//动起来根据key_val 选择下一个元素
function tcs_next_ele(next_val){
if(next_val == 1){
return $(start_ele).prev();
}else if(next_val == 2){
return $("#"+(parseInt($(start_ele).prop("id"))-cols))
}else if(next_val == 3){
return $(start_ele).next();
}else if(next_val == 4){
return $("#"+(parseInt($(start_ele).prop("id"))+cols))
}
}
//对取到的值验证
function tcs_check_ele(keyvalue){
var next_ele = tcs_next_ele(keyvalue)
if($(next_ele).prop("id") == undefined ){
return false
}else{
if($(next_ele).hasClass("c_black")){
normal_t($(next_ele),true)
}else if($(next_ele).hasClass("c_blue")){
//当回头时 让他继续往前
if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){
key_val=last_key_val;
if(keyvalue == last_key_val){
return false;
}else {
return tcs_check_ele(last_key_val)
}
}else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){
return false
}
normal_t($(next_ele),false)
}else{
normal_t($(next_ele),false)
}
}
return true;
}
//执行 游戏入口
function tcs_move(){
if(!tcs_check_ele(key_val)){
alert("游戏结束")
return ;
}
tcs_mov_con =setTimeout("tcs_move()",tcs_time)
}
$(function(){
//初始化
function tcs_init(){
all_ele.length=0;
start_ele = undefined;
//初始化表格
if($("#top #time").val() != "")
tcs_time = $("#top #time").val();
$("#tcs>tbody td").removeClass()
}
//开始前准备
function tcs_start_init(){
var start_id = parseInt((b_r)/2)*b_c+parseInt(b_c/2);
start_ele = $("#"+start_id.toString())
start_ele.addClass("c_red")
all_ele.push(start_ele)
build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black");
}
$("#top :button:eq(0)").click(function () {
$("#tcs>tbody").empty()
tcs_init()
b_r = $("#top #rows").val();
b_c = $("#top #cols").val();
cols = parseInt(b_c);
//生成表单
var num = 1;
for(var i = 0; i < b_r ; i ++ ){
var btr = r_tr.clone();
for(var j = 0 ; j < b_c ; j ++ ){
var btd = r_td.clone();
btd.prop("id",num);
btd.appendTo(btr);
num++
}
btr.appendTo($("#tcs>tbody"))
}
//生成起点
})
$("#top :button:eq(1)").click(function(){
//动起来
if($(this).val()=="开始游戏"){
tcs_init()
tcs_start_init()
tcs_move()
$(this).val("重新开始")
}else{
if(tcs_mov_con != undefined){
clearTimeout(tcs_mov_con)
}
tcs_init()
$(this).val("开始游戏")
}
})
$(document).keydown(function (event){
var ab = event.keyCode-36
if(ab < 5 && ab > 0){
if(key_val != ab){
last_key_val = key_val;
key_val=parseInt(ab);
}
}
})
})
</script>
</head>
<body>
<div id="all_show">
<div id = "top" >
<table >
<tr>
<td>行数：</td>
<td><input id="rows" type="text"></td>
<td>列数：</td>
<td><input id="cols" type="text"></td>
<td>时间：</td>
<td><input id="time" type="text"></td>
</tr>
<tr>
<td><input type="button" value="生成表格"></td>
<td><input type="button" value="开始游戏"></td>
</tr>
</table>
</div> <div id="content">
<table id="tcs" border="1px"cellspacing="1" cellpadding="1">
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
修改了下让它可以在碰壁后从另一侧出来
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
#all_show{
text-align: center;
margin:0 auto;
width: 1200px;
height: 100%;
}
#top{
width:100%
}
.c_blue{
background-color: blue;
}
.c_red{
background-color: red;
}
.c_black{
background-color: #000000;
}
#content td{
width:5px;
height: 5px;
}
#content{
margin-top: 50px;;
borderr-color:green;
width:100%;
}
</style>
<script type="text/javascript">
var r_tr=$("<tr>");
var r_td = $("<td>");
var all_ele = new Array();
var start_ele;
var last_key_val=3;
var key_val=3;
var cols = 0;
var tcs_time=1000;
var tcs_mov_con;
var b_c
var b_r
//正常前进事件 nele 为新的元素
function normal_t(nele ,flag){
if(!flag){
$(all_ele[all_ele.length-1]).removeClass();
all_ele.pop();
}
nele.removeClass()
all_ele.reverse()
all_ele.push(nele)
nele.addClass("c_red")
//nele.addClass("c_blue")
//为开始的元素赋值
start_ele =nele
all_ele.reverse();
if(all_ele.length > 1){
all_ele[1].removeClass();
all_ele[1].addClass("c_blue");
}
if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){
build_tag($("#tcs>tbody td").not("td[class*=c_]")).addClass("c_black");
} }
//放入一个juery对象随机返回一个juery对象
function build_tag(source){
return $(source).eq(parseInt(Math.random()*($(source).size())));
}
//动起来根据key_val 选择下一个元素
function tcs_next_ele(next_val){
if(next_val == 1){
//判断是否到头了
if($(start_ele).prev().prop("id") == undefined){
return $(start_ele).parent().find("td:last-child");
}
return $(start_ele).prev();
}else if(next_val == 2){
if( $("#"+(parseInt($(start_ele).prop("id"))-cols)).prop("id") == undefined){
return $("#"+(parseInt($(start_ele).prop("id"))+((b_r-1)*b_c)));
}
return $("#"+(parseInt($(start_ele).prop("id"))-cols))
}else if(next_val == 3){
if($(start_ele).next().prop("id") == undefined){
return $(start_ele).parent().find("td:first-child")
}
return $(start_ele).next();
}else if(next_val == 4){
if($("#"+(parseInt($(start_ele).prop("id"))+cols)).prop("id") == undefined){
return $("#"+(parseInt($(start_ele).prop("id"))-((b_r-1)*b_c)));
}
return $("#"+(parseInt($(start_ele).prop("id"))+cols))
}
}
//对取到的值验证
function tcs_check_ele(keyvalue){
var next_ele = tcs_next_ele(keyvalue)
if($(next_ele).prop("id") == undefined ){
return false
}else{
if($(next_ele).hasClass("c_black")){
normal_t($(next_ele),true)
}else if($(next_ele).hasClass("c_blue")){
//当回头时 让他继续往前
if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){
key_val=last_key_val;
if(keyvalue == last_key_val){
return false;
}else {
return tcs_check_ele(last_key_val)
}
}else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){
return false
}
normal_t($(next_ele),false)
}else{
normal_t($(next_ele),false)
}
}
return true;
}
//执行 游戏入口
function tcs_move(){
if(!tcs_check_ele(key_val)){
alert("游戏结束")
return ;
}
tcs_mov_con =setTimeout("tcs_move()",tcs_time)
}
$(function(){
//初始化
function tcs_init(){
all_ele.length=0;
start_ele = undefined;
//初始化表格
if($("#top #time").val() != "")
tcs_time = $("#top #time").val();
$("#tcs>tbody td").removeClass()
}
//开始前准备
function tcs_start_init(){
var start_id = parseInt((b_r)/2)*b_c+parseInt(b_c/2);
start_ele = $("#"+start_id.toString())
start_ele.addClass("c_red")
all_ele.push(start_ele)
build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black");
}
$("#top :button:eq(0)").click(function () {
$("#tcs>tbody").empty()
tcs_init()
b_r = $("#top #rows").val();
b_c = $("#top #cols").val();
cols = parseInt(b_c);
//生成表单
var num = 1;
for(var i = 0; i < b_r ; i ++ ){
var btr = r_tr.clone();
for(var j = 0 ; j < b_c ; j ++ ){
var btd = r_td.clone();
btd.prop("id",num);
btd.appendTo(btr);
num++
}
btr.appendTo($("#tcs>tbody"))
}
//生成起点
})
$("#top :button:eq(1)").click(function(){
//动起来
if($(this).val()=="开始游戏"){
tcs_init()
tcs_start_init()
tcs_move()
$(this).val("重新开始")
}else{
if(tcs_mov_con != undefined){
clearTimeout(tcs_mov_con)
}
tcs_init()
$(this).val("开始游戏")
}
})
$(document).keydown(function (event){
var ab = event.keyCode-36
if(ab < 5 && ab > 0){
if(key_val != ab){
last_key_val = key_val;
key_val=parseInt(ab);
}
}
})
})
</script>
</head>
<body>
<div id="all_show">
<div id = "top" >
<table >
<tr>
<td>行数：</td>
<td><input id="rows" type="text"></td>
<td>列数：</td>
<td><input id="cols" type="text"></td>
<td>时间(毫秒)：</td>
<td><input id="time" type="text"></td>
</tr>
<tr>
<td><input type="button" value="生成表格"></td>
<td><input type="button" value="开始游戏"></td>
</tr>
</table>
</div> <div id="content">
<table id="tcs" border="1px"cellspacing="1" cellpadding="1">
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
编写过程中遇到的问题：
//1、当函数内部不使用var 的时候是作为一个全局变量声明的，但是如果没执行这个函数的时候 这个全局变量是不存在的。
//2、$(a).addClass()的时候$(a).find(a[class])是可以找到的，$(a).removeClass() 也会认为它有class属性 但是没值。
juery实现贪吃蛇的游戏的更多相关文章
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- Unity 3D游戏-贪吃蛇类游戏源码：重要方法和功能的实现
贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- Java 用java GUI写一个贪吃蛇小游戏
目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- JavaScript-简单的贪吃蛇小游戏
实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
随机推荐
- [Bind(Exclude = "OrderId")][ScaffoldColumn(false)]
[Bind(Exclude = "OrderId")] 的意思是:View里的Model,在你提交给 Action时,不会绑定到Action的参数Model,默认它会绑定. mvc ...
- Python中获取当前日期的格式
在Python里如何获取当前的日期和时间呢?在Python语言里,我们可以通过调用什么模块或者类函数来得到当前的时间或日期呢? 当然你可以使用时间模块(time module),该模块提供了各种和时间 ...
- Oracle学习笔记四 SQL命令（二）：SQL操作语言类别
SQL分为下列语言类别 1.数据定义语言(DDL) Create.Alter.Drop 2.数据操纵语言(DML) Insert.Select.Delete.Update 3.事务控制语言(TCL) ...
- 萌新笔记——linux下（ubuntu）反删除（误删恢复）与回收站制作
刚刚有个小伙伴不小心删了他写了好几的天代码,为他心疼之余帮他找回了文件. 想到我之前也常常误删一些文件,就干脆分享一下我的反删除方法,并说说我做的回收站(好low的,求大神指点) 首先是反删除软件ex ...
- OpenStack Mitaka 版本中的 domain 和 admin
OpenStack 的 Keystone V3 中引入了 Domain 的概念.引入这个概念后,关于 admin 这个role 的定义就变得复杂了起来. 本文测试环境是社区 Mitaka 版本. 1. ...
- 安装Windows更新程序遇到错误:0x80070422
看看服务那里 windows update服务是不是被禁用了? 还有一个问题可能是由于Windows Modules Installer被禁用了.
- url中的特殊符号含义
1. # 10年9月,twitter改版.一个显著变化,就是URL加入了"#!"符号.比如,改版前的用户主页网址为http://twitter.com/username改版后,就变 ...
- ActiveMQ笔记(2)：基于ZooKeeper的HA方案
activemq官网给出了3种master/slave的HA方案,详见:http://activemq.apache.org/masterslave.html,基于共享文件目录,db,zookeepe ...
- [LeetCode] Guess Number Higher or Lower II 猜数字大小之二
We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...
- [LeetCode] Single Number III 单独的数字之三
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...