0

0

JS小游戏之象棋暗棋源码详解_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 16:35:42

|

2398人浏览过

|

来源于php中文网

原创

本文实例讲述了js小游戏的象棋暗棋源码,分享给大家供大家参考。具体如下:

游戏运行后如下图所示:

Javascript 部分:

/** chinese chess 
*  Author: fdipzone 
*  Date:  2012-06-24 
*  Ver:  1.0 
*/ 
 
var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','images/a7.gif','images/b1.gif','images/b2.gif','images/b3.gif','images/b4.gif','images/b5.gif','images/b6.gif','images/b7.gif','images/bg.gif','images/bg_over.gif','images/bg_sel.gif']; 
var chess_obj = new ChessClass(); 
 
window.onload = function(){ 
  $('init_btn').onclick = function(){ 
    chess_obj.init(); 
  } 
  var callback = function(){ 
    chess_obj.init(); 
  } 
  img_preload(gameimg, callback); 
} 
 
// chess class 
function ChessClass(){ 
  this.chess = []; 
  this.boardrows = 4; 
  this.boardcols = 8; 
  this.area = 82; 
  this.player = 1;  // 1:red 2:green 
  this.selected = null;  // selected chess 
  this.chesstype = ['', 'a', 'b']; 
  this.isover = 0; 
} 
 
// init 
ChessClass.prototype.init = function(){ 
  this.reset_grade();  
  this.create_board(); 
  this.create_chess(); 
  this.create_event(); 
  this.player = 1; 
  this.selected = null; 
  this.isover = 0; 
  disp('init_div','hide'); 
} 
 
