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 ...
随机推荐
- 转载 c# 颜色对照表
这篇文章来来源于C# Color Table,这里是我翻译的中文版本,其中已经加上了我的一些理解和注释.翻译这篇文章的原因是我在写C#程序的时候发现,C#自带的颜色种类极多(详见下表),如果没有直观的 ...
- ASP.NET MVC Controllers and Actions
MVC应用程序里的URL请求是通过控制器Controller处理的,不管是请求视图页面的GET请求,还是传递数据到服务端处理的Post请求都是通过Controller来处理的,先看一个简单的Contr ...
- RabbitMq 集群搭建
实验环境: 操作系统为 Centos 7.2 IP hostName 192.168.190.132 node132 192.168.190.139 node139 192.168.190.1 ...
- Linux下使用crontab定时备份日志
上周学习了Linux,其中有使用crontab定时备份日志的内容,现把主要步骤记录如下: 首先需要备份的日志的源目录位于/opt/lampp/logs/access_log 备份到/tmp/logs下 ...
- python爬虫学习(10) —— 专利检索DEMO
这是一个稍微复杂的demo,它的功能如下: 输入专利号,下载对应的专利文档 输入关键词,下载所有相关的专利文档 0. 模块准备 首先是requests,这个就不说了,爬虫利器 其次是安装tessera ...
- svm心得体会（2）
昨天和李老师讨论一会还是有所得的,虽然我发誓要早睡又泡汤了,又无原则晚睡了. 总结一下有这么几点心得认识: (1)MATLAB再带的svm工具箱得不到参数,必须在路径中添加libsvm工具箱,安装在M ...
- python中的迭代器
1.可以直接作用于for循环的数据类型 第一类:集合数据类型,如list.tuple.dict.set.str等: 第二类:generator,包括集合定义generator和带yield的gener ...
- [.NET逆向] 破解NET的四大神器
原本这篇文章可以更早一星期写出来与大家分享,由于某方面的原因耽搁到现在,心里竟有那么一点好像对不住大家的感觉.这当然与神器有关,因为我发现利用这四大神器我似乎觉得几乎所有的NET程序破解都不在话下了 ...
- /var/log/messages
messages 该日志文件是许多进程日志文件的汇总,从该文件可以看出任何入侵企图或成功的入侵,包括整体系统信息,是系统最核心的日志.它包含了系统启动时的引导消息,以及系统运行时的其他状态消息.IO ...
- Boolean()值为false的五个特殊值
在if.while等需要判断条件时,会调用函数Boolean()对判断条件进行隐式转换,而只有五个特殊值才会返回false 这五个值是:undefined, null, "", 0 ...