JS小游戏之极速快跑源码详解


Posted in Javascript onSeptember 25, 2014

本文实例讲述了JS小游戏的极速快跑源码,分享给大家供大家参考。具体如下:

游戏运行后如下图所示:

JS小游戏之极速快跑源码详解

Javascript部分代码如下:

/** 极速快跑
* Author: fdipzone
* Date: 2012-07-15
* Ver: 1.0
*/

var gameimg = ['images/start.png', 'images/start_over.png', 'images/go.png', 'images/go_over.png', 'images/running.gif', 'images/run_start1.gif', 'images/run_start2.gif', 'images/run_start3.gif'];
var speed_obj = new SpeedClass();

window.onload = function(){
 var callback = function(){
 speed_obj.init();
 }
 img_preload(gameimg, callback);
}

// Speed Class
function SpeedClass(){
 this.levelset = [8,5,8,12]; // 难度参数
 this.playerlist = null; // 选手列表
 this.player = 0;  // 选中的选手
 this.level = 2;  // 难度
 this.lock = 0;  // 锁定
 this.isstart = 0;  // 是否开始
 this.isover = 0;  // 是否结束
}

// init
SpeedClass.prototype.init = function(){
 this.reset();
 this.create_player();
 this.create_event();
}

// reset
SpeedClass.prototype.reset = function(){
 this.player = 0;
 this.level = $('level').value; // level
 this.playerlist = $_tag('li', 'playerlist');
 for(var i=0; i<this.playerlist.length; i++){
 this.playerlist[i].className = '';
 }
 disp('start_btn', 'show', 'start_btn');
 disp('go_btn', 'hide', 'go_btn');
 this.lock = 0; // unlock
 this.isstart = 0; // unstart
 this.isover = 0; // unover
}

// create player
SpeedClass.prototype.create_player = function(){
 var runway = [];
 var playerlist = [];
 for(var i=1; i<=8; i++){
 runway[i] = '<li><div id="player' + (9-i) + '" class="run_status1"></div></li>';
 playerlist[i] = '<li>' + i + '</li>';
 }
 $('runway').innerHTML = runway.join('');
 $('playerlist').innerHTML = playerlist.join('');
 runway = null;
 playerlist = null;
}

// create event
SpeedClass.prototype.create_event = function(){
 var self = this;
 this.playerlist = $_tag('li', 'playerlist');
 for(var i=0; i<this.playerlist.length; i++){
 this.playerlist[i].onmouseover = function(){
  if(this.className!='on'){
  this.className = 'over';
  }
 }
 this.playerlist[i].onmouseout = function(){
  if(this.className!='on'){
  this.className = '';
  }
 }
 this.playerlist[i].onclick = function(o,c){
  return function(){
  if(self.lock==0){
   o.playerlist[c].className = 'on';
   if(o.player!=0 && o.player!=c+1){ // 不等於0且不等於自己
   o.playerlist[o.player-1].className = '';
   }
   o.player = c + 1;
  }
  }
 }(self, i);
 }

 $('start_btn').onmouseover = function(){
 this.className = 'start_over_btn';
 }
 $('start_btn').onmouseout = function(){
 this.className = 'start_btn';
 }
 $('start_btn').onclick = function(){
 if(self.player==0){
  return alert('请选择要支持的选手');
 }else{
  self.lock = 1; // locked
  disp('start_btn','hide');
  disp('go_btn','show');
  for(var i=1; i<=8; i++){
  self.start(i);
  }
 }
 }

 $('go_btn').onmouseover = function(){
 this.className = 'go_over_btn'; 
 }
 $('go_btn').onmouseout = function(){
 this.className = 'go_btn';
 }
 $('go_btn').onclick = function(){
 self.go();
 }
}

// start game
SpeedClass.prototype.start = function(c){
 var o = $('player' + c);
 var step = 1;
 var self = this;
 var exert = 0;

 o.style.marginLeft = '62px'; // init
 
 var et = setInterval(function(){
 if(step<4){ // step 1-3 is ready
  o.className = 'run_status' + step;
 }else{
  // run
  if(o.className!='running'){
  o.className = 'running';
  }
  // start can go
  if(self.isstart==0){
  self.isstart = 1;
  }
  // 已有一名选手到达终点
  if(self.isover==1){
  clearInterval(et);
  }else{
  if(self.player!=c){ // 其他选手
   exert = Math.floor(Math.random()* self.levelset[self.level])+3; // 根据level调整
  }
  o.style.marginLeft = parseInt(o.style.marginLeft) + Math.floor(Math.random()*8)+4 + exert + 'px';
  // 到达终点
  if(parseInt(o.style.marginLeft)>=745){ 
   clearInterval(et);
   self.isover = 1;
   self.gameover(o.id);
  }
  }
 }
 step ++;
 }, 350)
}

// go
SpeedClass.prototype.go = function(){
 if(this.isstart==1 && this.isover==0){
 var o = $('player' + this.player);
 var exert = Math.floor(Math.random()*3)+2; // 2-5
 o.style.marginLeft = parseInt(o.style.marginLeft) + exert + 'px';
 }
 return false;
}

// gameover
SpeedClass.prototype.gameover = function(id){
 id = id.replace('player','');
 var self = this;
 var msg = '';
 if(id==this.player){
 msg = "恭喜你,你支持的选手获得胜利\n\n";
 }else{
 msg = "很遗憾,你支持的选手没有获得胜利,获胜的是" + id + "号选\n\n";
 }
 if(confirm(msg + '是否重新开始?')==true){
 setTimeout(function(){
  self.init();
 },1000);
 }else{
 return false;
 }
}

/** common function */

// get document.getElementBy(id)
function $(id){
 this.id = id;
 return document.getElementById(id);
}

// get document.getElementsByTagName
function $_tag(name, id){
 if(typeof(id)!='undefined'){
 return $(id).getElementsByTagName(name);
 }else{
 return document.getElementsByTagName(name); 
 }
}

/* div show and hide
* @param id dom id
* @param handle show or hide
* @param classname
*/
function disp(id, handle, classname){
 if(handle=='show'){
 $(id).style.display = 'block';
 }else{
 $(id).style.display = 'none'; 
 }
 if(typeof(classname)!='undefined'){
 $(id).className = classname;
 }
}

/* img preload
* @param img 要加载的图片数组
* @param callback 图片加载成功后回调方法
*/
function img_preload(img, callback){
 var onload_img = 0;
 var tmp_img = [];
 for(var i=0,imgnum=img.length; i<imgnum; i++){
 tmp_img[i] = new Image();
 tmp_img[i].src = img[i];
 if(tmp_img[i].complete){
  onload_img ++;
 }else{
  tmp_img[i].onload = function(){
  onload_img ++;
  }
 }
 }
 var et = setInterval(
 function(){
  if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback
  clearInterval(et);
  callback();
  }
 },200);
}

完整实例代码点击此处本站下载。

相信本文所述对大家的javascript游戏设计有一定的借鉴价值。

Javascript 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
event对象的方法 兼容多浏览器
Jun 27 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
Vue slot用法(小结)
Oct 22 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 #Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 #Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 #Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 #Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 #Javascript
You might like
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
python聊天程序实例代码分享
2013/11/18 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
浅析python的优势和不足之处
2018/11/20 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Python实现密码薄文件读写操作
2019/12/16 Python
python实现126邮箱发送邮件
2020/05/20 Python
市场营销专业个人求职信范文
2013/12/14 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
党小组推荐意见
2015/06/02 职场文书
被委托人身份证明
2015/08/07 职场文书
新教师教学工作总结
2015/08/12 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Python字符串格式化方式
2022/04/07 Python