// create board 
ChessClass.prototype.create_board = function(){ 
  var board = ''; 
  for(var i=0; iJS小游戏之象棋暗棋源码详解_javascript技巧
'; } } $('board').innerHTML = board; $('board').style.width = this.boardcols * (this.area + 2) + 'px'; $('board').style.height = this.boardrows * (this.area + 2) + 'px'; } // create random chess ChessClass.prototype.create_chess = function(){ // 32 chesses var chesses = ['a1','b7','a2','b7','a2','b7','a3','b7','a3','b7','a4','b6','a4','b6','a5','b5', 'a5','b5','a6','b4','a6','b4','a7','b3','a7','b3','a7','b2','a7','b2','a7','b1']; this.chess = []; while(chesses.length>0){ var rnd = Math.floor(Math.random()*chesses.length); var tmpchess = chesses.splice(rnd, 1).toString(); this.chess.push({'chess':tmpchess, 'type':tmpchess.substr(0,1), 'val':tmpchess.substr(1,1), 'status':0}); } } // create event ChessClass.prototype.create_event = function(){ var self = this; var chess_area = $_tag('div', 'board'); for(var i=0; i'; this.chess[index]['status'] = 1; // opened if(this.selected!=null){ // 清空選中 $(this.getid(this.selected.index)).className = ''; this.selected = null; } this.change_player(); this.gameover(); } // select chess ChessClass.prototype.select = function(index){ if(this.selected!=null){ $(this.getid(this.selected['index'])).className = ''; } this.selected = {'index':index, 'chess':this.chess[index]}; $(this.getid(index)).className = 'onsel'; } // move chess ChessClass.prototype.move = function(index){ if(this.beside(index)){ this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']}; this.remove(this.selected['index']); this.show(index); } } // kill chess ChessClass.prototype.kill = function(index){ if(this.beside(index)==true && this.can_kill(index)==true){ this.chess[index] = {'chess':this.selected['chess']['chess'], 'type':this.selected['chess']['type'], 'val':this.selected['chess']['val'], 'status':this.selected['chess']['status']}; this.remove(this.selected['index']); var killed = this.player==1? 2 : 1; $('grade_num' + killed).innerHTML = parseInt($('grade_num' + killed).innerHTML)-1; this.show(index); } } // remove chess ChessClass.prototype.remove = function(index){ this.chess[index]['status'] = -1; // empty $(this.getid(index)).innerHTML = ''; $(this.getid(index)).className = ''; } /* check is beside * @param index 目標棋子index * @param selindex 执行的棋子index,可为空, 为空则读取选中的棋子 */ ChessClass.prototype.beside = function(index,selindex){ if(typeof(selindex)=='undefined'){ if(this.selected!=null){ selindex = this.selected['index']; }else{ return false; } } if(typeof(this.chess[index])=='undefined'){ return false; } var from_info = this.getid(selindex).split('_'); var to_info = this.getid(index).split('_'); var fw = parseInt(from_info[0]); var fc = parseInt(from_info[1]); var tw = parseInt(to_info[0]); var tc = parseInt(to_info[1]); if(fw==tw && Math.abs(fc-tc)==1 || fc==tc && Math.abs(fw-tw)==1){ // row or colunm is same and interval=1 return true; }else{ return false; } } /* check can kill * @param index 被消灭的棋子index * @param selindex 执行消灭的棋子index,可为空, 为空则读取选中的棋子 */ ChessClass.prototype.can_kill = function(index,selindex){ if(typeof(selindex)=='undefined'){ // 没有指定执行消灭的棋子 if(this.selected!=null){ // 有选中的棋子 selindex = this.selected['index']; }else{ return false; } } if(this.chess[index]['type']!=this.chesstype[this.player]){ if(parseInt(this.chess[selindex]['val'])==7 && parseInt(this.chess[index]['val'])==1){ // 7 can kill 1 return true; }else if(parseInt(this.chess[selindex]['val'])==1 && parseInt(this.chess[index]['val'])==7){ // 1 can't kill 7 return false; }else if(parseInt(this.chess[selindex]['val']) <= parseInt(this.chess[index]['val'])){ // small kill big return true; } } return false; } // change player ChessClass.prototype.change_player = function(){ if(this.player == 1){ this.player = 2; // to green $('grade_img2').className = 'img_on'; $('grade_img1').className = 'img'; }else{ this.player = 1; // to red $('grade_img1').className = 'img_on'; $('grade_img2').className = 'img'; } } // reset grade ChessClass.prototype.reset_grade = function(){ $('grade_img1').className = 'img_on'; $('grade_img2').className = 'img'; $('grade_num1').innerHTML = $('grade_num2').innerHTML = 16; $('grade_res1').className = $('grade_res2').className = 'none'; $('grade_res1').innerHTML = $('grade_res2').innerHTML = ''; } // game over ChessClass.prototype.gameover = function(){ if($('grade_num1').innerHTML==0 || $('grade_num2').innerHTML==0){ // 任一方棋子为0 this.isover = 1; this.show_grade(); disp('init_div','show'); }else{ if(this.can_action()==false){ this.isover = 1; this.show_grade(); disp('init_div','show'); } } } // show grade ChessClass.prototype.show_grade = function(){ var num1 = parseInt($('grade_num1').innerHTML); var num2 = parseInt($('grade_num2').innerHTML); if(num1>num2){ // 红方胜 $('grade_res2').innerHTML = 'LOSS'; $('grade_res2').className = 'loss'; $('grade_res1').innerHTML = 'WIN'; $('grade_res1').className = 'win'; }else if(num1

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

Upscale
Upscale

AI图片放大工具

下载

立即学习Java免费学习笔记(深入)”;

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
全国统一发票查询平台入口合集
全国统一发票查询平台入口合集

本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

9

2026.02.03

短剧入口地址汇总
短剧入口地址汇总

本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。

18

2026.02.03

植物大战僵尸版本入口地址汇总
植物大战僵尸版本入口地址汇总

本专题整合了植物大战僵尸版本入口地址汇总,前往文章中寻找想要的答案。

10

2026.02.03

c语言中/相关合集
c语言中/相关合集

本专题整合了c语言中/的用法、含义解释。阅读专题下面的文章了解更多详细内容。

2

2026.02.03

漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题
漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题

本专题围绕漫蛙漫画(Manwa / Manwa2)官网网页版入口进行整理,涵盖漫蛙漫画官方主页访问方式、网页版在线阅读入口、台版正版漫画浏览说明及基础使用指引,帮助用户快速进入漫蛙漫画官网,稳定在线阅读正版漫画内容,避免误入非官方页面。

8

2026.02.03

Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口
Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口

本专题汇总了俄罗斯知名搜索引擎 Yandex 的官网入口、免登录访问地址、中文登录方法与网页版使用指南,帮助用户稳定访问 Yandex 官网,并提供一站式入口汇总。无论是登录入口还是在线搜索,用户都能快速获取最新稳定的访问链接与使用指南。

68

2026.02.03

Java 设计模式与重构实践
Java 设计模式与重构实践

本专题专注讲解 Java 中常用的设计模式,包括单例模式、工厂模式、观察者模式、策略模式等,并结合代码重构实践,帮助学习者掌握 如何运用设计模式优化代码结构,提高代码的可读性、可维护性和扩展性。通过具体示例,展示设计模式如何解决实际开发中的复杂问题。

2

2026.02.03

C# 并发与异步编程
C# 并发与异步编程

本专题系统讲解 C# 异步编程与并发控制,重点介绍 async 和 await 关键字、Task 类、线程池管理、并发数据结构、死锁与线程安全问题。通过多个实战项目,帮助学习者掌握 如何在 C# 中编写高效的异步代码,提升应用的并发性能与响应速度。

2

2026.02.03

Python 强化学习与深度Q网络(DQN)
Python 强化学习与深度Q网络(DQN)

本专题深入讲解 Python 在强化学习(Reinforcement Learning)中的应用,重点介绍 深度Q网络(DQN) 及其实现方法,涵盖 Q-learning 算法、深度学习与神经网络的结合、环境模拟与奖励机制设计、探索与利用的平衡等。通过构建一个简单的游戏AI,帮助学习者掌握 如何使用 Python 训练智能体在动态环境中作出决策。

2

2026.02.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
C++教程
C++教程

共115课时 | 15.6万人学习

Java 教程
Java 教程

共578课时 | 56.5万人学习

PHP基础入门课程
PHP基础入门课程

共33课时 | 2.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号