JavaScript基础--超级玛丽(七)（上下左右控制）
相信大家都玩过超级玛丽，下面实现控制玛丽的上、下、左、右等基本功能，本篇只是在练习JavaScript的用法
1、创建一个HTML页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link href="Mario.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
//设计Mario类
function Mario(){
this.x =0;
this.y =0;
this.mymario = document.getElementById('mymario');
this.move = function(direct){
switch(direct){
case 0:
//window.alert("mario上移动");
upControl(mymario);
break;
case 1:
//这里为了改变img的left和Top值，需要先要得到img这个元素
//var mymario =document.getElementById('mymario');
rightControl(mymario);
break;
case 2:
//window.alert("mario下移动");
downControl(mymario);
break;
case 3:
//window.alert("mario左移动");
leftControl(mymario);
break;
}
}
} //创建Mario对象
var mario = new Mario();
//创建计数器，计算一行是否走到边界处。
var countWidth = 0;
//全局函数
function marioMove(direct){
switch(direct){
//0表示向上走
case 0:
mario.move(direct);
break;
//1表示向右走
case 1:
mario.move(direct);
break;
//2表示向下走
case 2:
mario.move(direct);
break;
//3表示向左走
case 3:
mario.move(direct);
break;
}
} //控制向右的方法
function rightControl(mymario){
//countWidth判断Mario是否可以前进的条件，450表示已走到X轴的最后位置，再继续走要超出div层
if(countWidth<450){
//获取mario的img元素的left属性：9px
//截取left属性的px,并把值转换成整型
var left = window.leftPosition(mymario);
//mario每次前进150px,并把累加的值 赋给img的left属性
mymario.style.left = (left+150) + "px";
//计数器，每次累加的结果保存在计数器中，用于判断一行是否结束
countWidth+=150;
}else{
//获取当前mario图片的高度
y = window.heightPosition(mymario);
//获取图片相对于浏览器上边界的高度
var top = window.topPosition(mymario);
//判断mario是否走到div的最后一行的尽头了，如果没有，就继续一行一行往下走
//359px是y轴坐标，如果超过359px，表示mario的y轴坐标再加70px,div的底层坐标就是359px
if(top < 359){
//y轴坐标每次加70px,sum完后放在top属性中
mymario.style.top = y + top + "px";
//每行的x轴坐标都是从9px开始的
mymario.style.left = "9px";
//重置计数器，用于判断x轴的是否可以继续的条件，换行后计数器要清零，否则计数器的值还为450；
countWidth = 0;
}else{
window.alert("游戏结束了");
//判断mario已走到了尽头（最后一行和最后一列的位置），重置游戏起始位置
mymario.style.top = "9px";
mymario.style.left = "9px";
} }
} //向下移动
function downControl(mymario){
var top = window.topPosition(mymario);
y = window.heightPosition(mymario);
if(top <359){
mymario.style.top = y + top + "px";
}else{
window.alert("到底了，再往下就掉下去了！");
}
} //向上移动
function upControl(mymario){
var top = window.topPosition(mymario);
var height = window.heightPosition(mymario);
if(top >9){
mymario.style.top = (top -height) + "px";
}else{
window.alert("到顶了，在往上头就碰这天花板了！");
}
} //向左移动
function leftControl(mymario){
//设置初始位置(从图片的最后一行开始，而不是Div的。最后一行一列位置是left=459px,top=359px)
//向左移动
var left = window.leftPosition(mymario);
var top = window.topPosition(mymario);
var height = window.heightPosition(mymario);
//判读是否左移动到边界处，边界位置left ==9
if(left > 9){
//继续左移动
mymario.style.left = (left - 150) + "px";
}else{
//判读是否到达游戏开始位置
if(left - top !=0){
//退回上一行的最后一列的位置：left = 459px的位置，left相当于x轴
mymario.style.left ="459px";
//退回上一行的最后一行的位置：top-height的位置，top 相当于y轴
mymario.style.top = (top - height) + "px";
}else{
window.alert("已回到开始位置！");
}
}
} //获取img元素top属性
var topPosition =function(mymario){
var top = mymario.style.top;
top = window.removeSuffixAndToInt(top);
return top;
} //获取img元素的left属性
var leftPosition = function(mymario){
var left = mymario.style.left;
left = window.removeSuffixAndToInt(left);
return left;
} //获取img元素的height
var heightPosition = function(mymario){
var height = mymario.style.height;
//height = parseInt(height.substr(0,height.length-2));
height = window.removeSuffixAndToInt(height);
return height;
} //截取字符串并转换整型，把字符串后面的px去掉
var removeSuffixAndToInt = function(imgStyleAttribute){
//接受传过过来的坐标值（字符串），例如：79px,去掉px,再把字符串79转换成整型
var imgAttriIntValue=parseInt(imgStyleAttribute.substr(0,imgStyleAttribute.length-2));
return imgAttriIntValue;
} //注意：被调用的方法名不能与HTML元素里的属性相同，否则调用是方法名跟属性名冲突，被调方法不起任何作用
//在谷歌浏览器是不能这样调用的，但是在IE中这样的是可以，由于IE浏览器支持的JavaScript语法属于弱类型，所以
//在IE是可用的
</script>
</head> <body>
<div class="gamediv">
<img id="mymario" style="height:70px;width:50px;left:9px;top:9px;position:absolute;" src="mario.jpg"/>
</div> <table border="1px" class="controlcenter">
<tr><td colspan="3">游戏键盘</td></tr>
<tr><td>**</td><td><input type="button" value="↑" onclick="marioMove(0)"/></td><td></td></tr>
<tr><td><input type="button" value="←" onclick="marioMove(3)"/></td><td>**</td><td><input type="button" value="→" onclick="marioMove(1)"/></td></tr>
<tr><td>**</td><td><input type="button" value="↓" onclick="marioMove(2)"/></td><td></td></tr>
</table>
</body>
</html>
实现控制Mario的基本功能（上、下、左、右）
2、创建一个名为Mario.css
.gamediv{
width:500px;
height:420px;
background-color:pink;
/*position:absolute;*/
}
/*表格样式*/
.controlcenter{
width:200px;
height:100px;
border:1px solid black;
}
3、在网页中显示：
JavaScript基础--超级玛丽(七)（上下左右控制）的更多相关文章
- Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制
Unit04: JavaScript 概述 . JavaScript 基础语法 . 流程控制 my.js function f3() { alert("唐胜伟"); } demo1 ...
- JavaScript 基础第七天（DOM的开始）
一.引言 JavaScript的内容分为三个部分,这三个部分分别是ECMAScript.DOM.BOM三个部分组成.所谓ECMAScript就是JavaScript和核心基础语法,DOM是文档对象模型 ...
- JavaScript基础学习(七)—BOM
BOM(Browser Object Model): 浏览器对象模型.提供了独立于内容而与浏览器窗口交互的对象,BOM主要用于管理窗口和窗口之间的通讯. 一.Navigator对象 ...
- javascript基础拾遗(七)
1.对象的继承__proto__ var Language = { name: 'program', score: 8.0, popular: function () { return this.sc ...
- 回归JavaScript基础（七）
主题:引用类型Function的介绍. 今天首先说的就是Function类型.下面就是定义函数的两种方法,第一种使用函数声明语法定义,第二种使用函数表达式定义.这两种定义函数的方式几乎没有什么区别. ...
- javascript基础（七）：js发送请求
GET请求 $.get("/api/v1.0/user",function(resp){ // 用户未登录 if ("4101" == resp.errno) ...
- 【JavaScript基础入门】总结目录
一.JavaScript基础 1.1JavaScript概述 1.2如何使用的JavaScript 1.3JavaScript基本语法 1.4JavaScript数据类型 1.5JavaScript运 ...
- javascript基础修炼(7)——Promise，异步，可靠性
开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 别人是开发者,你也是 Promise技术是[javascript异步编程]这个话题中非常重要的,它一度让我感到熟悉 ...
- JavaScript基础（1）-ECMAScript
一.JavaScript简介 1.JavaScript历史背景 布兰登 • 艾奇(Brendan Eich,1961年-),1995年在网景公司,发明的JavaScript. 刚开始JavaScrip ...
随机推荐
- VB6 GDI+ 入门教程[1] GDI+介绍
http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[1] GDI+介绍 2009 年 6 月 18 日 17 ...
- java 基础（第一天）
1. 一个文件里面只能有一个 public 修饰的方法 且方法名与文件名保持一致. 如: public class main(){ } class car(){ } class dog(){ } ...
- POST中文乱码解决方案
spring Web MVC框架提供了org.springframework.web.filter.CharacterEncodingFilter用于解决POST方式造成的中文乱码问题,具体配置如下: ...
- 阿里Linux Shell脚本面试25个经典问答
转载: 阿里Linux Shell脚本面试25个经典问答 Q:1 Shell脚本是什么.它是必需的吗? 答:一个Shell脚本是一个文本文件,包含一个或多个命令.作为系统管理员,我们经常需要使用多个命 ...
- Java Swing事件处理机制
Java Swing的事件处理机制 Swing GUI启动后,Java虚拟机就启动三个线程,分别为主线程,事件派发线程(也是事件处理线程)和系统工具包线程. 主线程 :负责创建并显示该程序的初始界面: ...
- 从别人那淘的知识 深入剖析Java中的装箱和拆箱
(转载的海子的博文 海子:http://www.cnblogs.com/dolphin0520/) 深入剖析Java中的装箱和拆箱 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来 ...
- jq三级全选全不选
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- robotframework笔记12
使用测试库 测试库包含那些体现关键词,通常被称为 库关键字 实际上,这与系统交互 测试. 所有测试用例总是从一些库,使用关键字 通过高级 用户的关键字 . 本节解释如何 考虑测试库的使用和如何使用的关 ...
- Linux GDB常用命令一栏
Linux GDB 常用命令如下: 1.启动和退出gdb (1)启动:gdb ***:显示一段版权说明: (*** 表示可执行程序名) (2)退出:quit.有的时候输入quit后会出现相关提示:类似 ...
- memcached 学习 1—— memcached+spring配置
memcached 学习目录: memcached 学习 1—— memcached+spring配置 这几天自己搭建项目环境,解决问题如下: 有关常见的配置这里没有列出,中间遇到的搭建问题比较顺利g ...