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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
使用Vue实现图片上传的三种方式
Jul 17 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
laravel自定义分页效果
2017/07/23 PHP
JQuery 入门实例1
2009/06/25 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
webpack4简单入门实例
2018/09/06 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
为什么说python适合写爬虫
2020/06/11 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
元旦联欢会感言
2014/03/04 职场文书
门卫岗位职责
2015/02/09 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
Python MNIST手写体识别详解与试练
2021/11/07 Python