javascript课程设计报告潍坊科技学院网站(javascript课程设计报
课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
head
title贪吃蛇 Snake v2.4/title
style
body{
font-size:9pt;
}
table{
border-collapse: collapse;
border:solid #333 1px;
}
td{
height: 10px;
width: 10px;
font-size: 0px;
}
.filled{
background-color:blue;
}
/style
/head
script
function $(id){return document.getElementById(id);}
/**************************************************************
* javascript贪吃蛇 v2.4 br /
* author: sunxing007 05/14/2009br /
* 转载请注明来自 谢谢！br /
* v2.4修正了蛇身颜色可以随着蛇前进而移动
**************************************************************/
//贪吃蛇类
var Snake = {
tbl: null,
/**
* body: 蛇身，数组放蛇的每一节，
* 数据结构{x:x0, y:y0, color:color0},
* x,y表示坐标,color表示颜色
**/
body: [],
//当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
direction: 0,
//定时器
timer: null,
//速度
speed: 250,
//是否已经暂停
paused: true,
//行数
rowCount: 30,
//列数
colCount: 30,
//初始化
init: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//产生初始移动方向
this.direction = Math.floor(Math.random()*4);
//构造table
for(var row=0;rowthis.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;colthis.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//产生20个松散节点
for(var i=0; i10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
//产生蛇头
while(true){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "black";
this.body.push({x:x,y:y,color:'black'});
break;
}
}
this.paused = true;
//添加键盘事件
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
case 13: {
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
//如果没有暂停，则停止移动
Snake.pause();
Snake.paused = true;
}
break;
}
case 37:{//left
//阻止蛇倒退走
if(Snake.direction==1){
break;
}
Snake.direction = 3;
break;
}
case 38:{//up
//快捷键在这里起作用
if(event.ctrlKey){
Snake.speedUp(-20);
break;
}
if(Snake.direction==2){//阻止蛇倒退走
break;
}
Snake.direction = 0;
break;
}
case 39:{//right
if(Snake.direction==3){//阻止蛇倒退走
break;
}
Snake.direction = 1;
break;
}
case 40:{//down
if(event.ctrlKey){
Snake.speedUp(20);
break;
}
if(Snake.direction==0){//阻止蛇倒退走
break;
}
Snake.direction = 2;
break;
}
}
}
},
//移动
move: function(){
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
//移动一节身体
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Game over!\nPress Restart to continue.");
return;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//因为吃了一个食物，所以再产生一个食物
this.generateDood();
return;
}
//window.status = this.toString();
var point = this.getNextPos();
//保留第一节的颜色
var color = this.body[0].color;
//颜色向前移动
for(var i=0; ithis.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//探寻下一步将走到什么地方
pause: function(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: function(){
var x = this.body[0].x;
var y = this.body[0].y;
var color = this.body[0].color;
//向上
if(this.direction==0){
y--;
}
//向右
else if(this.direction==1){
x++;
}
//向下
else if(this.direction==2){
y++;
}
//向左
else{
x--;
}
//返回一个坐标
return {x:x,y:y};
},
//检查将要移动到的下一步是什么
checkNextStep: function(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x0||x=this.colCount||y0||y=this.rowCount){
return -1;//触边界，游戏结束
}
for(var i=0; ithis.body.length; i++){
if(this.body[i].x==xthis.body[i].y==y){
return -1;//碰到自己的身体,游戏结束
}
}
if(this.isCellFilled(x,y)){
return 1;//有东西
}
return 0;//空地
},
//擦除蛇身
erase: function(){
for(var i=0; ithis.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//绘制蛇身
paint: function(){
for(var i=0; ithis.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//擦除一节
eraseDot: function(x,y){
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
paintDot: function(x,y,color){
this.tbl.rows[y].cells[x].style.backgroundColor = color;
},
//得到一个坐标上的颜色
getColor: function(x,y){
return this.tbl.rows[y].cells[x].style.backgroundColor;
},
//用于调试
toString: function(){
var str = "";
for(var i=0; ithis.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
return str;
},
//检查一个坐标点有没有被填充
isCellFilled: function(x,y){
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
return false;
}
return true;
},
//重新开始
restart: function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; ithis.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
this.init();
this.speed = 250;
},
//加速
speedUp: function(time){
if(!this.paused){
if(this.speed+time10||this.speed+time2000){
return;
}
this.speed +=time;
this.pause();
this.move();
}
},
//产生食物。
generateDood: function(){
var colors = ['red','orange','yellow','green','blue','purple','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = colors[colorIndex];
}
}
};
/script
body onload="Snake.init();"
/*************************************************************br /
* javascript贪吃蛇 v2.4br /
* author: sunxing007 05/14/2009br /
* 转载请注明来自 a href="";/a 谢谢！br /
**************************************************************/br /
table id="main" border="1" cellspacing="0" cellpadding="0"/table
input type="button" id="btn" value="开始/暂停" /点左边按钮或按Enter开始/暂停游戏br /
input type="button" id="reset" value="重新开始" /br /
input type="button" id="upSpeed" value="加速" /点左边按钮或按Ctrl + ↑加速br /
input type="button" id="downSpeed" value="减速" /点左边按钮或按Ctrl + ↓减速
script
$('btn').onclick = function(){
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
Snake.pause();
Snake.paused = true;
}
};
$("reset").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
/script
/body
/html
100分求一份数据库原理课程设计的实验报告
（图放不上去呀 我自己做的E-R图）
计算机科学与信息学院
课程设计报告
课程名称： 数据库概论课程设计
专 业： 网络方向
班 级： ====
学 号： ===
姓 名： 闫娟
题 目： 网上购书系统
指导教师： 肖淑芬
2011年6月
目录
一、课程设计的背景来源 3
二、网上购书系统调查及前景 4
三、网上购书设计思想 4
1、前台系统工作流程 5
2、后台系统工作流程 6
四、网上书店工作过程的内容 6
五、数据库设计 7
1、数据项 7
2、 数据结构 8
3、关系模式的设计 8
4、视图的设计 9
六、网上购书E-R图 10
六、系统的源程序 15
七、系统评价及心得体会 20
一、课程设计的背景来源
1，其实写这个课程设计写得比较匆忙，马上其他可就要考试了，本想找个男的题目来挑战下自己，后来还是因为时间需要，所以选了个相对来说我们生活比较容易接近的
2，随着现在社会的发展，网络已经成为一个市场很大的交易平台，很多人由于时间需要或者各方面原因都把网上购物作为一种消费方式，有时我们在书店要花很长时间去找一本书，有时还找不到，记得有次在孝感学院图书馆找一本概率论辅导书，花了很长很长时间呀，所以我深有体会，还是感觉在网上购书比较简单，方便。
3,班上有很多同学都从事网上购物，我刚好想利用自己的专业知识来学习下这方面的知识，自己查查资料，把这个课程设计做好。
二、网上购书系统调查及前景
人们喜欢通过阅览书籍拓展自己的知识视野，可在实际生活的购书过程中人们却遇到了不少麻烦,比如购书人多，挑书难，搬书重等，因此既方便又快捷的网络购书便成为了一种很有潜力的购书消费方式。信息时代,电子商务已经成为我们现实生活中不可缺少的一个重要组成部分,同时它以一种特殊的方式改变着我们的生活。根据调查结果显示,网民上网以获取信息为主要目的占5 3.1％。目前我国上网购物的群体中,绝大多数是年轻人, 他们大多数是收入稳定、文化水平较高的中青年,网上消费已经日益成为他们生活中的一种重要的消费方式，他们成为了最有潜力的未来网上消费者。
三、网上购书设计思想
首先网上购书系统听起来是个很杂的程序，因为有很多很多书，也有很多很多人来买，但是其实我们简单的可以把它分为两个模块，这样我们就能很好的理解了，网上书店主要由前台会员管理模块和后台管理员模块两部分组成。
前台功能模块主要用于实现会员注册，登录，修改个人信息，分类查看书目信息、购书、管理购物车、结帐、查看各种服务条款等功能。
后台管理模块主要用于实现后台管理人员对会员，商品，物流，订单和系统的管理等功能。
1、前台系统工作流程
首先当我们用户登陆这个网站时，一开始就会出现让你登陆，如果是你会员，你可以直接登录，如果你不是会员，你要注册个账号。
1、 当你是会员时，你可以查看你的各项服务，比如说上次你收藏了什么书籍，以及你喜欢的书的种类，在可以看下前几次你购买书的情况，在可以修改个人信息，修改密码等，你也可以查看自己网上交易情况，看下自己买的书的情况，以及看上什么书了，可以把它放回购物车，方便自己购买。
2、 当你是非会员时，你要先进行注册，填写自己的基本信息，当你填好后，你也是其中一员了，你也同样可以向会员那样找自己的书了，相对来说比较方便。
3、 还有人不注册，只是进来逛下网站，看看自己是否有必要买一些书。
2、后台系统工作流程
后台系统工作流程主要用于实现后台管理人员对会员，商品，物流，订单和系统的管理等功能，他要对会员的登记进行统计，以及购物等方面的内容管理
四、网上书店工作过程的内容
1、管理员信息，包括数据项有：管理员编号、管理员账号、管理员密码。
2、会员信息，包括数据项有：会员账号、会员密码、会员昵称、会员E-mail、会员级别（管理员设定）。
3、图书信息，包括数据项有：图书编号、图书名称、作者、出版社编号、出版日期、图书类别编号、图书简介。
（⑴出版社信息，包括数据项有：出版社编号、出版社名称。
⑵图书类别信息，包括数据项有：图书类别编号、图书类别名称。）
4、图书订单，包括数据项有：会员账号、下定单日期、收货地址、收货地址邮编、收货人姓名、收货人联系方式、送货方式编号、总费用、图书名称、现已售出量情况。
5、购物车，包括数据项有：会员账号、每种图书名称、每种图书市场价格、每种图书网站价格、每种图书数量、每种图书的价格、图书总价。
五、数据库设计
1、数据项
数据项
数据项名 数据类型 长度 别名 取值范围
会员编号 字符型 15 会员的编号
姓名 文本型 20 会员的姓名
密码 文本型 20 会员的密码
电话 字符型 12 会员的电话
地址 文本型 50 会员的地址
商品编号 字符型 15 商品的编号
类型 文本型 10 商品的类型
名称 文本型 20 商品的名称
价格 整型 6 商品的价格
简介 文本型 500 商品的简介
图片 图片型 商品的图片
购物车编号 字符型 10 购物车的编号
商品数量 整型 10 购买商品的数量
订单编号 字符型 15 购物时生成的订单
订单日期 时间型 10 购买商品的时间
2、 数据结构
系统需求数据结构
数据结构名 含义说明 组成
会员 记录会员的基本信息 会员编号、姓名、密码、电话、地址
商品 记录销售商提供的商品信息 商品编号、类型、名称、价格、简介、图片
订购 记录会员的购物信息 会员编号、商品编号、订单编号、订单日期
购物车 存储会员需要购买的商品 会员编号、商品编号、购物车编号、商品数量
3、关系模式的设计
会员
数据项名 数据类型 长度 别名 是否为空 主外键
会员编号 字符型 15 会员编号 否 主键
姓名 文本型 20 姓名 否
密码 文本型 20 密码 否
电话 字符型 12 电话 否
地址 文本型 50 地址 否
商品
数据项名 数据类型 长度 别名 是否为空 主外键
商品编号 字符型 15 商品编号 否 主键
类型 字符型 15 类型 否
名称 字符型 20 名称 否
价格 整型 10 价格 否
简介 文本型 500 简介
图片 image型 100 图片
订购
数据项名 数据类型 长度 别名 是否为空 主外键
会员编号 字符型 15 会员编号 否 外键 主键
商品编号 字符型 10 商品编号 否 外键
订单编号 字符型 10 订单编号 否
订单日期 日期型 10 订单日期 否
购物车
数据项名 数据类型 长度 别名 是否为空 主外键
会员编号 字符型 15 会员编号 否 主键
商品编号 字符型 15 商品编号 否
购物车编号 字符型 15 购物车编号 否
商品数量 整型 6 商品数量 否
4、视图的设计
搜索商品视图
数据项名 数据类型 长度 别名 是否为空
名称 字符型 10 名称 否
类型 字符型 10 类型 否
价格 整型 10 价格 否
简介 文本型 4 简介 否
六、网上购书E-R图
否 是
网上书店系统业务流程：
网上书店前台管理功能结构图：
六、系统的源程序
ackage cart;
import java.util.Vector;
public class Cart {
Vector v = new Vector();
String act = null;
String item = null;
private void addItem(String id) {
v.addElement(id);
}
private void removeItem(String id) {
v.removeElement(id);
}
public void setItem(String id) {
item = id;
}
public void setAct(String s) {
act = s;
}
public String[] getItems() {
String[] s = new String[v.size()];
v.copyInto(s);
return s;
}
public void processRequest() {
if (act.equals("add"))
addItem(item);
else if (act.equals("remove"))
removeItem(item);
// reset at the end of the request
reset();
}
// reset
private void reset() {
act = null;
item = null;
}
public void clearAll(){
v.removeAllElements();
}
}
现实页面信息，提示等操作的设计：
package spage;
import java.sql.*;
public class ShowPage
{
private String str = "";
//显示页号为p的一页(user)
public String printPage(ResultSet rs, int p, int size)
{
str = "";
//将访问游标定位到页号为p的页要显示的第一条记录的位置
try {
for(int k=0;k(p-1)*size;k++)
rs.next();
}
catch(SQLException e) { }
for(int iPage=1; iPage=size; iPage++) {
str += printRow(rs,iPage,p);
try {
if(!rs.next()) break;
}
catch(Exception e) { }
}
return str;
}
//显示单行记录(user)
public String printRow( ResultSet rs ,int i,int p)
{
String temp = "";
try {
int id=rs.getInt("userid");
temp+="tr align='center' bgcolor='#FFFAF7'";
temp+="tda href='javaScript:seeUser("+id+")'"+rs.getString("name")+"/a/td";
temp+="td"+rs.getString("sex")+"/td";
temp+="td"+rs.getString("phone")+"/td";
temp+="td"+rs.getString("address")+"/td";
temp += "tda href='updateuser.jsp?updateid="+id+"'修改/a/td";
temp += "tda href='dealdeleteuser.jsp?delid="+id+"'删除/a/td";
temp += "/tr";
}
catch(SQLException e) { }
return temp;
}
//显示页号为p的一页(book)
public String bookPage(ResultSet rs, int p, int size,boolean f)
{
str = "";
//将访问游标定位到页号为p的页要显示的第一条记录的位置
try {
for(int k=0;k(p-1)*size;k++)
rs.next();
}
catch(SQLException e) { }
for(int iPage=1; iPage=size; iPage++) {
str += bookRow(rs,iPage,p,f);
try {
if(!rs.next()) break;
}
catch(Exception e) { }
}
return str;
}
//显示单行记录(book)
public String bookRow( ResultSet rs ,int i,int p,boolean f)
{
String temp = "";
try {
int id=rs.getInt("bookid");
temp+="tr align='center'";
temp+="tda href='detail.jsp?detailid="+id+"'"+rs.getString("bookname")+"/a/td";
temp+="td"+rs.getString("author")+"/td";
temp+="td"+rs.getString("pubhouse")+"/td";
temp+="td"+rs.getString("price")+"/td";
if(f)
{
temp+="td"+rs.getString("salenum")+"/td";
temp+="tda href='updatebook.jsp?updateid="+id+"'修改/a/td";
temp+="tda href='dealdeletebook.jsp?delid="+id+"'删除/a/td";
}
else
temp+="tda href='dealcart.jsp?dealid="+id+"act=add'加入购物车/a/td";
temp += "/tr";
}
catch(SQLException e) { }
return temp;
}
//显示页号为p的一页(order)
public String orderPage(ResultSet rs, int p, int size,boolean f)
{
str = "";
//将访问游标定位到页号为p的页要显示的第一条记录的位置
try {
for(int k=0;k(p-1)*size;k++)
rs.next();
}
catch(SQLException e) { }
for(int iPage=1; iPage=size; iPage++) {
str += orderRow(rs,iPage,p,f);
try {
if(!rs.next()) break;
}
catch(Exception e) { }
}
return str;
}
//显示单行记录(order)
public String orderRow( ResultSet rs ,int i,int p,boolean f)
{
String temp = "";
try {
String orderid=rs.getString("orderid");
temp+="tr align='center'";
temp+="tda href='detailorder.jsp?detailid="+orderid+"'"+orderid+"/a/td";
temp+="td"+(rs.getString("orderdate")).substring(0,10)+"/td";
temp+="td"+rs.getString("orderstate")+"/td";
if(f)
{
temp += "tda href='javaScript:seeUser("+rs.getString("userid")+")'"+rs.getString("username")+"/a/td";
temp += "tda href='dealdeleteorder.jsp?delid="+orderid+"'删除/a/td";
}
temp+="/tr";
}
catch(SQLException e) { }
return temp;
}
}
七、系统评价及心得体会
1、了解很多关于网上购书程序上的知识，要写这个课程设计，我把有关网上购书的概论也看了下，发现不知道是这个设计太简单还是怎么回事，网上出现很多此样的版本，很有有更新，可能我们对数据库设计的程序还不是很了解吧。
2，要写数据库E-R图，发现很难画啊，还要把线段连来连去，觉得在画图上面花了很多时间
3，一定要先了解数据情况，要先熟悉了网上购书的基本操作，在开始研究，最好自己去试一下网上购书，我就自己亲自去点击了下网上购书网，然后才下手写的课程设计。