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 ...
随机推荐
- mybatis-generator-gui--一个mybatis代码自动生成界面工具
mybatis-generator-gui是什么 介绍mybatis-generator-gui之前,有必要介绍一下什么是mybatis generator(熟悉的同学可以跳过这一节).我们都知道,通 ...
- oracle 自增长序列
create or replace TRIGGER "METTINGUSER".TRG_PREPN BEFORE INSERT ON "PREPROJFUN" ...
- 5-3 bash脚本编程之二 条件判断
1. 条件测试的表达式 1. [ expression ] :注意这个中括号的前后都有一个空格 2. [[ expression ]] 3. test expression 2.条件判断的类型 1. ...
- OpenWRT镜像爬虫搭建本地源
网上的爬虫不能用,还是先表达谢意,不过我比较懒不喜欢重复写别人写的教程,只贴出修改,怎么用自己看教程吧. 我自己改了一版可以正常爬: #!/usr/bin/env python #coding=utf ...
- UI内侧错题
此题考察的是JQuery UI下的menu插件的使用,ui-menu表示菜单的外层容器,如果菜单包含图标,该元素会另外带一个 ui-menu-icons class.故A B选项错误.ui-menu- ...
- hdu----(1849)Rabbit and Grass（简单的尼姆博弈）
Rabbit and Grass Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Markdown的使用－－－现学现用
Markdown 是一种轻量级的标记语言,它的的优点很多,在这就不重复说了,最吸引人的应该是它清新简洁的界面,并且语法简单易学.最为常用的语法不会很多,用多了便自然而然的记住了. 可选工具 网上说如果 ...
- [LeetCode] K-th Smallest in Lexicographical Order 字典顺序的第K小数字
Given integers n and k, find the lexicographically k-th smallest integer in the range from 1 to n. N ...
- [LeetCode] Combination Sum III 组合之和之三
Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...
- 查看mysql语句运行时间的2种方法
网站运行很慢的时候,我就特别起知道为什么这么慢,所以我查啊查,数据库绝对是很重要的一部分,里面运行的sql是绝对不能放过的.平时做项目的时候,我也会注意sql语句的书写,写出一些高效的sql来,所以我 ...